Change point color based on Google scatter chart value

Question

I am creating a Google scatter chart. I have one data series that looks something like this:

var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('number', 'Value');

data.addRows([[1,100], [2,150], 
              [3,200], [4,250], 
              [5,300], [6,350],
              [7,400], [8,450]]);

I want the color of the dots on the scatter chart to change between green and red based on the "value" of each dot.

i.e. the color of the dot ID = 1 must be green, however ID = 8 must be red!

Is it possible?

Answer 1

Add an extra column to your DataTable with a role style:

data.addColumn( {'type': 'string', 'role': 'style'} );

Now add a style to each of the lines to get the desired effect:

data.addRows([[1,100, 'point {size: 14; fill-color: green'], 
              [2,150, 'point {size: 14; fill-color: green'], 
              ....
              [8,450, 'point {size: 14; fill-color: red']
             ]);

demo → http://jsfiddle.net/v92k8rty/

---

. (, , ) javascript, - RainbowVis-JS. RainbowVis , DataTable, :

//create a gradient palette from green to red using RainbowVis
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, data.getNumberOfRows());
rainbow.setSpectrum('green', 'red');

//alter the DataTable
data.addColumn( {'type': 'string', 'role': 'style'} );    
for (var i=0;i<data.getNumberOfRows();i++) {
    data.setCell(i, 2, 'point { fill-color:'+rainbow.colorAt(i+1)+'}');
}    

demo → http://jsfiddle.net/ehgfwh8z/