Lightbox Info Board : SQLの窓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>google 円グラフ</title>
</head>
<body>

<div id="chart_div" style="width: 400px; height: 240px;"></div>

<script charset="utf-8" type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});

google.setOnLoadCallback(getGoogleDoc);

var data;

// *********************************************************
// WEB(Google ドキュメント) からデータを取得
// *********************************************************
function getGoogleDoc() {

	// ターゲットとなる WEB 公開 URL
	var target = "http://spreadsheets.google.com/pub?key=";
	target += "0AtJymqpro6gScDZQZmVQZ0RNSkZCb0lqREg1bGNQQ3c&hl=ja&single=true&gid=3&output=html";

	// SQL でデータを取得
	var query = new google.visualization.Query(target);
	query.setQuery("select *");
	// データを取得後に呼び出す関数を指定
	query.send( drawChart );

}

// *********************************************************
// 円グラフ作成
// *********************************************************
function drawChart(response) {

	// エラー処理
	if ( response.isError() ) {
		alert(getDetailedMessage());
		return;
	}

	// テーブル用データ作成
	data = response.getDataTable();

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'});
}
</script>

</body>
</html>

// ********************************************************* // 円グラフ作成 // ********************************************************* function drawChart(response) { // エラー処理 if ( response.isError() ) { alert(getDetailedMessage()); return; } // テーブル用データ作成 data = response.getDataTable(); var dataPie = new google.visualization.DataTable(); dataPie.addColumn('string', '対象'); dataPie.addColumn('number', '件数'); dataPie.addRows(7); for( i = 0; i < 7; i++ ) { dataPie.setValue( i, 0, data.getValue( i, 0 )); dataPie.setValue( i, 1, data.getValue( i, 1 )); } var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(dataPie, {width: 600, height: 320, is3D: true, title: '円グラフのタイトル'}); }