| |
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
Google Visualization : Table :
Google ドキュメント(スプレッドシート)を使ったテーブルの作成
</title>
<style type="text/css">
* {
font-family: "ＭＳ Ｐゴシック";
font-size: 12px;
}
/* ヘッダとデータの クラス */
.myVhtd {
color:#FFFFFF;
background: #000000;
padding: 7px!important;
border-style: solid;
border-color: #A0A0A0;
border-width: 1px;
}
.myVtd {
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 パッケージを使用
google.load('visualization', '1', { packages: ['table'] });
</script>
<!--
Google API のユーザ部分
-->
<script type="text/javascript">
// ロード時の処理
google.setOnLoadCallback(drawVisualization);
var data;
var visualization;
// *********************************************************
// WEB(Google ドキュメント) からデータを取得
// して、テーブル作成処理を呼び出す
// *********************************************************
function drawVisualization() {
// ターゲットとなる WEB 公開 URL
var target = "http://spreadsheets.google.com/pub?key=";
target += "tAW-GdinBKZXr6GT1Va3xnQ&single=true&gid=0&output=html";
// SQL でデータを取得
var query = new google.visualization.Query(target);
query.setQuery("select *");
// データを取得後に呼び出す関数を指定
query.send( createMyTable );
}
// *********************************************************
// テーブルの作成
// ( drawVisualization の読み出し終了イベントとして登録 )
// ※ 引数がイベントオブジェクト
// *********************************************************
function createMyTable(response) {
// エラー処理
if ( response.isError() ) {
alert(getDetailedMessage());
return;
}
// テーブル用データ作成
data = response.getDataTable();
// タイトル設定
data.setColumnLabel( 0, "緯度" );
data.setColumnLabel( 1, "経度" );
data.setColumnLabel( 2, "方角" );
data.setColumnLabel( 3, "仰角" );
data.setColumnLabel( 4, "場所の名前" );
// テーブルプロパティをセット
data.setTableProperties(
{
att1: "Googleパノラマデータ",
att2: "Googleドキュメント使用"
}
);
// テーブル作成
visualization =
new google.visualization.Table(
document.getElementById('table_area')
);
// CSS オプションを適用
visualization.draw(data,
{
// ヘッダとデータの TD にクラス名を指定指定
cssClassNames: {
tableCell: 'myVtd',
headerCell: 'myVhtd'
},
width: '550px'
}
);
}
// *********************************************************
// 選択された行の先頭データ
// *********************************************************
function checkSelectData() {
var selection = visualization.getSelection();
var message = '';
if ( selection.length != 0 ) {
if ( selection[0].row != null ) {
message = data.getFormattedValue(selection[0].row, 0);
message += "/" + data.getFormattedValue(selection[0].row, 1);
message += "/" + data.getFormattedValue(selection[0].row, 2);
message += "/" + data.getFormattedValue(selection[0].row, 3);
message += "/" + data.getFormattedValue(selection[0].row, 4);
alert(message);
}
}
}
</script>
</head>
<body>
<div id="table_area"></div>
<br><br>
<input
style='width:170px;'
type=button
value="選択された行の先頭データ"
onClick='
checkSelectData();
'>
<input type=button value="テーブルプロパティ" onClick='
alert(
data.getTableProperty("att1")+
" / "+
data.getTableProperty("att2")
);
'>
<input type=button value="API JSON" onClick='
alert( data.toJSON() );
'>
<input type=button value="prototype JSON" onClick='
alert( Object.toJSON(data) );
'>
<br>
( 選択された順番になるので注意 )
| |
