Simple Heat Map Data Visualization From Numerical Values | JQuery Hottie Plugin

JQuery Hottie Plugin is an easy heatmap style background coloring for HTML elements. Hottie is a jQuery heatmap plug-in for formatting HTML such as table cells and list elements with an array of colors based on the calculated value of numeric data.

how to create a heat map, how to read heatmap correlation, heat map data visualization, github contribution heatmap, heatmap js example, jquery heatmap

How to make use of it:

1. Load the Hottie plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.hottie.js"></script>

2. Call the function on the target elements and the plugin.

<ul id="demo">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ...
</ul>

$(function(){
  $("#demo li").hottie();
});

3. Select an array of heat map colors used to represent the calculated value of the numerical data.

$(function(){
  $("#demo li").hottie({
    colorArray : [
      "#63BE7B",
      "#FBE983",
      "#F8696B"
    ]
  });
});

4. Enable the plugin to read numeric data from the HTML data attribute:

<ul id="demo">
  <li data-hist="1.1">Alabama</li>
  <li data-hist="1.2">Alaska</li>
  <li data-hist="1.3">Arizona</li>
  ...
</ul>

$(function(){
  $("#demo li").hottie({
    readValue : function(e) {
      return $(e).attr("data-myvalue");
    }
  });
});

5. Customize the color when the data is null or empty.

$(function(){
  $("#demo li").hottie({
    nullColor : "#222"
  });
});

Create Heatmaps From Numerical Values In HTML Elements, JQuery Hottie Plugin/Github, heatmap html css

See Demo And Download

Official Website(DLarsen): Click Here

This superior jQuery/javascript plugin is developed by DLarsen. For extra Advanced usage, please go to the official website.