javascript - How do I conditionally format Google visualization table cells using chart wrapper function? -

i new world of google visualization api , hoping can me conditionally format color of cells in google visualization table. have been able change number format different columns display, not having such luck color formatting. using arraytodatatable , chartwrapper functions display data have queried spreadsheet.

is need change colorformat variable or chartwrapper function in not accepting formatting? thank in advance!

function drawdashboard(response) {    $('#main-heading').addclass("hidden");    if (response == null) {      alert('error: invalid source data.')      return;    } else {        // transmogrify spreadsheet contents (array) datatable object      var responseobjects = json.parse(response);      console.log(responseobjects);      var testdata = [];      (var = 1; < responseobjects.length; i++) {        responseobjects[i][0] = new date(responseobjects[i][0]);      }      var data = google.visualization.arraytodatatable(responseobjects, false);      console.log(data);      var dashboard = new google.visualization.dashboard(document.getelementbyid('dashboard-div'));        var percentformatter = new google.visualization.numberformat({        pattern: '#,###.##%'      });      percentformatter.format(data, 1);      percentformatter.format(data, 3);        var numberformatter = new google.visualization.numberformat({        pattern: '#.##'      });      numberformatter.format(data, 7);      numberformatter.format(data, 8);        var colorformatter = new google.visualization.colorformat();      colorformatter.addrange(0, 5, 'white', 'orange');      colorformatter.addrange(20000, 6, 'red', '#33ff33');      colorformatter.format(data, 8);      colorformatter.format(data, 9);      colorformatter.format(data, 10);      colorformatter.format(data, 11);        var table = new google.visualization.chartwrapper({        'charttype': 'table',        'containerid': 'table-div',        'view': {          'columns': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]        },      });        var donutslider = new google.visualization.controlwrapper({        'controltype': 'daterangefilter',        'containerid': 'slider-div',        'options': {          'filtercolumnlabel': 'date'        }      });        // set dependencies between controls , charts      dashboard.bind(donutslider, [table]);      // draw visualization components of dashboard      dashboard.draw(data);    }  }

looks you're using using formatter correctly
but parameters little off

also need allowhtml: true in table options

see following example using linked spreadsheet...

google.charts.load('current', {    callback: function () {      var query = new google.visualization.query(        'https://docs.google.com/spreadsheets/d/1tbtx_omnuiq_j0uxestkxed6mtimi7bapwkdbaqiifa/edit#gid=0'      );      query.setquery("select *");      query.send(drawdashboard);    },    packages: ['controls', 'table']  });    function drawdashboard(response) {    if (response.iserror()) {      console.log('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage());      return;    }      var data = response.getdatatable();      var dashboard = new google.visualization.dashboard(document.getelementbyid('dashboard-div'));      var percentformatter = new google.visualization.numberformat({      pattern: '#,###.##%'    });    percentformatter.format(data, 1);    percentformatter.format(data, 3);      var numberformatter = new google.visualization.numberformat({      pattern: '#.##'    });    numberformatter.format(data, 7);    numberformatter.format(data, 8);      var colorformatter = new google.visualization.colorformat();    colorformatter.addrange(-20000, 0, 'white', 'orange');    colorformatter.addrange(20000, null, 'red', '#33ff33');    colorformatter.format(data, 8);    colorformatter.format(data, 9);    colorformatter.format(data, 10);    colorformatter.format(data, 11);      var table = new google.visualization.chartwrapper({      charttype: 'table',      containerid: 'table-div',      options: {        allowhtml: true      }    });      var donutslider = new google.visualization.controlwrapper({      controltype: 'daterangefilter',      containerid: 'slider-div',      options: {        filtercolumnlabel: 'date'      }    });      dashboard.bind(donutslider, [table]);    dashboard.draw(data);  }

<script src="https://www.gstatic.com/charts/loader.js"></script>  <div id="dashboard-div">    <div id="slider-div"></div>    <div id="table-div"></div>  </div>