Column chart by group
I have a bar chart that shows the energy consumption in the current and previous years. Now, this consumption is coming from different sources, so I would like to chart these values in multiple columns that show the stacked values.
I am using google chart, but setting the parameter isStacked
to true
in the parameter array just adds each individual value for a specific row. I want to achieve something like this:
That is, rows with multiple columnar columns. Is this possible with the Google Chart API?
source to share
This can be done with 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 very good way to do it. Basically you are trying to make too many charts to display too much information, and it would be much better to split your data into multiple charts. For example, you can use domain roles , or you can simply use a line chart to compare the difference between trucks and cars (which you cannot currently do due to different baselines). You can also compare different countries on cars or trucks only as a standard bar chart (not stacked). You can use diagram interactionso that users can choose what data they want to see. It looks like you are trying to recreate an existing Excel spreadsheet that is not interactive with interactive technology, so it is best to rethink how it should be used given the interoperability due to technology change.
source to share