When you have a lot of data to be shown on a page, it makes sense to give the viewer an opportunity to filter some of the data so that he or she gets a cleaner view. In this case, we will first draw a rather clumsy Column Chart and then in the next section. The data for the chart is drawn from this spreadsheet. The chart shown below can also be seen in this regular HTML page.
Basic Column Chart Showing All Data
Note how we have specified
- the Google Docs spreadsheet : https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc
- the sheet : sheet=MilkProduction
- range : range=B2:H37
- headers : headers=1
- columns : query.setQuery('select B,E,F');
- chart type : var chartMQ = new google.visualization.ColumnChart(document.getElementById('chart_divMQ'));
<head>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['corechart','controls']});
google.setOnLoadCallback(drawColChartMQ);
function drawColChartMQ() {
var query = new google.visualization.Query(
'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc&sheet=MilkProduction&range=B2:H37&headers=1');
query.setQuery('select B,E,F');
query.send(handleQueryResponseMQ);
};
function handleQueryResponseMQ(responseMQ) {
if (responseMQ.isError()) {
alert('Error in query: ' + responseMQ.getMessage() + ' ' + responseMQ.getDetailedMessage());
return;
}
var options = {
title: 'Milk Production',
hAxis: {title: 'State', titleTextStyle: {color: 'red'}}
};
var data = responseMQ.getDataTable();
var chartMQ = new google.visualization.ColumnChart(document.getElementById('chart_divMQ'));
chartMQ.draw(data, options );
}
</script>
</head>
<body>
<h3>
Basic Column Chart Showing All Data</h3>
<div id="chart_divMQ" style="height: 500px; width: 900px;">
</div>
<a href="https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc&usp=drive_web#gid=1" target="_blank">Data Source</a>
</body>
<br />
In the next post we will convert this into a Dashboard
No comments:
Post a Comment