Clustered, stacked bar chart

[alex]

Hi,

Is it possible to make clustered, stacked chart with charts - google
visualization api?

See example: http://highcharts.com/demo/column-stacked-and-grouped

[asgallant]

AKAIK, that is not supported.  You can hack around it by using stacked bars and inserting null rows and cells.  Copy-paste this into the viz playground to see it in action:

function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fruit');
    data.addColumn('number', 'Joe');
    data.addColumn('number', 'John');
    data.addColumn('number', 'Jane');
    data.addColumn('number', 'Janet');
    data.addRow(["Apples", 3, 5, null, null]);
    data.addRow(["Apples", null, null, 3, 2]);
    data.addRow([null, null, null, null, null]);
    data.addRow(["Oranges", 4, 3, null, null]);
    data.addRow(["Oranges", null, null, 0, 5]);
    data.addRow([null, null, null, null, null]);
    data.addRow(["Pears", 4, 4, null, null]);
    data.addRow(["Pears", null, null, 4, 6]);
    data.addRow([null, null, null, null, null]);
    data.addRow(["Grapes", 2, 7, null, null]);
    data.addRow(["Grapes", null, null, 4, 2]);
    data.addRow([null, null, null, null, null]);
    data.addRow(["Bananas", 5, 2, null, null]);
    data.addRow(["Bananas", null, null, 3, 1]);

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data, {
        title:"Total fruit consumption, grouped by gender", 
        width:600, height:400,
        hAxis: {
            showTextEvery: 3
        },
        isStacked: true,
        vAxis: {
            title: "Number of Fruits"
        }
    });
}

Some tweaking will likely be required to make it work exactly how you want it.

[N Lurie]

Hi asgallant. This is very old, but thanks for the answer. I am close to what I need, but I am wondering why this will not work when I try to add a third stack to each column! I expanded everything proportionally. Thanks!