ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: Google Visualization API の テーブルのデータを Google ドキュメントより取得
名前: lightbox
処理選択
パスワード

件名 Google Visualization API の テーブルのデータを Google ドキュメントより取得
名前 lightbox
コメント
@DIV
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API テーブル操作サンプル</title>
<body style='background-color:#E0E0E0'>
この表示エリアは UTF-8 です<br>

<style type="text/css">
.google-visualization-table-table td {
	padding:7px!important;
	border-style: solid;
	border-color: #A0A0A0;
	border-width: 1px;
}
</style>
<script
	type="text/javascript"
	src="http://www.google.com/jsapi"
	charset="utf-8"
></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.3" );
google.load('visualization', '1', { packages: ['table'] });
</script>

<script type="text/javascript">

function drawVisualization() {

	var query = new google.visualization.Query(
	   "http://spreadsheets.google.com/pub?key=p6PfePgDMJFDiPOs-zVmaGw");

	query.setQuery("select *");
	query.send( responseGet );

}
function responseGet(response) {

	if ( response.isError() ) {
		alert(getDetailedMessage());
		return;
	}

	var data = response.getDataTable();

	data.setColumnLabel( 0, "タイトル" );
	data.setColumnLabel( 1, "作者" );

	// テーブル作成
	visualization = 
		new google.visualization.Table(
			document.getElementById('table_area')
		);
	visualization.draw(data,
		{
		// オプションの指定
			allowHtml: true,
			showRowNumber: true
		}
	);
}


google.setOnLoadCallback(drawVisualization);
</script>

タイトルをクリックするとソートされます
<div id="table_area"></div>

</body>
</html>
@END