How to make a grouped bar stack with Google charts?

1
votes

I'm using Google Charts API 1.1 but i simply can't make grouped stacks. I've used the "targetAxisIndex" separating them into two axis and it kinda works but if i don't set max value for each yAxis they are scaled differently and it's useless once both of the grouped stacks actually refers to the same thing.

I'd like to know i can make something similar to this: http://www.highcharts.com/demo/column-stacked-and-grouped

1
google-visualization

1 Answers

3
votes

If you use:

 var options = {
    isStacked: true,
    vAxis: {
      viewWindow: {
        max: 1100,
        min: 0
      }
    },
    vAxes: {
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
    },
    series: {
      2: {
        targetAxisIndex: 1
      },
      3: {
        targetAxisIndex: 1
      },
    },
  };

That should force them to scale the same, and keep the same axis on both sides but hide the rightmost.

enter image description here

Where

var data = new google.visualization.arrayToDataTable([
    ['Year', 'A', 'B', 'C', 'D'],
    ['2001', 70, 600, 816, 319],
    ['2002', 163, 231, 539, 594],
    ['2003', 125, 819, 70, 578],
    ['2004', 397, 536, 313, 298]
]);

...

var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));

JSFiddle