Google table Chart : how do I change the row background color based on a column value

Question

I am using google table chart to show some data as a table. Based on the status value on the row, I have to change the background color of the row. So I have to show multipl

Answer 1

When mixing HTML DOM with data object the rowIndex could be out of sync and edit the wrong row. In my case I used dashboard() and bind() with ChartWrapper() & ControlWrapper() to use StringFilter, so I avoided addListener() to change HTML DOM and rather modified data object before rendering:

for (var i = 0; i < data.getNumberOfRows(); i++) {
  if (data.getValue(i, 1) === 1100) {
    // change entire row
    data.setRowProperty(i, 'style', 'background-color:magenta;');
    // or change columns 0 & 1
    data.setProperty(i, 0, 'style', 'background-color:magenta;');
    data.setProperty(i, 1, 'style', 'background-color:magenta;');
  }
}