Skip to content
Simple Heatmap plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
MIT-LICENSE.txt
README.md
example.html
hottie.jquery.json
jquery.hottie.js
package.json

README.md

JQuery Hottie Plugin

"Awesome! You just saved my life."  - JQuery Hottie User.

Easy heatmap-style background-coloring for HTML elements.

In its most simple form, it parses the html contents of the selected elements and parses them as floats.

Given the following markup:

<ul id="example1">
  <li>1<li>
  <li>2<li>
  <li>3<li>
  <li>4<li>
  <li>5<li>
</ul>

$('ul#example1 li').hottie();

Frequently, the numeric values used for coloring will not be found in the contents of the selected elements. You can pass a function as an option which tells the plug-in how to retrieve the numeric value.

<ul id="example2">
  <li data-hist="4">Alabama</li>
  <li data-hist="3">Alaska</li>
  <li data-hist="7">Arizona</li>
  <li data-hist="1">Arkansas</li>
  <li data-hist="9">California</li>
  <li data-hist="5">Colorado</li>
</ul>

$('ul#example2 li').hottie(
{
readValue : function(e) {
  return $(e).attr("data-hist");
}
});

You can also pass in a color scheme as an array. Low order colors correspond to low values. High order values correspond to high values.

<table id="myTable">
    <tr><td>2.59</td><td>0.68</td><td>1.35</td><td>1.35</td><td>2.03</td><td>1.60</td></tr>
    <tr><td>1.39</td><td>0.70</td><td>1.22</td><td>1.08</td><td>1.00</td><td>2.12</td></tr>
    <tr><td>2.87</td><td>0.59</td><td>1.22</td><td>0.57</td><td>1.08</td><td>3.00</td></tr>
    <tr><td>0.99</td><td>0.25</td><td>0.48</td><td>0.50</td><td>0.99</td><td>1.77</td></tr>
</table>

$("#myTable td").hottie({
    colorArray : [ 
        "#63BE7B",
        "#FBE983",
        "#F8696B"
    ]
});

See this all in an example on JSFiddle.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.