Google Combo Chart

Example of Combo Chart...

by gdicerbo

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="visualization" style="width: 400px; height: 300px"></div>

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/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', '#f6f100'],
    vAxis: {title: "Expenses/Repayment ($)", format:'short'},
    hAxis: {type: 'category', direction:1,
        slantedText:true,
        slantedTextAngle:90}, 
    seriesType: "bars",
      isStacked: true,
    series: {2: {type: "line"}},
  });
}