Combo Chart Example

An example of a Google Combo Chart.

by rdenver6

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

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

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Status', 'Realized', 'Active', 'Conceptual', { role: 'annotation' }, 'Goal' ],
        ['Q1 2018', 1426990, 53554, 0, '', 550000],
        ['Q2 2018', 2973446, 165652, 0, '', 1650000],
        ['Q3 2018', 0, 0, 0, '', 2337500],
        ['Q4 2018', 0, 0, 0, '', 2750000]
      ]);
      
       var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2,
                       { calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation" },3]);

    var options = {
      title : 'Monthly Coffee Production by Country',
      vAxis: {title: 'Cups'},
      hAxis: {title: 'Month'},
      seriesType: 'bars',
      isStacked: true,
      series: {3: {type: 'line'}}
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(view, options);
  }