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'
           }
      );
}

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'
           }
      );
}

• javascript
• google-visualization

• Do you need specific colors, or just all distinct? – Lomky Commented Aug 26, 2011 at 13:09
• Not sure what you mean, but the colors can be anything. – Steven Commented Aug 26, 2011 at 13:15

3 Answers 3

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]];

You don't need to repeat the color codes, it will repeat the set you give it.

colors: ['#b2cedc', '#7b7b7b']

You can also just let it use the default, which will give a distinct color set, if you're not picky about the colors.

Background color is changed through backgroundColor. It takes a string like 'red' or '#b2cedc'

There's a nice tool you can play with to test your code on the fly. The above color code inserted in after width:600, height:400, colors in every other line like it should.

This documentation might also be helpful.

Very useful code: i found it here. https://groups.google./forum/?fromgroups=#!topic/google-visualization-api/jCVmevbBT4Q

   function drawVisualization() {
       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Year');
       data.addColumn('number', 'Sales');
       data.addColumn('number', 'Expenses');
       data.addRows(4);
       data.setValue(0, 0, '2004');
       data.setValue(0, 1, 1000);
       data.setValue(0, 2, 400);
       data.setValue(1, 0, '2005');
       data.setValue(1, 1, 1170);
       data.setValue(1, 2, 460);
       data.setValue(2, 0, '2006');
       data.setValue(2, 1, 660);
       data.setValue(2, 2, 1120);
       data.setValue(3, 0, '2007');
       data.setValue(3, 1, 1030);
       data.setValue(3, 2, 540);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data, { width: 640, height: 480, title: 'Company Performance',
                     vAxis: { title: 'Year', titleTextStyle: { color: 'red'} },
                     legend: 'none', colors: ['#cc00cc', '#ccffcc']
                    });

    changeColors();

    }

    function changeColors() {
     var chartArea = document.getElementsByTagName('iframe')           [0].contentDocument.getElementById('chartArea');
      var nodes = chartArea.getElementsByTagName('rect');

       // finding all <rect> elements with #cc00cc fill color and replacing them with      'blue','red','green','blue'
       for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
        }
      }
    }

  // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue'
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') {
      switch (i % 4) {
        case 0:
          node.setAttribute('fill', 'blue');
          break;
        case 1:
          node.setAttribute('fill', 'red');
          break;
        case 2:
          node.setAttribute('fill', 'green');
          break;
        case 3:
          node.setAttribute('fill', 'red');
          break;
         }
       }
      }
    }