SQLの窓

2013年11月29日


jQuery + Google Visualization : 円グラフのプラグイン化

jQuery で Google Visualization DataTable Class をプラグイン化 の進化版です。前回は、文字列のみを想定していましたが、今回はグラフなので数値列を作成して円グラフ用のクラスで draw しています。

実行ページ
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table','piechart'] });

$.fn.extend({
	gvt: function() {
		$(this).data("DataTable", new google.visualization.DataTable());
		return this;
	},
	gvt_addColumn: function(title){
		$(this).data("DataTable").addColumn('string', title);
		return this;
	},
	gvt_addNumColumn: function(title){
		$(this).data("DataTable").addColumn('number', title);
		return this;
	},
	gvt_addRow: function(){
		$(this).data("CurRow", $(this).data("DataTable").addRow() );
		return this;
	},
	gvt_setCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
		return this;
	},
	gvt_setNumCell: function(col, data){
		$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
		return this;
	},
	gvt_setRowCell: function(row, col, data){
		$(this).data("DataTable").setCell(row, col, data+"" );
		return this;
	},
	gvt_draw: function(width){
		var visualization = new google.visualization.Table($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			cssClassNames: {
				tableCell: 'myCell',
				headerCell: 'myHeader'
			},
			width: width+"px"
		});
		return this;
	},
	gvt_pie: function(width,height,title){
		var visualization = new google.visualization.PieChart($(this)[0]);
		visualization.draw($(this).data("DataTable"), {
			width: width,
			height: height,
			is3D: true,
			title: title,
			legend: 'right'
		});
		return this;
	}
});

$(function(){

	$("#pie_chart_area")
	.gvt()
	.gvt_addColumn('分類')
	.gvt_addNumColumn('データ');

	testData = [
		12543,
		326,
		2890,
		1112,
		200,
		8891,
		6333
	];

	var row;
	for( var i = 0; i < testData.length; i++ ) {
		$("#pie_chart_area")
		.gvt_addRow()
		.gvt_setCell(0,"分類"+(i+1))
		.gvt_setNumCell(1,testData[i]);
	}

	$("#pie_chart_area").gvt_pie(600,400,'テスト円グラフ');

});

</script>
<div id="pie_chart_area"></div>


posted by at 02:25 | Google | このブログの読者になる | 更新情報をチェックする


2013年11月21日


jQuery でとりあえず実装する Google Visualization DataTable Class ( 後でプラグイン化予定 )

たぶん全くはやらない  Google Visualization ですが、ただデータをテーブル表示したいだけならこんなにいいものは無いと思うのですが。( しかも Google ドキュメント参照できるんですよ )
<style>
#table_area .google-visualization-table-table {
	border-collapse: collapse;
}
.myHeader {
	color:#FFFFFF;
	background: #000000;
	padding: 7px;
	border: solid #303030 1px;
}
.myCell {
	padding: 7px;
	border: solid #303030 1px;
}
</style>

<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
	document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table'] });
$(function(){
	var data;
	var visualization;

	data = new google.visualization.DataTable();

	data.addColumn('string', 'プロパティ');
	data.addColumn('string', '内容');

	var row = 0;
	for (var key in window.navigator) {
		data.addRow();
		data.setCell(row, 0, key+"" );
		data.setCell(row, 1, window.navigator[key]+"" );
		row++;
	}

	visualization = new google.visualization.Table($("#table_area")[0]);
	visualization.draw(data,		{
		cssClassNames: {
			tableCell: 'myCell',
			headerCell: 'myHeader'
		},
		width: '600px'
	});
});

</script>
<div id="table_area"></div>

▼ navigator オブジェクトのプロパテイの一覧です( タイトルクリックでソート )


posted by at 03:43 | Google | このブログの読者になる | 更新情報をチェックする


2013年11月09日


Google ストリートビューのパノラマを自分のブログに設置する方法

コードサンプルの streetview-simple を jQuery で簡略化しています。

※ jQuery は、Google がホスティングしているものです。

heading と pitch は、こちらで動かしながら取得できます( 最後に設定変更ボタン )

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
		return this;
	}, 
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		$( this ).data( "pano" ).setPov(pov);
		return this;
	} 
});

$(function(){
	$('#pano')
	.StreetView(35.658069,139.745016)
	.StreetViewPov(33.69,41.62)
	.css("width","600px")
	.css("height","450px");

});
</script>
<div id="pano"></div>


posted by at 15:31 | Google | このブログの読者になる | 更新情報をチェックする


2009年06月10日


AJAX Libraries API の利用

AJAX Libraries API は、有名な JavaScript ライブラリを
Google がホスティングするバージョンを指定して自由に使える
サービスです。

例えば、prototype.js を利用したい場合は以下のように指定します。
<script
	src="http://www.google.com/jsapi"
	type="text/javascript"
	charset="utf-8"
></script>
<script language="javascript" type="text/javascript">

// Google で HOSTINGされているライブラリを使う
google.load("prototype", "1.6");

</script>

※ 利用サンプル( Form(サーバー送信)汎用スケルトン )

prototype.js の他にも、以下のようなライブラリが使用可能です

google.load("jquery", "1.3.1"); google.load("jqueryui", "1.5.3"); google.load("scriptaculous", "1.8.2"); google.load("mootools", "1.2.1"); google.load("dojo", "1.2.3"); google.load("swfobject", "2.1"); google.load("yui", "2.6.0"); jsapi が API キーを必要とするのは、Google MAP系のみです。 他の API の場合は以下のように記述されています
Google AJAX Search API では、JavaScript を使用して各自のウェブページに 
Google 検索を組み込むことができます。この API を使用するためにキーは必要ありません。
アプリケーションやサイトでキーを使用するかどうかは、完全に任意です。
ただし、キーを使用すると便利です。その理由は、キーがあれば、
自身のアプリケーションまたはサイトに関係する問題が検出された場合、Google がそのキーを
使用して連絡できるからです。
キーがなければ、問題が発生したときに連絡する手段がありません。 
上記記述は、Google AJAX Search API の記述で、AJAX Libraries API のページに
そのような記述はありませんが、準拠するものと考えられます。

■ Google AJAX Search API のエントリページGoogle AJAX API のエントリページGoogle AJAX API の全体像( ドキュメント )


posted by at 09:58 | Google | このブログの読者になる | 更新情報をチェックする