I have data lying in this Google Docs spreadsheet. that I want to display in this blog post or in any other html page using Google Charts.
The first task is to publish this data on the web and make it visible to anyone who has the URL.
Next take the following piece of code and insert it into your website.
Note the URL of the spreadsheet : https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodGJBQkRpX0Rrdjc2OXZMZmZmNzk3WGc&usp=drive_web#gid=0 and use this in the function drawChart()
and this what you get :
....................................
The first task is to publish this data on the web and make it visible to anyone who has the URL.
Next take the following piece of code and insert it into your website.
<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(document.getElementById('columnchart'));
chart.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
Note the URL of the spreadsheet : https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AqawrNPy9RHodGJBQkRpX0Rrdjc2OXZMZmZmNzk3WGc&usp=drive_web#gid=0 and use this in the function drawChart()
and this what you get :
....................................
....................
the same code can be embedded in a no-blog HTML page and loaded into a webserver as seen here.
No comments:
Post a Comment