Create Heatmaps From Numerical Values In HTML Elements - jQuery Hottie

Hottie is a jQuery heatmap plugin for formatting HTML elements (like table cells and list items) with a range of colors based on the calculated value of numerical data.

See Also:

• Colorize Numeric Values In Table Columns - Column HeatMap

How to use 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 will do the rest.

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

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

3. Define an array of heatmap colors used to represent the calculated value of numerical data.

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

4. Define an array of heatmap colors used to represent the calculated value of numerical data.

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

5. Enable the plugin to read numerical data from an 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");
    }
  });
});

6. Customize the color when the data is null. Default: '#333'.

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

---

This awesome jQuery plugin is developed by DLarsen. For more Advanced Usages, please check the demo page or visit the official website.