Color row by comparing two columns google visualization DataTable

Question

I am using google.visualization.DataTable and I have two relevant columns, we'll call them colSmall and colLarge. If colSmall is larger than colLarge in any given row, then I would like to make that row's background color red.

The closest I've come is by using google.visualization.ColorFormat(). I am able to make a formatter and addRange, which I can use to hard-code a particular value so that if colSmall is over that value, it will be red (see below).

var formatter = new google.visualization.ColorFormat();
formatter.addRange('100', null, 'black', 'red'); // anything greater than 100 will be red (the quotes are because these are string values)
formatter.format(data, 7); // colSmall is index 7

I have been unable to find a way to make it look at another column for this row. Another problem I have is that this only makes the cell red rather than the entire row.

Answer 1

I found a hacky way of doing it, but it I would still prefer something better.

Instead of building up the data and then adding it all to the table, I can insert each row into the table and format it there.

Then, for any given row, I can do something like:

                    var rowIndex = data.addRow(val);
                    if (colSmall > colLarge) {
                      data.setProperties(rowIndex, 2, {style: 'background-color:red'});
                    }

For each column in that row (rather than just column 2).

I would like to be able to use setProperty or, better yet, setRowProperty, but every time I try any of these methods, it simply does not work, so I'm settling for this for now.