Combo Chart Example

An example of a Google Combo Chart.

by Abhishek Garg

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: 900px; height: 500px;"></div>
        <div id="DerivedChart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Avengers2');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'Captain America : The Winter Soldier');
    data.addColumn('number', 'Average');
    data.addColumn({type:'string', role:'tooltip'});
    
 data.addRows([
        
        [2,  80, 15, 10,32.4,"TooltipText"],
        
     
        [6,    80, 35, 30, 7.7,"TooltipText"],
        [7,    80, 40,  35,9.6,"TooltipText"],
        
        [10,  80, 55, 50,11.6,"TooltipText"],
        [11,   80,  60,  55,4.7,"TooltipText"],
        [12,   80,  65,  60,5.2,"TooltipText"],
      
        [14,   80,  75,  70,3.4,"TooltipText"]
      ]);

  var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: "Collections"},
    hAxis: {title: "Day of the week"},
    
    series: {
        0:{type: "area", areaOpacity: 1.0, color: '#f00', tooltip : false, pointSize : 1, pointsVisible: false},
        1:{type: "area", areaOpacity: 1.0, color: '#ff0', tooltip : false, pointSize : 1, pointsVisible: false},
        2:{type: "area", areaOpacity: 1.0, color: '#0f0', tooltip : false, pointSize : 1, pointsVisible: false},
        3: {type: "line", color: '#000',pointSize : 5}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
    
    google.visualization.events.addListener(chart,'select',selectHandler);
    
    function selectHandler(e)
    {
        var selectedItem = chart.getSelection()[0];
        var i = data.getValue(selectedItem.row,0);
        var derivedData = getProjectDataFromID(i);
        var derivedChart = new google.visualization.ComboChart(document.getElementById('DerivedChart_div'));
        
       ...