No more boring spreadsheets on presentations
Displaying data stored in your spreadsheets is really easy now with the google's services help.
You can create a spreadsheets using google drive or Microsoft Excel (store it as google spreadsheet) and query data asynchronously using Google Charts. This way you can easily display your data visually on your page.
Go to demo page.
1. Load Google charts script to the your webpage.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
2. Use google chart's methonds to get your data from your spreadsheet. Mine is here:
"https://docs.google.com/spreadsheet/ccc?key=0Agn6nIM9eOUbdGFxZFhJNExLYkJ5SngyeWFkcnRxUFE&usp=sharing".
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0Agn6nIM9eOUbdGFxZFhJNExLYkJ5SngyeWFkcnRxUFE&usp=sharing');
query.send(handleQueryResponse);
}
3. Draw your data onto canvas element:
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, { legend: { position: 'none' } });
}
Full code:
<html>
<head>
<title>google data display</title>
<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/spreadsheet/ccc? key=0Agn6nIM9eOUbdGFxZFhJNExLYkJ5SngyeWFkcnRxUFE&usp=sharing');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, { legend: { position: 'none' } });
}
</script>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>
For more blog posts go to http://ds-web-dev.com/blog.
Reference
No comments:
Post a Comment