Create a Flexible jQuery Data Heat Map
Sometimes reading a table’s long and numerous columns can be quite a very cumbersome and tedious task. You want your readers to immediately see the whole picture once they glance at your table’s contents.
This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with a maximum and minimum value, the heat map adds varying shades of a particular color, making it easier for the viewer to quickly spot the highest and lowest value. It can be a nice alternative for sorting data in ascending or descending order because you eliminate the user’s need to click on a button just to rearrange the data in a particular column.
The two main objectives of this tutorial are:
- To capture and statistically analyze all data points
- To provide a method of grouping the data and be able to identify what formatting should be applied
Let’s start with the usual basic HTML markup. We’ll just keep the code short by only including one row of data with the CSS classes but feel free to add as many rows as you like if you want to make it look like the one in the demo page or the image sample above:
HTML
| <table cellpadding=”0″ cellspacing=”0″ border=”0″ >
<thead> <tr> <th >Title</th> <th>data 1</th> <th>data 2</th> <th>data 3</th> <th>data 4</th> <th>data 5</th> <th >data 6</th> </tr> </thead> <tbody> <tr > <td >Wanda</td> <td>25</td> <td>55</td> <td>26</td> <td>19</td> <td>39</td> <td>21</td> </tr> </tbody> </table> |
Let’s go over the code first part by part.
First thing we’ll do is capture and analyze the data, meaning we have to find out the largest value within the range. We do this by creating an array of all the data points and then returning the maximum value:
| <script type=”text/JavaScript”>
$(document).ready(function(){ // Function to get the max value in an Array Array.max = function(array){ return Math.max.apply(Math,array); }; // Get all data values from our table cells making sure to ignore the first column of text // Use the parseInt function to convert the text string to a number var counts= $(‘.heat-map tbody td’).not(‘.stats-title’).map(function() { return parseInt($(this).text()); }).get(); // run max value function and store in variable var max = Array.max(counts); }); </script> |
Next is to group the data points. We’ll be using the percentage (%) of each value from the max value to find exactly where the data point is positioned on a scale of 1-100.
This is critical to create the heat map as this scale is what we’ll use to dynamically generate the CSS style. You can adjust the max number (100) to suit your data and style of heat map. In addition, we only want to use integers so we also include the rounding off of the results.
| n = 100; // Declare the number of groups
// Loop through each data point and calculate its % value $(‘.heat-map tbody td’).not(‘.stats-title’).each(function(){ var val = parseInt($(this).text()); var pos = parseInt((Math.round((val/max)*100)).toFixed(0)); }); |
The above code is still incomplete since we still have to add the actual formatting into the same loop.
To create the heat map effect we are basically going to use background color.
Technically there is no restriction on how you apply the styles, and background color is only one option. The code is fairly flexible and some minor adjustments can be applied to font size, container size, background image, etc.
Color is easy because we can directly calculate each color value between 2 defined colous – our start point and the end point, which across 100 points should create a gradient style effect.
To calculate color we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.
| // Define the ending colour, which is white
xr = 255; // Red value xg = 255; // Green value xb = 255; // Blue value // Define the starting colour #f32075 yr = 243; // Red value yg = 32; // Green value yb = 117; // Blue value // Calculate a specific colour point // pos - calculated in the earlier code identifies where on the scale the data point is red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0)); green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0)); blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0)); // Once we have our RGB values we combine them to create our CSS code clr = ‘rgb(‘+red+’,'+green+’,'+blue+’)'; |
Finally we apply the new RGB value (heat map style) to each data point by setting the background colour of the table cell.
| $(this).css({backgroundColor:clr}); |
Below are the combined parts of the code to create the complete heat map function.
Complete jQuery code
| <script type=”text/JavaScript”>
$(document).ready(function(){ // Function to get the max value in an Array Array.max = function(array){ return Math.max.apply(Math,array); }; // Get all data values from our table cells making sure to ignore the first column of text // Use the parseInt function to convert the text string to a number var counts= $(‘.heat-map tbody td’).not(‘.stats-title’).map(function() { return parseInt($(this).text()); }).get(); // run max value function and store in variable var max = Array.max(counts); n = 100; // Declare the number of groups // Define the ending colour, which is white xr = 255; // Red value xg = 255; // Green value xb = 255; // Blue value // Define the starting colour #f32075 yr = 243; // Red value yg = 32; // Green value yb = 117; // Blue value // Loop through each data point and calculate its % value $(‘.heat-map tbody td’).not(‘.stats-title’).each(function(){ var val = parseInt($(this).text()); var pos = parseInt((Math.round((val/max)*100)).toFixed(0)); red = parseInt((xr + (( pos * (yr - xr)) / (n-1))).toFixed(0)); green = parseInt((xg + (( pos * (yg - xg)) / (n-1))).toFixed(0)); blue = parseInt((xb + (( pos * (yb - xb)) / (n-1))).toFixed(0)); clr = ‘rgb(‘+red+’,'+green+’,'+blue+’)'; }); }); </script> |
If you want to completely change the look (i.e. the colors of the cells) of the heat map, all you have to do is change the start and end color RGB values. Have fun experimenting with the values and customizing the look of your tables!
0
510
