Design Chemical

Add more excitement to data tables using jQuery and conditional formatting to generate flexible data “heat maps”.

Long tables of numbers are never fun to look at and when presenting this kind of data on the web, where attention spans are already at their limits, you need to be able to present the highlights as quickly as possible.

Data heat maps provide the perfect way of taking ordinary data and creating something more visually appealing and informative.

jQuery Data Heat Map Demo

Download tutorial source files

Tutorial Objectives

To create our heat map in a way that is flexible enough to cover any range of values, there are several key components to our jQuery code that we need to consider:

• Capture and statistically analyze all data points
• Have a method of then grouping the data and being able to identify what formatting should be applied
• Dynamically generate the CSS to be used for each group to create a heat map style effect
• Apply the correct CSS to each data point

For this tutorial we will be using a random table of numbers and the formatting will be applied based on each value as a % of the largest value.

The Basic HTML

The complete table can be found on the demo page. The HTML below gives the basic table structure, showing one row of data and the CSS classes we will be using:

<table cellpadding="0" cellspacing="0" border="0" class="heat-map">
    <thead>
        <tr>
		    <th class="first">Title</th>
			<th>data 1</th>
			<th>data 2</th>
			<th>data 3</th>
			<th>data 4</th>
			<th>data 5</th>
			<th class="last">data 6</th>
		</tr>
    </thead>
	<tbody>
	    <tr class="stats-row">
		    <td class="stats-title">Wanda</td>
			<td>25</td>
			<td>55</td>
			<td>26</td>
			<td>19</td>
			<td>39</td>
			<td>21</td>
		</tr>
	</tbody>
</table>

The jQuery Code

1. Capture and analyze the data

The first thing we need to do is find out the largest value within the data range. To do this we use fairly simple but useful code to create an array of all data points and then return 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>

2. Group data points

For this tutorial we have already decided that we will use % of each value from max value. We do this so that we can find exactly where the data point is positioned on a scale of 1 – 100. This is the critical part in creating the heat map as we will then use this scale to dynamically generate the CSS styles

100 is probably a little excessive but is an easy number to work with for the tutorial. You can obviously adjust this number to suit your data and style of heat map.

We only want to use integers so we also include some additional rounding 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 not yet complete since we will add the actual formatting into the same loop but have broken it down to explain how we create each step.

3. Dynamically generating the heat map styles

To create the heat map effect we are basically going to use background colour.

Technically there is no restriction on how you apply the styles and background colour is only one option. The code is fairly flexible and with some minor adjustments can be applied to font size, container size, background image, etc.

Colour is easy because we can directly calculate each colour value between 2 defined colours – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate colour 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+')';

4. Apply the heat map styles to each data point

Finally we apply the new RGB value by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

We combine steps 2, 3 & 4 so that this is all being carried out within the same loop.

The Complete jQuery Code

The code below shows all 4 steps combined to create the complete heat map function:

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

To completely change the look of the heat map all it requires is to change the start colour and end colour RGB values!

Check out the demo page for more examples – jQuery Data Heat Map Demo or Download the tutorial source files

Tags: CSS, demo, jQuery, layout, tutorial
Categories jQuery, Tutorials 1919 Views