| |
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<title>Google Visualization : 配列データを使ったテーブルと円グラフの作成 </title>
<style type="text/css">
* {
font-family: "ＭＳ Ｐゴシック";
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>
| |