Google Visualization How do change the background color column chart based on logic

Question

I have a column chart as below image. I want to style excellent bar green since it is over the average, very good to blue and fair to red color. Is this possible ?

Based on the value of the bar/cell i want to change the background color for the Column Chart

enter image description here

Do you want to color them based on their numeric value or should "Excellent" always be green, "Very Good" always blue, and "Fair" always red? — asgallant, Sep 13 '13 at 17:22
@asgallant Hey thanks for getting back, it's based on numeric value. For example if the value in Excellent goes below 80 it turns yellow, above 80 turns green. So will NumericFormatter work? it did not for me — Deeptechtons, Sep 13 '13 at 19:34
No, the NumberFormatter will not do what you want. I wrote a hack that changes the bar color by value, see my answer below. — asgallant, Sep 13 '13 at 22:00

score 3 · Accepted Answer · answered Sep 13 '13 at 22:08

Since all bars are colored by data series, you have to split your bars into different series in order to make them different colors. You can use calculated columns in a DataView to accomplish this:

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);
    // add as many different series as needed
    // make sure all possible values are covered, so you don't have any gaps where a data point can't be assigned to a series
    view.setColumns([0, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is less than 0, add to the red series
            return (dt.getValue(row, 1) < 0) ? dt.getValue(row, 1) : null;
        }
    }, {
        type: 'number',
        label: 'Value',
        calc: function (dt, row) {
            // if the value is greater than or equal to 0, add to the green series
            return (dt.getValue(row, 1) >= 0) ? 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,
        // set the colors to use for the series (in the same order as the columns in the view)
        colors: ['red', 'green']
        /* or you can use the series.<series index>.color option to assign colors to specific series:
        series: {
            0: {
                color: 'red'
            },
            1: {
                color: 'green'
            }
        }
        */
    });
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

See it working here: http://jsfiddle.net/asgallant/dMWWk/

Ahh now i see, but then target for excellent is going to be 80 is set by the user. hmm i should start accommodating that too — Deeptechtons, Sep 14 '13 at 05:25
This is more of my expectation, just that i want a indication for the target a red dotted line for the value 100 ( since it is target) http://jsfiddle.net/dMWWk/4/ Could you edit the fiddle to match that, i am working on the same too — Deeptechtons, Sep 14 '13 at 06:39
Here's an adjusted fiddle: http://jsfiddle.net/asgallant/dMWWk/5/. You'll need more than 1 row of data if you want to have the line drawn. — asgallant, Sep 14 '13 at 15:04
i am unable to see the target line but the code is there. Should i do something more to show the target line — Deeptechtons, Sep 16 '13 at 04:12
when you get time can you answer this too ?http://stackoverflow.com/questions/18897119/google-visualization-column-chart-specify-target-line-as-certainty-role — Deeptechtons, Sep 19 '13 at 14:14

Google Visualization How do change the background color column chart based on logic

1 Answers1