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 | このブログの読者になる | 更新情報をチェックする