19

I'm generating some Google Charts and I'm stuck here. Google allows you to have your columns stacked. But it's either limited or I can't configure it to work. Taken from Google, here is an example showing number of cups of coffee produced in each year for two countries:

number of cups of BEAN COFFEE per year for Austria and Belgium

Say I have another data set for the same two countries, but this time I have instant coffee instead of ground. Example:

number of cups of INSTANT COFFEE per year for Austria and Belgium

What I'd like to do is to stack these two datasets on top of each other. So each column would be a single country, but two divisions: bean and instant coffee.

I was thinking if there was a way of formatting the data table in the following way:

['Year', 'Austria', 'Austria (instant)', 'Bulgaria', 'Bulgaria (instant')],
['2003', 1736060, 10051, 250361, 68564],
['2004', 1338156, 65161, 786849, 1854654],
['2005', 1276579, 65451, 120514, 654654]

to generate something like

enter image description here

Your help is appreciated.

mavili
  • 3,385
  • 4
  • 30
  • 46

4 Answers4

20

I just ran into this same issue today and followed your submission link. It seems that just recently someone replied with this:

"This is actually possible with the new Material Bar chart (albeit in a somewhat roundabout way). In the new chart, if you make a chart stacked, but place some series on a different axis, that creates a separate stack for those series. Unfortunately, there is currently no way to completely hide an axis yet, and you will have to explicitly set the view window. Eventually we will introduce options to hide axes and to align view windows, but this will have to do for now."

This fiddle seemed to help me solve this problem: http://jsfiddle.net/p7o0pjgg/

Here's the code:

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};
Dan Hogan
  • 468
  • 4
  • 16
  • I actually saw your answer just now ;) just because I had moved away from that requirement quite a while ago and didn't realise there was a new answer to it from more than a year ago! But the fiddle is proof enough that it actually is the solution. thanks – mavili Jan 08 '16 at 18:47
  • Is it still possible with latest revision of the library? Code above won't work with current version – Julien M Jun 08 '16 at 21:30
  • @Julien I believe it still works in principle. The JSFiddle example provided may have a minor bug preventing it from working. See my answer below for a working copy. – Damien Sep 01 '16 at 05:36
  • I have a feeling that does not work for Combi charts. I have taken the fiddle from Google Chart documentation and added `targetAxisIndex`: [it does not work](https://jsfiddle.net/dma_k/e4qy4o9r/). Have I missed something? – dma_k Feb 13 '17 at 22:07
  • What steps to follow to add annotations to the above chart? – krishna_tandon Jul 26 '20 at 13:19
5

You can do it using a stacked column chart, where all data series of one group (e.g. ground coffee) is on the left axis, and all data series of the other group on the right axis (instant coffee).

data and stacked column chart set-up

enter image description here

series of group 2 moved to right axis

enter image description here

Ravi B
  • 1,574
  • 2
  • 14
  • 31
Mark Schiefelbein
  • 51
  • 1
  • 2
4

The Visualization API does not support creating multiple column stacks per row of data. You can make a feature request to add support for this if you want.

asgallant
  • 26,060
  • 6
  • 72
  • 87
  • thanks mate, just submitted a feature request. It will be so cool if they actually add that. – mavili Jul 30 '13 at 07:43
  • 1
    here's the link to the request: [multiple stacked bar charts](http://code.google.com/p/google-visualization-api-issues/issues/detail?id=1270&q=multiple%20stacked%20bar%20charts&sort=owner&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars) – mavili Jul 30 '13 at 07:45
  • I have four column in the chart but I want to stacked only two columns, how to do? – Rana Aalamgeer Apr 04 '18 at 05:01
3

The answer by Dan Hogan worked for me. However, the JSFiddle example didn't seem to work (not sure, why.) Here is a version that works for me.

google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(function() {
    $('.service-usage-graph').each(function() {

        var table = new google.visualization.DataTable();
        table.addColumn('string', 'Date');
        table.addColumn('number', 'UL Peak');
        table.addColumn('number', 'UL Off-peak');
        table.addColumn('number', 'DL Peak');
        table.addColumn('number', 'DL Off-peak');

        table.addRow(['2001-01-01', 1, 2, 3, 4]);
        table.addRow(['2001-01-03', 3, 2, 4, 2]);
        table.addRow(['2001-01-04', 2, 2, 4, 2]);
        table.addRow(['2001-01-05', 0, 1, 4, 5]);
        table.addRow(['2001-01-06', 9, 2, 6, 8]);
        table.addRow(['2001-01-07', 2, 2, 7, 3]);
        var chart = new google.charts.Bar(this);
        var options = google.charts.Bar.convertOptions({
            isStacked: true,
            series: {
                2: { targetAxisIndex: 1 },
                3: { targetAxisIndex: 1 }
            },
            vAxis: {
              viewWindow: {
                max: 15,
              }   
            }   
        });
        chart.draw(table, options);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="service-usage-graph"></div>
Damien
  • 1,140
  • 15
  • 22