Google Visualization API Primer

Published: 03/30/2009

Programming, Code

The Google Visualization API is a JavaScript API for creating those fancy graphs and charts Google displays in all their cool toys like Google Analytics. There’s just an obnoxious amount of chart types available in the Visualization API Gallery that include code samples along with every example. There’s also the incredible Google Ajax API Playground which lets you play with the API and see real-time output.

Google Visualization

According the official website:

The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications. The Google Visualization API also provides a platform that can be used to create, share and reuse visualizations written by the developer community at large.

I have no real interest in publishing public widgets and I’ve only used the API by generating the data declarations; so far anyway. That’s actually what’s so compelling about the API; since it’s JavaScript based the API can be used with any server side language.

I’m mostly interested in using the charts and graphs for displaying data from a database on a website so that’s all this article is going to focus on.

One more thing to keep in mind; the API is just JavaScript. There’s nothing too fancy or random being done so even though the below may look complicated don’t forget; IT’S JUST JAVASCRIPT.

Examples

Line Chart

Line Chart

<script type="text/javascript">
	google.load("visualization", "1", {packages:});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Date');
		data.addColumn('number', 'Clicks');
		data.addRows(15);
		data.setCell(0, 0, 'March 14, 2009');
		data.setCell(1, 0, 'March 15, 2009');
		data.setCell(2, 0, 'March 16, 2009');
		data.setCell(3, 0, 'March 17, 2009');
		data.setCell(4, 0, 'March 18, 2009');
		data.setCell(5, 0, 'March 19, 2009');
		data.setCell(6, 0, 'March 20, 2009');
		data.setCell(7, 0, 'March 21, 2009');
		data.setCell(8, 0, 'March 22, 2009');
		data.setCell(9, 0, 'March 23, 2009');
		data.setCell(10, 0, 'March 24, 2009');
		data.setCell(11, 0, 'March 25, 2009');
		data.setCell(12, 0, 'March 26, 2009');
		data.setCell(13, 0, 'March 27, 2009');
		data.setCell(14, 0, 'March 28, 2009');	  
                data.setCell(0, 1, 5);
		data.setCell(1, 1, 13);
		data.setCell(2, 1, 27);
		data.setCell(3, 1, 15);
		data.setCell(4, 1, 12);
		data.setCell(5, 1, 15);
		data.setCell(6, 1, 8);
		data.setCell(7, 1, 9);
		data.setCell(8, 1, 15);
		data.setCell(9, 1, 12);
		data.setCell(10, 1, 8);
		data.setCell(11, 1, 21);
		data.setCell(12, 1, 10);
		data.setCell(13, 1, 7);
		data.setCell(14, 1, 3);
 
		var chart = new google.visualization.LineChart(document.getElementById('click_chart_div'));
		chart.draw(data, {width: 500, height: 240, legend: 'bottom', title: 'Click Tracks by Date'});
	}
</script>
<div id='click_chart_div' style='width: 650px; height: 240px;'></div>

Pie Chart

Pie Chart

<script type="text/javascript">
google.load("visualization", "1", {packages:});
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Day');
	data.addColumn('number', 'Clicks');
	data.addRows(7);
	data.setValue(0, 0, 'Monday');
	data.setValue(0, 1, 56);
	data.setValue(1, 0, 'Tuesday');
	data.setValue(1, 1, 93);
	data.setValue(2, 0, 'Wednesday');
	data.setValue(2, 1, 21);
	data.setValue(3, 0, 'Thursday');
	data.setValue(3, 1, 28);
	data.setValue(4, 0, 'Friday');
	data.setValue(4, 1, 14);
	data.setValue(5, 0, 'Saturday');
	data.setValue(5, 1, 17);
	data.setValue(6, 0, 'Sunday');
	data.setValue(6, 1, 24);
 
	var chart = new google.visualization.PieChart(document.getElementById('day_chart_div'));
	chart.draw(data, {width: 500, height: 400, is3D: true, title: 'Clicks By Day', backgroundColor: '#f9f9f9', legend: 'top', legendBackgroundColor: '#f1f1f1'});
}
</script>