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

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