JS : Google Visualization : Table : Googleドキュメントを使ったテーブルの作成

  Google ドキュメントをリクエストする



外部からデータを取得する( Google が管理するデータ ) 都合で、HTML を UTF-8 にする必要があるので
IFRAME で表示しています

API の toJSON() というメソッドがつい数日前まで API リファレンスにあったのが消えていますが、
ものはあるようです。prototype.js の結果と比べましたが、同じ内容になります。

選択処理も、CTRL キーで選択を複数回に分けると、最初に選択したものが先頭に来ます。
扱いはちょっとしずらい感があれますが、思い切って改造したらなんとかなるかもしれません。

イベントは唯一使えそうなのは select というイベントですが、操作するユーザに対しての
処理としては使う場面がちょっと思いうかびません
Visualization: Table - Google Visualization API - Google Code

しかし、表示だけならばとても簡単ですし、他のチャートへの利用もあるのでオンラインでの利用は
場合によっては便利なはずです。( 凝るなら Flex だと思いますが・・・ )




  ソースコード



  
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>
Google Visualization : Table : 
Google ドキュメント(スプレッドシート)を使ったテーブルの作成
</title>
<style type="text/css">
* {
	font-family: "MS Pゴシック";
	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>
( 選択された順番になるので注意 )
  



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













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




SQLの窓  天気  IT用語辞典
Yahoo!ニュース  マルチ辞書
PHP マニュアル  Google URL短縮 


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

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ