Combo Chart Example

An example of a Google Combo Chart.

by Alan Tsai

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([
        ['AuditPeriod', 'Audit Count', 'Fail Percentage'],
        ['02-11-2012',  0,      0],
        ['02-18-2012',  0,      0],
        ['02-25-2012',  0,      0],
        ['07-21-2012',  1476,   .233062],
        ['07-28-2012',  1651,   .253180],
        ['08-04-2012',  2217,   .210645]
    ]);

    var options = {
        hAxis: { title: "Week", format: 'm/d/y'},
        series: {
            0:{ type: "bars", targetAxisIndex: 0 },
            1: { type: "line", targetAxisIndex: 1}
        }
    }

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