Skip to content
Simple Heatmap plugin
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
MIT-LICENSE.txt changing link to JSFiddle Jun 11, 2013
example.html Fixed greyscale problems Aug 15, 2011
hottie.jquery.json Version bump to 0.1.3 Jan 18, 2013

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">

$('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#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">

$("#myTable td").hottie({
    colorArray : [ 

See this all in an example on JSFiddle.

You can’t perform that action at this time.