Combo Chart Example

An example of a Google Combo Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <div id="combochart2.1" style="width: 900px; height: 500px;"></div>

JavaScript

google.load("visualization", "1", {packages:["corechart"]});
      
      google.setOnLoadCallback(drawChart1);
      
      function drawChart1() {
        var data = new google.visualization.DataTable();
        var cols = 5 ; 
        var rows = 4;
        var cell_values = new Array();
        var col_header=new Array();
        var text=new Array();
        data.addColumn('string', 'Questions');
    
 col_header= "apples, orange, pineapple, rocket, spaceship".split(",");
 cell_values= "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20".split(",");
 text= "Q1,Q2,Q3,Q4".split(",");

  for (var k=0;k<cols;k++)
  {
   data.addColumn('number',col_header[k]);
  }
  
 // Add empty rows
  data.addRows(rows);

  var index=0;
  //setting cell values
    for(var i=0;i<rows;i++)
      {
        //setting first column values
        data.setCell(i,0,text[i]);
        for(var q=1;q<(cols+1);q++){
          
          data.setCell(i,q,parseInt(cell_values[index]));
          index++;     
          
        }              
      }
   var options = {
     title: 'Fruits',
     vAxis: 'No of consumers',
     hAxis: {title: 'Set No.',titleTextStyle: {bold: true,color: '#000' }},
     height: 260,width: 500,
     seriesType: "bars"    
};
   
  var chart = new google.visualization.ComboChart(document.getElementById('combochart2.1'));   
    chart.draw(data, options);   
     }