Posts
3 Specifying Range of Data and Selecting Columns : Google Charts with Google Docs data
<head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", '1', {packages:['corechart']}); google.setOnLoadCallback(drawChart01); function drawChart01() { var query = new google.visualization.Query( 'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodDNvMXdPX1NqanlyLVdtbEE1dlJ3LUE&sheet=Demo3&range=C3:I12&headers=1'); query.setQuery('select C,D,1000*G,H'); query.send(handleQueryResponse01); } function handleQueryResponse01(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var options = { title: 'Industrial Production Index', vAxis: {title: 'Sector', titleTextStyle: {color: 'red'}}...
2 Creating a Google Chart using data pulled from Google Docs
<head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", '1', {packages:['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var query = new google.visualization.Query( 'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodGJBQkRpX0Rrdjc2OXZMZmZmNzk3WGc&usp=drive_web#gid=0'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var options = {'title':'How Much PIZZA I Ate Last Night', 'width':400, 'height':600}; var chart = new google.visualization.PieChart...
Basic Google Chart
Code for generating the graph: <!--Load the AJAX API--> <script src="https://www.google.com/jsapi" type="text/javascript"></script> <script type="text/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(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], [...