Stacked Google visualization chart

Question

Is it possible to make the bars in THIS graph stacked like in THIS chart?

Please let me know if this is possible and how to do this. I've got to stick with Google Visualization Charts.

You can also throw the following codes in HERE:

Stacked graph:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Expenses');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['2004', 1000, '1M$ sales in 2004', 400,  '$0.4M expenses in 2004'],
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
    ['2006', 660,  '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
  draw(data,
       {title:"Yearly Coffee Consumption by Country",
        isStacked: true,
        width:600, height:400,
        vAxis: {title: "Year"},
        hAxis: {title: "Sales"}}
      );
}

Other graph:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"}}
      );
}

I found out that this isn't supported by google visualization API at the moment. There is a workaround which can be found here but it is to much work and not usefull for me. And it is by the way a some kind of hack. Thanks. — MmynameStackflow

John Kiernander John Kiernander · Accepted Answer · 2013-07-12T13:13:32

If Google visualisation is a requirement for your project I'm not sure how to do this, but dimple makes this kind of thing very easy, see the examples here.

Stacked Google visualization chart

2 Answers