Google Combo Chart

Example of Combo Chart...

by gdicerbo

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>



      <div style="text-align:center;">
        <button style="margin:auto;display:inline-block" onclick='drawVisualizationone();'>Monthly + Total</button>
        <button style="margin:auto;display:inline-block" onclick='drawVisualization();'>Monthy</button>
        <div id="visualization" style="width: 400px; height: 300px"></div>

        <div id="chart_div" style="width: 200px; height: 500px;"></div>
        <div id="chart_div2" style="width: 200px; height: 500px;"></div>
      </div>


    </body>

JavaScript

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);

  // Some raw data (not necessarily accurate)
function drawVisualization() {
  var query = new google.visualization.Query(
  'https://docs.google.com/spreadsheets/d/1sVdC24p4B7jxx19lhP0B-k-LvRClBYs1ygIFF3qGd_I/gviz/tq?gid=2');
  query.send(handleQueryResponse);
}

   
  // Create and populate the data table.
 function handleQueryResponse(response) {
var data = response.getDataTable();

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    width: 800,
    height: 400,
    colors: ['#8dc641', '#6a747b', '#6bbed1'],
    vAxis: {title: "Expenses/Repayment ($)", format:'short'},
    hAxis: {type: 'category', direction:1,
        slantedText:true,
        slantedTextAngle:90}, 
    seriesType: "bars",
      isStacked: true,
    series: {2: {type: "line"}},
  });
}

//next

function drawVisualizationone() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1sVdC24p4B7jxx19lhP0B-k-LvRClBYs1ygIFF3qGd_I/edit#gid=0');
  query.send(handleQueryResponse);
}
   
  // Create and populate the data table.
 function handleQueryResponse(response) {
var data = response.getDataTable();

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    width: 800,
    height: 400,
    colors: ['#8dc641', '#6a747b', '#6bbed1'],
    vAxis: {title: "Expenses/Repayment ($)", format:'short'},
    hAxis: {type: 'category', direction:1,
        slantedText:true,
        slantedTextAngle:90}, 
    seriesType: "bars",
      isStacked: true,
    series: {2: {type: "line"}},
  });
}