Цвет столбца Google в зависимости от его значения

Question

Мне нужно изменить цвет бара в зависимости от его значения.

Есть хорошее решение TableFormatter для таблиц , но оно не работает для используемой мной столбчатой ​​диаграммы.

Я видел эти темы:

• Google Chart, разные цвета для каждой полосы ,
• Google Chart Color

Также я видел решение, использующее jQuery, для изменения атрибута внутри iframe, но я хочу найти лучшее решение.

Мой код на http://jsfiddle.net/Xxn42/4/ или здесь:

google.load('visualization', '1', {packages: ['corechart', 'table']});  

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows(6);
data.setCell(0, 0, 'Shoes');
data.setCell(0, 1, 10700);
data.setCell(1, 0, 'Sports');
data.setCell(1, 1, -15400);
data.setCell(2, 0, 'Toys');
data.setCell(2, 1, 12500);
data.setCell(3, 0, 'Electronics');
data.setCell(3, 1, -2100);
data.setCell(4, 0, 'Food');
data.setCell(4, 1, 22600);
data.setCell(5, 0, 'Art');
data.setCell(5, 1, 1100);

// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(
  document.getElementById('visualization'));
var table = new google.visualization.Table(
  document.getElementById('table'));   

var formatter = new google.visualization.TableColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

chart.draw(data, {legend: 'none'});  
table.draw(data, {allowHtml:true, showRowNumber: true});