Combo Chart Example

An example of a Google Combo Chart.

by beneverard

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([
          ['Month', 'Revenue', 'Target', 'YTD Target', 'YTD Revenue', 'YTD Rev'],
          ['Apr',   1, 450,      614.6, 700, null],
          ['Mar',  2, 288,      682, 800, null],
          ['Apr',   9, 366,      769.6, 900, null],
          ['May',  3,  366,      869.6, 1000, null],
          ['Jun',  4,  366,      969.6, 1100, 1100],
          ['Jul',  5,  366,      1269.6, null, 1200],
          ['Aug',  6,  366,      1569.6, null, 1300]
        ]);

        var options = {
          title : '2019 Financial Projection',
          vAxis: { format: 'currency'},
          /* hAxis: {title: 'Month'}, */
          seriesType: 'bars',
          curveType: 'function',
          isStacked: true,
          legend: { position: 'bottom' },

          series: {2: {type: 'line'}, 3: {type: 'line'}, 4: {type: 'line'}},
          
     
    
    };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        

 google.visualization.events.addListener(chart, 'ready', function () {
//        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart_div.innerHTML);
      });
      
      chart.draw(data, options);


      }