0

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 multiple columns that show stacked values.

I am using google chart, but setting the isStacked parameter to true in the options array just stacks every single value for a specific row. What I want to do achieve is something like this:

enter image description here

That is, rows with multiple stacked columns. Is this even possible with Google Chart API?

M Rajoy
  • 4,028
  • 14
  • 54
  • 111
  • No, that is not supported by the Google Visualization API. – asgallant Oct 21 '13 at 13:52
  • It is doable, however. Could you please post your data so that we can use it for examples in the future? No data means we have to use dummy data. Which may not match your format, etc. – jmac Oct 22 '13 at 01:07
  • This question seems somewhat similar to: https://stackoverflow.com/questions/17925722/stacked-column-chart-for-two-data-sets-google-charts – Damien Sep 01 '16 at 04:31

1 Answers1

2

This is doable with a kludge:

Kludged Graph

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.

jmac
  • 7,078
  • 2
  • 29
  • 57
  • This is what I ended up doing. Thanks. – M Rajoy Oct 29 '13 at 09:36
  • There is no other way, your way is still (6 years later!) the only way. Even with their new Material Design template, you'll have to hack your way to doing what you just did. And if you use Material Design, you have to make a ton of other sacrifices in terms of options availability (no annotations?!). Disappointing by Google. – dearsina May 04 '19 at 05:34
  • How to add annotations in the above example? I need the same to display the values inside the stack and not only on hover. – krishna_tandon Jul 26 '20 at 13:11