How to style google table chart column containing specific values

Question

There are five kind of values in status column- {none, active, hold,...}. So I want to make "active" as green in color and "hold" in yellow color etc. ' And Similarly in Days Left column, values less than 10 should be red in color.

var f_div = document.createElement("div");
                        f_div.id = "filter_div119_PlanName";
                        parent_w_div.insertBefore(f_div,w_div); 


                        var PlanNamefilter = new google.visualization.ControlWrapper({
                          "controlType": "CategoryFilter",
                          "containerId": "filter_div119_PlanName",
                          "options": {
                             "filterColumnLabel": "Plan Name", 

                            "values": ["Silver","Delux","Premium","Basic","Gold","Diamond"],
                            "ui": {
                              "allowTyping": false,
                              "allowMultiple": true
                            }
                          }
                        });
                        filters_bind.push(PlanNamefilter);

var data119 = google.visualization.arrayToDataTable([[{type:"string", label:"Plan Name"}, {type:"string",label:"Status"}, ...
var chart119 = new google.visualization.ChartWrapper({
                chartType: "Table",
                containerId: "widget_119",

                options : {hAxis: {title: "Labale", textPosition: "out"},vAxis: {title: "Value"},legend: {position:"none"},width:"100%",height:"100%",chartArea:{top:30,height:"85%",width:"85%"},showRowNumber: true,allowHtml: true, page: "enable", pageSize: 8, pagingSymbols: {prev: 'prev', next: 'next'}}
                }); dashboard.bind(filters_bind, chart119);
                            dashboard.draw(data119);}

It would be better, if solution do not require third party library.

Answer 1

ColorFormat in Google Visualization should be something you are looking for as you are using Google Visualization already.

You can check this reference .

Sample Code for Status Column

var formatter = new google.visualization.ColorFormat();
formatter.addRange("active", null, 'green', 'white');
formatter.addRange("hold", null, 'yellow', 'white');
formatter.format(data, 1); // Apply formatter to second column

Sample Code for Status Column

var formatter = new google.visualization.ColorFormat();
formatter.addRange(null, 10, 'red', 'white');
formatter.format(data, 3); // Apply formatter to fourth column

Code Explanation

formatter.addRange(from, to, color, bgcolor) will specifies a rule that text color will change to color and background color will change to bgcolor when the value of a cell is in the range of from to to .

formatter.format(dataTable, columnIndex) will apply the formatter specifies above to dataTable at column columnIndex (in your case Status is at index 1 and Days Left is at index 3)

Answer 2

    var table = new google.visualization.Table(document.getElementById('table_div7'));

    var formatter = new google.visualization.ColorFormat();

    formatter.addRange('normal', null, 'white', 'green');
    formatter.addRange('falla' ,  null, 'white', 'red');
    formatter.format(data, 0); //  colores  columna fanstatus   

table.draw(data, {allowHtml: true, width: '80%', height: '10%'});
  }

<div id="table_div7"></div>

no me cambia el color en la tabla fanstatus el string ... o normal o falla