| |
<!--
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 パッケージを使用
google.load('visualization', '1', { packages: ['table'] });
</script>
<!--
Google API のユーザ部分
-->
<script type="text/javascript">
google.setOnLoadCallback(createMyTable);
var data;
var visualization;
// *********************************************************
// テーブルの作成
// ( setOnLoadCallback で、onload イベントに追加されます )
// *********************************************************
function createMyTable() {
// テーブル用データ作成
data = new google.visualization.DataTable();
// カラム作成
// 第1引数はデータ型
// 'string' 'number' 'boolean' 'date' 'datetime' 'timeofday'
// string を使うのが無難
// 第2引数は表示タイトル( 省略可 )
// 第3引数は ID ( 省略可/使用しなくても使えます )
data.addColumn('string');
data.addColumn('string', '内容');
var key;
var row = 0;
for (key in window.navigator) {
// 一行追加
data.addRow();
// 1カラム目に プロパティ名を追加
// ( 最後の +"" で文字列に変換 )
data.setCell(row, 0, key+"" );
// 2カラム目に プロパティの値を追加
// ( 最後の +"" で文字列に変換 )
data.setCell(row, 1, window.navigator[key]+"" );
row++;
}
// テーブル作成
visualization =
new google.visualization.Table(
document.getElementById('table_area')
);
// テーブルにデータを適用
visualization.draw(data);
}
</script>
</head>
<body>
<div id="table_area" style='width:650px;'></div>
| |