Google Visualization API を jQuery、JSONを用いて使ってみる
April 23, 2012 – 6:14 pm随分まえになるが、「WPのPost上でGoogle Visualization API のサンプルを動かしてみた」なるエントリを書いたことがある。ここでは、このAPIを jQuery、JSON を用いるかたちで使ってみた。
これにより、かなりすっきりとコーディングすることが可能になるとともに、データをAPIとは独立に与えることができることから、かなり使い勝手がよくなる。
なお、このエントリーを書くにあたっては、”Using jQuery, JSON and Goolge’s Visualization Geo API Together” を参考にしている。
JSONデータ： 以前のサンプルで描画した際に用いたデータと同一のデータを以下のように、 CompanyPerformance.js として作成し、これをブログサイトのルートディレクトリ上に配置しているディレクトリ data 上においた。
CompanyPerformance.json:
[
{
"Year": "2004",
"Sales": 760,
"Expenses": 400
},
{
"Year": "2005",
"Sales": 1170,
"Expenses": 460
},
{
"Year": "2006",
"Sales": 660,
"Expenses": 1120
},
{ "Year": "2007",
"Sales": 1030,
"Expenses": 540
},
{
"Year": "2008",
"Sales": 1090,
"Expenses": 720
}
]
JavaScript ソース：下記するSample_Google_Chart.jsを、ブログサイトのルートディレクトリ上に配置しているディレクトリ scripts 上に置いた。
Sample_Goolge_Chart.js:
// load visualization library
google.load('visualization', '1', {packages: ['corechart']});
$(document).ready(function() {
$.ajax({
type: "GET",
cache: false,
url: '/data/company_performance.json',
dataType: 'json',
success: function(data,dataType) {
if ( dataType="text") data=eval(data);
var chart_data = new google.visualization.DataTable();
chart_data.addRows(data.length);
chart_data.addColumn('string', 'Year');
chart_data.addColumn('number', 'Sales');
chart_data.addColumn('number', 'Expenses');
$.each(data, function(i,v) {
chart_data.setValue(i, 0, v.Year );
chart_data.setValue(i, 1, v.Sales );
chart_data.setValue(i, 2, v.Expenses );
});
var linechart = new google.visualization.LineChart(
document.getElementById('visualization'));
linechart.draw(chart_data, {width:400,height:240,is3D:true,title:'Company Performance'});
}
});
});
HTML： 次のような形式でGoogle Visualization API、描画のためのJavaScriptソースを定義しておく。これにより、下部に見られるような形式でチャートが描画される。
<script type="text/javascript" src="http://www.google.com/jsapi></script> <script type="text/javascript" src="/scripts/Sample_Google_Chart.js"></script> <div id="visualization"></div>
1 Trackback(s)