Combo Chart Example

An example of a Google Combo Chart.

by Eugene Manager

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" style="width: 600px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Month', 'progress', 'crucial', 'expectation'],
         ['01',  50,  0,   100],
         ['02',  250,  0,   200],
         ['03',  330,  0,    300],
         ['04',  470,  400 ,  400],
         ['05',  500,  0,   500],
         ['06',  550,  0,   600],
         ['07',  630,  0, 700],
         ['08',  700,  800 ,  800],
         ['09',  900,  0, 900],
         ['10',  1000, 0 , 1000]
      ]);

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

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


      google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Month', 'progress', 'crucial', 'expectation'],
         ['01',  50,  0,   100],
         ['02',  250,  0,   200],
         ['03',  330,  0,    300],
         ['04',  470,  400 ,  400],
         ['05',  500,  0,   500],
         ['06',  550,  0,   600],
         ['07',  630,  0, 700],
         ['08',  700,  800 ,  800],
         ['09',  900,  0, 900],
         ['10',  1000, 0 , 1000]
      ]);

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

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