Jquery Heat Map Coloring

I have a table with every column having values between -100 to +100. I want to color them with all element below zero to -100 going from white to dark red. and the ones from zero to +100 with colors from white to dark green.

Any suggestion on how I can brew the colors using JQuery?

I am having trouble with selectors .. so best if I can just do a set 开发者_如何学Pythonbackground css via jquery

Thank you.

With a function that can calculate a color component at a point between two values, you can use the rgb(r,g,b) color syntax in CSS to set the background color:

function morph(start, stop, point) {
  return Math.round(stop - start) * point / 100 + start);
}

$('td').each(function(){
  var value = parseInt($(this).text());
  var color;
  if (value < 0) {
    color = morph(255,100,-value) + ',' + morph(255,0,-value) + ',' + morph(255,0,-value);
  } else {
    color = morph(255,0,value) + ',' + morph(255,50,value) + ',' + morph(255,0,value);
  }
  $(this).css('background-color', 'rgb(' + color + ')');
});

Might I suggest my own jQuery plugin?

jQuery Hottie makes it easy to take normal markup and add a background color like so:

<table id="myTable">
    <tr><td>-100</td><td>50</td><td>-30</td></tr>
    <tr><td>100</td><td>0</td><td>-30</td></tr>
    <tr><td>750</td><td>-50</td><td>40</td></tr>
</table>

And in JS:

$("#myTable td").hottie({
    colorArray : [ 
        "#F8696B", // highest value
        "#FFFFFF",
        "#63BE7B"  // lowest value
        // add as many colors as you like...
    ]
});

Results:

See this example live in JSFiddle

You might consider using the HeatColor jQuery plugin. However, be warned that the precise color sequence you want may not be available.

A good tutorial on rolling your own can be found at designchemical.com.

I use the following function on any table that needs to have different levels of green (highest value) and red (lowest value).

(In this example td values are floating number representing percentages - like 0.941 for 94.1%):

function heatmap()
{
    var heat_max = 0;
    var heat_min = 100;

    //loop through table cells to find min and max values
    $('table#heatmap').find('td').each(function() 
    {
        var cell_val = Math.round(parseFloat($(this).text()) * 1000) / 10;

        if(cell_val > heat_max) { heat_max = cell_val;}
        if(cell_val < heat_min) { heat_min = cell_val;}
    });

    //reloop through table cells and apply background color
    $('table#heatmap').find('td').each(function()
    {
        var cell_val = Math.round(parseFloat($(this).text()) * 1000) / 10;

        var color_pct = (cell_val - heat_min)  / (heat_max - heat_min);
        var color_int = 2 * 255 * color_pct;

        var r = 255, g = 255;
        if(color_int <= 255) { g = color_int;        } 
                       else  { r =  510 - color_int; }

        var bg_color = 'rgba('+r+', '+g+', 50, 0.2)';

        $(this).css({'backgroundColor' : bg_color});
    });

}