Google Chart ToolsとGoogle Docsで表とグラフを表示してみる。

　最近、Google Chat Toolを使用すると、Google Docsからデータを取得して帳票やグラフを表示することができると知りました。
　　Google Docsのデータを更新すると、表・グラフも更新されるため、ちょっとしたデータを表示するのにとても便利そうです。
　と、いうわけでサンプルを作成してみました。

---

　
1.Google DocsのSpredSheetでデータを作る。
　まずは、Google Docsでデータを作成します。
　今回は、環境省の「平成21年度一般廃棄物処理実態調査結果」から、主要都市の人口と1日1人当たりごみ排出量のデータを作成しました。
　作成したデータは右上のShareボタンを押して、「Public on the web – Anyone on the Internet can find and view」と設定しました。
　
　サンプルデータ：ごみ排出量サンプル20110619
　
　
　
2.JavaScriptコード
　Google Docsからデータを読み込み、表と棒グラフを作成しました。（サンプル実行）
　ソースコードは以下のとおりです。
　google.visualization.QueryでGoogle Docs上のデータを取得し、google.visualization.DataTableで表を、google.visualization.ColumnChartで棒グラフを生成しています。

google.load('visualization', '1', {packages:['table','corechart']});
google.setOnLoadCallback(init);

function init(){
	var query=new google.visualization.Query(
		"https://spreadsheets.google.com/spreadsheet/ccc?key=0Aq1zr4YC2cRadG14ek5FRTVieVV3c0ROazd1YmRhUGc&hl=en_US"
	);
	query.send(drawData);
}

function drawData(res){
	if(res.isError()){
		alert(res.getMessage());
		return;
	}
	var data1=res.getDataTable();
	var format1=new google.visualization.TableNumberFormat(
		{suffix:"人",fractionDigits:0});
	var format2=new google.visualization.TableNumberFormat(
		{suffix:"g/人日",fractionDigits:0});
	try{
		format1.format(data1,2);
	}catch(e){}
	try{
		format2.format(data1,3);
	}catch(e){}
	var data2=new google.visualization.DataTable();
	data2.addColumn('string','地名');
	data2.addColumn('number','1人ごみ排出量');
	data2.addRows(data1.getNumberOfRows());
	for(var i=0;i < data1.getNumberOfRows();i++){
		data2.setValue(i,0,data1.getValue(i,1));
		data2.setValue(i,1,data1.getValue(i,3));
	}
	var options1={
		width:320};
	var options2={
		width:360,height:300,legend:'top'};
	var panel1=document.getElementById('table');
	var table=new google.visualization.Table(panel1);
	table.draw(data1,options1);

	var panel2=document.getElementById('chart');
	var chart=new google.visualization.ColumnChart(panel2);
	chart.draw(data2,options2);
}

Related posts:

1. Google Elevation APIを使ってみました。#js
2. Google Maps API V3を使ったみました。#js
3. Google Directions APIを使った習作を作成してみました。#js
4. Google ChromeのExtensionをもう少し作ってみる。
5. Raphael.jsを使ったサムネイル画像の表示。#js