Let me see if I got this straight: you want a column chart with three bars,
where each one is a different color, and each has it's own axis label?
Unfortunately, this is not explicitly supported by the API. You can either
give each bar its own color (like your example 1) or give each its own axis
label. This is because colors are assigned by series, and axis labels are
assigned by row, so you can either have 3 series (each a different color) or
3 rows (each the same color, but with different axis labels).
Fortunately, depending on how you want to use your chart and the underlying
dataTable, you can cheat around the problem:
function drawChart() {
var data = new google.visualization.dataTable();
// create 4 columns
data.addColumn('string', 'Label');
data.addColumn('number', 'Your Data');
data.addColumn('number', 'Your Industry');
data.addColumn('number', 'All Organization');
// add 3 rows
data.addRows(3);
// populate row 0 with "Your Data"
data.setValue(0, 0, 'Your Data');
data.setValue(0, 1, 22);
// fill the rest of the row with zero's
data.setValue(0, 2, 0);
data.setValue(0, 3, 0);
// repeat in row 1 with "Your Industry"
data.setValue(1, 0, 'Your Industry');
data.setValue(1, 1, 0);
data.setValue(1, 2, 33);
data.setValue(1, 3, 0);
// repeat in row 2 with "All Organization"
data.setValue(2, 0, 'All Organization');
data.setValue(2, 1, 0);
data.setValue(2, 2, 0);
data.setValue(2, 3, 55);
var chart = new
google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, {
width: 500,
height: 350,
titlePosition: 'none',
legend: 'bottom',
colors:['c7dcf2','0082c8','377aba'],
vAxis: {
title: 'Percentage (%)',
titleTextStyle: {color:
'black',fontName:'Arial',fontSize:18},
maxValue: 100,
minValue: 0
},
// make it a stacked chart, so the empty bars don't take up space
isStacked: true
});
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/Tr1sbWZ7a8EJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
