Google ドキュメントを使用して、円グラフ(visualization / piechart )を作成する

新規スプレッドシートを作成するか、新しいシートを作成してデータを準備

シート追加 ( ページ右下 )

Ggdoc1

一般公開して、URL を取得します

WEB ページとしての公開ページ

Ggdoc2

データをセットしておきます

Ggdoc5

円グラフの表示

Google のドキュメント

Google Visualization API Reference

<!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>

この円グラフのデータを直接書いたサンプル

JavaScript : 誰でもすぐ使える Google 円グラフ

もうひとつの DataTable を作ってデータ転送する例

// *********************************************************
// 円グラフ作成
// *********************************************************
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: '円グラフのタイトル'});
}