Color google virtualization boolean column

Question

I am trying to use the ColorPattern formatter to color the cell that contains boolean data but not having any luck.

Anyone know if this is possible or whether you have to go about it a different way because its boolean data?

Fiddle here

Code

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Mike',  {v: 10000, f: '$10,000'}, true],
        ['Jim',   {v:8000,   f: '$8,000'},  false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var formatter = new google.visualization.ColorFormat();
    formatter.addRange(true, true, 'red', 'red');
    formatter.format(data, 2); // Apply formatter to second column
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Answer 1

ColorFormat assigns colors to the foreground or background of numeric cells

---

however, table charts are unique, using custom cell properties placed in the data, you can assign...

className - A string class name to assign to an individual cell. Use this to assign CSS styling to individual cells.

style - A style string to assign inline to the cell. This will override CSS class styles applied to that cell. You must set the property allowHtml=true for this to work. Example: 'border: 1px solid green;'.

to use either, you must set this option --> allowHtml: true

ref: table chart data format

---

see following working snippet, which implements style...

google.charts.load('current', {
  callback: drawTable,
  packages:['table']
});

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, {v: true, p: {style: 'background-color: red;'}}],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, {v: true, p: {style: 'background-color: red;'}}],
    ['Bob',   {v: 7000,  f: '$7,000'},  {v: true, p: {style: 'background-color: red;'}}]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

---

EDIT

use setProperty to set the property dynamically

see following working snippet...

google.charts.load('current', {
  callback: drawTable,
  packages:['table']
});

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike',  {v: 10000, f: '$10,000'}, true],
    ['Jim',   {v:8000,   f: '$8,000'},  false],
    ['Alice', {v: 12500, f: '$12,500'}, true],
    ['Bob',   {v: 7000,  f: '$7,000'},  true]
  ]);

  // check each row
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    // check boolean value
    if (data.getValue(i, 2)) {
      data.setProperty(i, 2, 'style', 'background-color: red;');
    }
  }

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>