Color bars by value

This chart draws bars in different colors, depending on their values.

by Alex Azuero

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to color bars by value</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

JavaScript

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addRows([
        ['Foo', 2],
        ['Bar', 4],
        ['Baz', 3],
        ['Cud', 6],
        ['Waq', 8],
        ['Bat', 2],
        ['Cad', 5],
        ['Giv', 3],
        ['Muj', 9],
        ['Lof', 7],
        ['Duq', 5],
        ['Kaf', 1],
        ['Zij', 4],
    ]);
    
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) < 3) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) >= 3 && dt.getValue(row, 1) < 5) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) >= 5 && dt.getValue(row, 1) < 7) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) >= 7 && dt.getValue(row, 1) < 9) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            return (dt.getValue(row, 1) >= 9) ? dt.getValue(row, 1) : null;
        }
    }]);
    
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(view, {
        legend: 'none',
        isStacked: true,
        height: 300,
        width: 800
    });
}