Google chart create stacked bar besides 2 "normal" bars

Question

I'm facing a problem with creating a Google Chart. I want to have 2 normal bars and a stacked bar based on 2 variables besides it in one chart. Below my code so far:

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([

      ['H axis',        'Name 1',                   'Name 2',                       'Name 3',           'Name 4'],

      ['Label',         <?php echo $var1; ?>,       <?php echo $var2; ?>,       <?php echo $var3; ?>,       <?php echo $var4; ?>]

    ]);

    var options = {

      chartArea:{left:100,top:50,width:"70%",height:"70%"},
      title: 'Title',
      isStacked: false,
      series: { 0: {type: "bars", isStacked: false},
                1: {type: "bars", isStacked: false},
                2: {type: "steppedArea", isStacked: true},
                3: {type: "steppedArea", isStacked: true}},
      hAxis: {title: 'Title', titleTextStyle: {color: 'red'}},
      vAxis: {title: 'Title', titleTextStyle: {color: 'red'}}

    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart1'));

    chart.draw(data, options);

  }

I tried to create a combo chart with help of the Google pages. Searching on Google gave me no relevant results so I was wondering if the expert here could help me.

This is my first post so I hope I am doing this correctly.

Thanks in advance!

Answer 1

You should be able to "fake it" by using stacked bars, but only providing multiple values for one bar. So your data variable would look something like this:

var data = google.visualization.arrayToDataTable([
    ['Label', 'Value 1', 'Value 2', 'Value 3'],
    ['Value 1', 25, 0, 0],
    ['Value 2', 0, 15, 10]
]);

Depending on how you want your graph to display you'll have to modify a few other display options, but the above should make the first bar be a single bar with the value of 25 and the second bar will be a stacked bar with two values.

You will, of course, have to set isStacked: true as well.