Google Chart, different color for each bar

Question

I have this Google Bar Chart:

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addRows(2);
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
  }

All runs OK, but the thing is, both bars have the same color, and I would like to be able to have different colors for each bar.

Can anyone help me on this?

Answer 1

Not sure why no-one mentioned style role columns - I assume they were added after the initial question, but for anyone looking for this now, a better way is:

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', '');
        data.addColumn('number', '');
        data.addColumn({ type: 'string', role: 'style' });

        data.addRows(2);

        data.setValue(0, 0, 'Value 1');
        data.setValue(0, 1, 250);
        data.setValue(0, 2, 'rgb(200, 20, 60)');
        data.setValue(1, 0, 'Value 2');
        data.setValue(1, 1, 100);
        data.setValue(1, 2, 'rgb(20, 200, 60)');

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {
                width: 400, 
                height: 175, 
                title: 'Total',
                legend: 'none',
        });
    }

You can set many other CSS styles to make your charts REALLY ugly.

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

NOTE that it does not seem to support rgba() specified colors - you have to set opacity on the style role.

Here's a fiddle:

http://jsfiddle.net/a1og7rq4/

SIDENOTE: If you have multiple series, then you need a style role column after each series data column.

Here is another fiddle showing that (with opacity as well): http://jsfiddle.net/v5hfdm6c/1

Here is the modified function (left the unmodified one above for clarity)

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });
data.addColumn('number', '');
data.addColumn({ type: 'string', role: 'style' });

data.addRows(2);

var i = 0;
data.setValue(0, i++, 'Value 1');
data.setValue(0, i++, 200);
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5');
data.setValue(0, i++, 250);
data.setValue(0, i++, 'rgb(200, 20, 60)');

i = 0;
data.setValue(1, i++, 'Value 2');
data.setValue(1, i++, 120);
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5');
data.setValue(1, i++, 100);
data.setValue(1, i++, 'rgb(20, 200, 60)');

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
    width: 400, 
    height: 175, 
    title: 'Total',
    legend: 'none',
});

}

Answer 2

One hacky way to do things is put them all in the same row, and API would assign distinct colors to this. Hence for your example

function drawChart(){

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
    data.addRows(2);
    data.setValue(0, 0, 250);
    data.setValue(0, 1, 100);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

    chart.draw(data, {
        width: 600, 
        height: 175, 
        title: 'Total',
        legend: 'none',
    });
} 

If you need your own colors add this in the chart.draw options like,

colors: ['red','yellow', 'blue'],

If there are too many bars though, this may be a bad option for that please look at

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter