Column Chart - How to change the color of one or two columns of data?

3,450 views
Skip to first unread message

CZ

unread,
Jun 13, 2011, 8:38:00 AM6/13/11
to Google Visualization API
Is there a way to change the color on certain columns? There's an
option for colors, but I haven't been able to get this to work. Can
you help?


<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Location');
data.addColumn('number', 'Number');
data.addRows(22);
data.setValue(0, 0, 'Value 1');
data.setValue(0, 1, 1239);
data.setValue(1, 0, 'Value 2');
data.setValue(1, 1, 913);



var options = {
width: 600,
height: 600,
title: 'Chart Title',
colors: ['#7b1315','#6b999f'],
legend: 'none'
};
// Create and draw the visualization.
new
google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, options);
}


google.setOnLoadCallback(drawVisualization);
</script>

asgallant

unread,
Jun 14, 2011, 10:23:00 AM6/14/11
to google-visua...@googlegroups.com
You can set colors for series only.  In some cases (depending on what you want to do with your chart and data), it is possible to hack together a kludgy solution that end-routs the problem.  To do so, define a second series, and assign it the second color.  With your data, break it up into two groups, depending on what color you want the bars to be.  If the bar should be the first color, assign that value to the first series, and a zero to the second series.  If it should be the second color, assign a zero to the first series and the value to the second series.  Set the chart option "isStacked" to true, and draw the chart:

function drawVisualization() { 
var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Location'); 

     data.addColumn('number', 'Foo'); 
     data.addColumn('number', 'Foo'); 
     data.addRows(3); 
     data.setValue(0, 0, 'Value 1');
     data.setValue(0, 1, 1239);
     data.setValue(0, 2, 0);
     data.setValue(1, 0, 'Value 2');
     data.setValue(1, 1, 913);
     data.setValue(1, 2, 0);
     data.setValue(2, 0, 'Value 3');
     data.setValue(2, 1, 0);
     data.setValue(2, 2, 549);

     var options = { 
          width: 600, 
          height: 600, 
          title: 'Chart Title', 
          colors: ['#7b1315','#6b999f'], 
          legend: 'none',
          isStacked: true
     }; 

     // Create and draw the visualization. 
     new google.visualization.ColumnChart(document.getElementById('visualization')).draw(data, options); 
}

Value 1 and Value 2 will be the first color, Value 3 will be the second.

Reply all
Reply to author
Forward
0 new messages