How to set the range of colors in Google Chart?

Question

I created ColumnChart and has two bars. How can I set different colors on these two bars?

Currently, I can only set one color for both bars,

This is part of the code I'm using:

 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 the start end color for bar1 and bar 2. But all I do is use the first specific color.

And is there a way to set the background color through the parameters?

Test code for the visualization tool

Cut and paste this into the 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 is that you enter only one record in Austria with several data points. colors sets the color for each entry, not each data entry point. There is no option on the chart that I can find for multiple colors of data points.

To find out what I mean:

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

to

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

Answer 2

You do not need to repeat the color codes, it will repeat the set that you give it.

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

You can also just use it by default, which will give a clear set of colors if you are not picky about colors.

The background color changes through backgroundColor . It accepts a string like "red" or "# b2cedc"

There is a good tool here with which you can test your code on the fly. The above color code, inserted after the colors width:600, height:400, on any other line, as it should be.

This documentation may also be helpful.

Answer 3

Very useful code: I found it here. https://groups.google.com/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; } } } }