CODEWITHSUNDEEP
javascriptgoogle-visualization
user2412672
user2412672

Reputation: 1479

Google chart 2 stacked columns and line chart

The thing is that I want 2 stacked columns for columns 0-3 and 4-7, and then one line chart for column 8. So far I can't get a result I'm expecting. I'm getting one stacked column only.

This is what I have so far:

JSFiddle

      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawVisualization);


      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
          ['1', 165, 938, 522, 998, 165, 938, 522, 998, 614.6],
          ['2', 135, 1120, 599, 1268, 165, 938, 522, 998, 682],
          ['3', 157, 1167, 587, 807, 165, 938, 522, 998, 623],
          ['4', 139, 1110, 615, 968, 165, 938, 522, 998, 609.4],
          ['5', 136, 691, 629, 1026, 165, 938, 522, 998, 569.6]
        ]);

        var options = {
          title: 'Chart',
          vAxes: [{
            title: 'foo'
          }, {
            title: 'bar'
          }],
          seriesType: 'bars',
          isStacked: true,
          legend: 'none',
          series: {
            0: {
              targetAxisIndex: 0
            },
            4: {
              targetAxisIndex: 0
            },
            8: {
              targetAxisIndex: 1,
              type: 'line'
            }
          }
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

EDIT: got a desired result from google forum:

https://jsfiddle.net/dlaliberte/5yv936sr/3/

Upvotes: 1

Views: 604

Answers (1)

WhiteHat
WhiteHat

Reputation: 61212

need to adjust data to get two stacks

looking for something like this?

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', ''],
      ['1', 165, 938, 522, 998, null, null, null, null, 614.6],
      ['2', 135, 1120, 599, 1268, null, null, null, null, 682],
      ['3', 157, 1167, 587, 807, null, null, null, null, 623],
      ['4', 139, 1110, 615, 968, null, null, null, null, 609.4],
      ['5', 136, 691, 629, 1026, null, null, null, null, 569.6],
      ['1', null, null, null, null, 165, 938, 522, 998, null],
      ['2', null, null, null, null, 165, 938, 522, 998, null],
      ['3', null, null, null, null, 165, 938, 522, 998, null],
      ['4', null, null, null, null, 165, 938, 522, 998, null],
      ['5', null, null, null, null, 165, 938, 522, 998, null]
    ]);

    var options = {
      title: 'Chart',
      vAxes: [{
        title: 'foo'
      }, {
        title: 'bar'
      }],
      seriesType: 'bars',
      isStacked: true,
      legend: 'none',
      series: {
        0: {
          targetAxisIndex: 0
        },
        4: {
          targetAxisIndex: 0
        },
        8: {
          targetAxisIndex: 1,
          type: 'line'
        }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions