Combo Chart Example

An example of a Google Combo Chart.

by Jason Rose

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></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([
          ['Day', 'Usage', 'Limit'],
          ['01', 2, 2],
          ['02', 2, 2],
          ['03', 1, 2],
          ['04', 10, 20],
          ['05', 20, 20],
          ['06', 20, 20],
          ['07', 18, 20],
          ['08', 19, 20],
          ['09', 20, 30],
          ['10', 20, 30],
          ['01', 2, 2],
          ['02', 2, 2],
          ['03', 1, 2],
          ['04', 10, 20],
          ['05', 20, 20],
          ['06', 20, 20],
          ['07', 18, 20],
          ['08', 19, 20],
          ['09', 20, 30],
          ['10', 20, 30],
          ['01', 2, 2],
          ['02', 2, 2],
          ['03', 1, 2],
          ['04', 10, 20],
          ['05', 20, 20],
          ['06', 20, 20],
          ['07', 18, 20],
          ['08', 19, 20],
          ['09', 20, 30],
          ['10', 20, 30],

        ]);

        var options = {
          colors: ['#4285F4', '#999'],
          //title : '',
          //vAxis: {title: ''},
          height: 400,
          width: 'auto',
          hAxis: {
            title: 'Day of the month'
          },
          seriesType: 'bars',
          series: {
            1: {
              type: 'line'
            }
          }
        };

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