How do I set color range in Google Chart?

Question

I've created a ColumnChart and it has two bars. How can I set different colours on these two bars?

I'm currently only able to set one color for both bars,

This is part of the code I use:

var d = [['', ''], ['Bar 1', 100], ['Bar 2', 300]]; 
data = new google.visualization.arrayToDataTable(d);    

var option = {
  title: 'Betalingsoppfølging',
  width: '300',
  height: '250',
  min:  '0',
  legend: 'none',
  colors: ['#b2cedc', '#7b7b7b','#e2e2e2', '#747c1f']
}

wrap.setOptions(option);
wrap.draw(data);

The intention with colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b'] is to set start-end colour for bar1 and bar 2. But all i does, is to use the first color defined.

And is there a way to chagne the background color through options?

Test code for Visualization tool

Cut and paste this into Code Playground.

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  var raw_data = [['Austria', 150000, 225000]];

  var years = [2003, 2004];

  data.addColumn('string', 'Year');
  for (var i = 0; i  < raw_data.length; ++i) {
    data.addColumn('number', raw_data[i][0]);    
  }

  data.addRows(years.length);

  for (var j = 0; j < years.length; ++j) {    
    data.setValue(j, 0, years[j].toString());    
  }
  for (var i = 0; i  < raw_data.length; ++i) {
    for (var j = 1; j  < raw_data[i].length; ++j) {
      data.setValue(j-1, i+1, raw_data[i][j]);    
    }
  }

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Color testing",
            width:600, height:400,
            hAxis: {title: "Year"},
            colors: ['#dedb70', '#747c1f','yellow', 'red'],
            min: '0',
            legend: 'none'
           }
      );
}

Answer 1

The problem seems to be that you are only entering one entry, Austria, with multiple data points. colors sets the color for each entry, not each entry's data point. The chart does not have an option I can find for multiple data point colors.

To see what I mean change:

var raw_data = [['Austria', 150000, 225000]];

to

var raw_data = [['Austria', 150000, 225000],['Japan',100000,200000]];