2024
11
23
2011
05
01
JSONPで取得したデータを Google Chart API で表現する。
「東京電力需給状況」のページで利用しているWEBサービスについて、これまで数回に渡って紹介してきました。
「電力使用状況API」
「Google Ajax API」「jQuery.getJSON()」
「Google Chart API」「Goole-O-Chart」
今回はこれらのまとめです。jQuery.getJSON() で「電力使用状況API」にリクエストを行い、取得したデータを「Goole-O-Chart」で表示します。「Goole-O-Chart」自体は静的なPNGファイルですが、「電力使用状況API」から取得するデータが、１時間ごとに変わりますので、表示されるグラフもこれに合わせて変化します。
HTMLソース
最初にソースコードを示します。
<html><head>
<title>東京電力使用量率メーターチャート</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
<script>
function callback(obj){
var data = obj.ElectricPowerUsage;
var Usage = (data.Usage.$-0)/10000;
var Capacity= (data.Capacity.$-0)/10000;
var rate = Math.round(Usage*100/Capacity);
var chart = 'https://chart.googleapis.com/chart?';
chart += 'chs=200x150&cht=gom';
chart += '&chco=00FF00,FFFF00,CC0000&chxt=x,y';
var chd = '&chd=t:'+rate;
var chxl = '&chxl=0:|'+Usage+'|1:|0|'+Capacity;
var chtt = '&chtt=data.Date+'+'+data.Hour+'%E6%99%82|'
+rate+'%+(%E4%B8%87Kw)';
var src = chart+chd+chxl+chtt;
var img = document.createElement('img');
img.src = src;
img.alt = chtt;
$('#latestPowerUsage').append(img);
}
$(function(){
var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?"
var data={
appid:あなたのアプリケーションID,
output:"json"
};
$.getJSON(url+'&callback=?',data,callback);
});
</script>
</head>
<body>
<div id="latestPowerUsage"></div>
</body>
</html>
ソースコードの解説
jQuery のロード
まず、Google Ajax API から jQuery をロードします。jQuery は、DOM構築後の処理指定、JSONリクエスト、IMG要素のドキュメントへの追加の３箇所で利用します。
スクリプトでは、まずcallback関数の定義がありますが、内容については後ほど触れます。
DOM構築後の処理指定
コールバック関数でドキュメントの中にIMG要素を追加することになりますので、その際に追加する場所がブラウザに認識されている必要があります。そのため、「電力使用状況API」に対するリクエストは、DOM構築後にします。
このHTMLソースでは、「window.onload」を上書きしても何ら問題はありませんが、せっかく jQuery をロードしているので、jQuery を利用しました。この書き方は、複数共存できるのもメリットといえるでしょう。
jQueryでDOM構築後の処理を指定する記述方法は、幾種類かありますが、一番短い書式は、関数を f とすると次のものです。
$(f);
fは、別に定義してもよいですし、無名関数としてその場所に内容を記述しても構いません。
$(function(){
処理内容
});
サンプルのソースコードでは、処理内容は、$.getJSON() で「電力使用状況API」に対するリクエストをしているだけです。「電力使用状況API」からリクエストが返ってくると、コールバック関数が実行されます。
コールバック関数の処理内容
コールバック関数で処理していることは、次の内容です。
1) 受け取ったデータから、日時、電力使用量、電力供給量を取り出す。
2) 電力消費率を計算する。
3) 「Google Chart API」へのリクエストURLを組み立てる。
4) IMG要素を生成し、ドキュメントに追加する。
最後に
細かい部分については、これまで説明していますので、今回は省略します。
一部内容は、異なりますが、出来上がりは次のページと同じようになるはずです。「東京電力使用量率チャート」
PR
2011/05/01 (Sun.) Trackback() Comment(0) JSONP
Comments
Trackback
Trackback for this entry：
