I have a column chart that shows power consumption in current and previous years. Now this consumption comes from different sources, so I would like to chart these values in mul
This is doable with a kludge:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Country', 'Cars', 'Trucks'],
['', null, null],
['US', 15, 15],
['Canada', 17, 17],
['Europe', 13, 13],
['Mexico', 16, 16],
['Asia', 20, 20],
['', null, null],
['US', 15, 15],
['Canada', 17, 17],
['Europe', 13, 13],
['Mexico', 16, 16],
['Asia', 20, 20],
['', null, null],
['US', 15, 15],
['Canada', 17, 17],
['Europe', 13, 13],
['Mexico', 16, 16],
['Asia', 20, 20],
['', null, null],
['US', 15, 15],
['Canada', 17, 17],
['Europe', 13, 13],
['Mexico', 16, 16],
['Asia', 20, 20],
['', null, null],
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{isStacked:true, width:800, hAxis: {showTextEvery:1, slantedText:true}}
);
}
This is probably not a great way of doing this. Basically, you are trying to make a single chart show too much information and would be far better off splitting up your data in to multiple charts. For instance, you can use domain roles, or you can just use a line chart to be able to compare the difference between trucks and cars (which you can't currently do because of the different baselines). You can also compare different countries on just cars or trucks as a standard column chart (not stacked). You can use chart interaction to allow users to pick what data they want to see. It looks like you are trying to recreate an existing Excel chart which isn't interactive with an interactive technology, so the best thing is likely to rethink how it should be used given the ability to interact due to the shift in technology.