Color code a data table in dc.js

Question

I have a vary basic question and very little understanding of dc.js. I am trying to create a score card using the data that i have and display it as a data table using dc.js.I am processing the data through crossfilter.

How can i color code the entries in the data table. Say my table will have values from -1 to 1 and i want to color the cells as follows: -1 to 0 : decreasing gradient of red 0 : white 0 to 1 : increasing gradient of green

I know i am not able to provide any code but thats because i am at a total loss on how to achieve this. Help will be really appreciated.

Thank you.

Answer 1

You can do that with css.

I'm using datatables jquery plugin.

{ targets: 3, 
data: function (d) {
    if (d.Rating<5) {       return '<span class="red">'+d.Rating+'</span>' ;}
    else if (d.Rating<7) {  return '<span class="yellow">'+d.Rating+'</span>' ;}
    else if (d.Rating<=10) {return '<span class="green">'+d.Rating+'</span>' ;}
    else {                  return '<span class="grey">'+d.Rating+'</span>' ;}
}}

you can make as much categories as you want.
And modify appearence with css like this.

.red{ background-color:red; }
.yellow{ background-color:yellow; }
.green{ background-color:green; }