Jquery Heat Map Coloring

Question

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 background css via jquery

Thank you.

Answer 1

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 + ')');
});