JS : Google Visualization : 円グラフ(Pie Chart) : 配列データを使ったテーブルと円グラフの作成

  DataTable より、グラフを作成



円グラフは最も使いやすく、最も見栄えのするグラフです。
データは DataTable に作成して、Table として表現するか、PieChart として表現するかの差があるだけで、
元のデータは、Table で使用したようにいろいろな入力が可能です。

関連する記事
JS : Google Visualization : Table : 最も基本的なテーブルの作成
JS : Google Visualization : Table : 固定データ(オブジェクト、JSON)を使ったテーブルの作成
JS : Google Visualization : Table : Googleドキュメントを使ったテーブルの作成


1) オブジェクトの埋め込み
  サーバー側の PHP 等で埋め込めば動的になります
2) JSON
  1) と同じでもいいですし、http 通信でサーバーから PHP を介して読み出しても良いです。
3) グラフは特にデータだけの場合が多いので配列を使う手段もあります
  他のコントロールにあるデータから転送するというような場合等、ループ処理で容易に使用できます

Google ドキュメントを使用しないこのようなパターンで十分動的なコンテンツが作成できるので、
Shift_JIS(EUC_JP) でも気軽に使えます


凡例表示切替



  ソースコード



  
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>Google Visualization : 配列データを使ったテーブルと円グラフの作成 </title>
<style type="text/css">
* {
	font-family: "MS Pゴシック";
	font-size: 12px;
}

/* ヘッダとデータの クラス */
.myVtd,.myVhtd {
	padding: 7px!important;
	border-style: solid;
	border-color: #A0A0A0;
	border-width: 1px;
}

</style>

<!--
  Google API の基本部分
  まずこれがロードされないと、google. のメソッドが動作できない
-->
<script	type="text/javascript"
	src="http://www.google.com/jsapi"
	charset="utf-8"
></script>


<!--
  Google API のパーツ部分
  一つのScriptセクションで実行する事
  でないと同一セクションではロードされる前の記述となります
-->
<script type="text/javascript">
// prototype.js を適用
google.load("prototype", "1.6.1.0");
// バージョン1の、table と piechart パッケージを使用
google.load('visualization', '1', { packages: ['table','piechart'] });
</script>


<!--
  Google API のユーザ部分
-->
<script type="text/javascript">
google.setOnLoadCallback(createMyTable);

var data;
var visualization;
var chart,options;

// *********************************************************
// テーブルの作成
// ( setOnLoadCallback で、onload イベントに追加されます )
// *********************************************************
function createMyTable() {

	// テーブル用データ作成
	data = new google.visualization.DataTable();

	data.addColumn('string', '日'); 
	data.addColumn('number', 'ユニークアクセス'); 

	arData = [
		6043,
		6262,
		3340,
		3156,
		6321,
		6617,
		6383
	];

	for( i = 0; i < arData.length; i++ ) {
		data.addRow(); 
		data.setValue(i, 0, (i+1)+'日'); 
		data.setValue(i, 1, arData[i]); 
	}
 

	// CSS ありテーブル作成
	visualization = 
		new google.visualization.Table(
			$('table_area')	// prototype で参照
		);

	// CSS ありテーブルにデータとオプションを適用
	visualization.draw(data,
		{
			// ヘッダとデータの TD にクラス名を指定指定
			cssClassNames: {
				tableCell: 'myVtd',
				headerCell: 'myVhtd'
			}
		}
	);

	chart = 
		new google.visualization.PieChart(
			$('pie_chart_area')	// prototype で参照
		);

	options = {
		width: 400,
		height: 400,
		is3D: true,
		title: '10月最初の1週間のアクセス履歴',
		legend: 'right'
	}

	chart.draw(data, options);

}
</script> 
</head>

<body>

<table>
<tr>
<td>
<div id="table_area"></div>
</td>
<td>
<div id="pie_chart_area"></div>
</td>
</tr>
</table>
凡例表示切替<br>
<input type="button" value="右" onClick='options.legend="right";chart.draw(data, options)'>
<input type="button" value="左" onClick='options.legend="left";chart.draw(data, options)'>
<input type="button" value="上" onClick='options.legend="top";chart.draw(data, options)'>
<input type="button" value="下" onClick='options.legend="bottom";chart.draw(data, options)'>
<input type="button" value="ラベル" onClick='options.legend="label";chart.draw(data, options)'>
<input type="button" value="無し" onClick='options.legend="none";chart.draw(data, options)'>

</body>
</html>
  


Google の API ドキュメント
Google Visualization API Reference











  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ