CODEWITHSUNDEEP
google-visualization
Ramprasad
Ramprasad

Reputation: 8071

Visualisation table color formatting for complete row based a cell value

I have a Visualisation table with server side constructed JSON.When I try to use color formatting based on cell value, it applies for particular only. I need to apply color for complete row based on the single cell value. For Example,

        C1   C2   C3   C4

  R1     -    -    -    0  // This row should be "red"

  R2     -    -    -    1  // This row should be "green"

  R3     -    -    -    0

  R4     -    -    -    1

But the color applies for C4 only.

MyCode :

var dataTable = new google.visualization.DataTable(data, 0.5);

var formatter_short1 = new google.visualization.DateFormat({pattern:'h:mm aa'});
formatter_short1.format(dataTable,1);
formatter_short1.format(dataTable,2);
var view = new google.visualization.DataView(dataTable);
view.hideColumns([0,3,4,5,8,9,14]);
var color_formatter = new google.visualization.ColorFormat();
color_formatter.addRange(0,1, 'green', 'orange');
color_formatter.addRange(1,null, 'orange', 'green');
//color_formatter.format(dataTable, 1,2,6,7,9,11,12,13); // Apply formatter to 10 column
color_formatter.format(dataTable, 10); // Apply formatter to 10 column

Upvotes: 0

Views: 1709

Answers (1)

Iurii Makhno
Iurii Makhno

Reputation: 96

I didn't find answer on this question, so I'll post my solution for this old question here.

Looks like Google doesn't support such behaviour out of box, but you can achieve it with custom formatter. This one works in my case:

function RowColorFormat() {
    var colorFormat = new google.visualization.ColorFormat();

    this.addRange = function(from, to, color, bgcolor) {
        colorFormat.addRange(from, to, color, bgcolor);
    };

    this.addGradientRange = function(from, to, color, fromBgColor, toBgColor) {
        colorFormat.addGradientRange(from, to, color, bgcolor);
    };

    this.format = function(dataTable, column) {
        dataTable.setPropertyOverriden = dataTable.setProperty;
        dataTable.setProperty = function (row, column, name, value) {
            var length = this.getNumberOfColumns();
            for (var i = 0; i < length; i++) {
                this.setPropertyOverriden(row, i, name, value);
            }
        };
        colorFormat.format(dataTable, column);
        dataTable.setProperty = dataTable.setPropertyOverriden;
        delete dataTable.setPropertyOverriden;
    };
}

and use it like google.visualization.ColorFormat

Upvotes: 3

Related Questions