javascriptでできる電力使用状況グラフ
Post on 23-Aug-2014
1.105 Views
Preview:
DESCRIPTION
TRANSCRIPT
JavaScriptでできる電力使用状況グラフ
- 春のJavaScript祭り -2014.4.26
2 /22Javacriptでできる電力使用状況グラフ
http://profiles.wordpress.org/sysbird/
株式会社ベクター企画・デザイン部
WordPressプラグインテーマ配布
鳥山優子 @sysbird
いままでに食べたお菓子2311種共著
3 /22Javacriptでできる電力使用状況グラフ
動画
Web API
画像
地図
認証
言語
料理
位置情報
アフィリエイト
天気
行政写真
SNS Eコマース
交通
4 /22Javacriptでできる電力使用状況グラフ
JS用ライブラリ 画像
URL+パラメータ XMLJSON(P)
JavaScriptで扱えるWeb API
5 /22Javacriptでできる電力使用状況グラフ
Google Maps API
https://developers.google.com/maps/?hl=ja
使用例：練馬の無人販売所マップhttp://yasai.nerima-web.com/
6 /22Javacriptでできる電力使用状況グラフ
Flickr Services
https://www.flickr.com/services/api/
使用例：TinEye Labshttp://labs.tineye.com/
7 /22Javacriptでできる電力使用状況グラフ
郵便番号検索API
http://zip.cgis.biz 使用例：スマイティhttp://sumaity.com/mansion_shinchiku/
8 /22Javacriptでできる電力使用状況グラフ
電力使用状況APIGoogleCharts
電気予報API1
2
3
JavaScriptで電力使用状況グラフを表示しよう 本日の
目標！
9 /22Javacriptでできる電力使用状況グラフ
震災関連情報WebAPIhttp://developer.yahoo.co.jp/webapi/shinsai/
Yahoo!デベロッパーネットワーク
電気予報API電力使用状況API
1
12
10 /22Javacriptでできる電力使用状況グラフ
https://developers.google.com/chart/?hl=ja
Google Charts
GoogleCharts棒グラフ
3
11 /22Javacriptでできる電力使用状況グラフ
// 用電usage = [['時', ' 用 (%)’],
[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],・・・[20, 0],[21, 0],[22, 0],[23, 0],
];
Google Charts に渡す配列
24時間ぶん空の配列
12 /22Javacriptでできる電力使用状況グラフ
http://setsuden.yahooapis.jp/v1/Setsuden/electricPowerForecast?appid=(アプリケーションID) &date=20140426&output=json&callback=?
電気予報API
{"Area":"tokyo","Usage":{"$":"39850000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“17"},{"Area":"tokyo","Usage":{"$":"41420000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“18"},{"Area":"tokyo","Usage":{"$":"42070000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“18"},{"Area":"tokyo","Usage":{"$":"40930000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“20"},{"Area":"tokyo","Usage":{"$":"39320000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“21"},{"Area":"tokyo","Usage":{"$":"37610000","@unit":"kW"},"Capacity":{"$":"46190000","@unit":"kW"},"Date":"2014-04-26","Hour":“22"},
リクエストURL
レスポンス
電力使用量 最大供給量時刻
本日の予測
1
13 /22Javacriptでできる電力使用状況グラフ
// リクエスト$.getJSON(url,
callback = function( data, status ){// レスポンス$.each( data.ElectricPowerForecasts.Forecast, function( i, item ){
// 時刻var hour = parseInt( item.Hour );// 用 予var ratio = ( item.Usage.$ / item.Capacity.$ ) * 100;ratio = Math.round( ratio );usage[ hour +1 ] = [ hour, ratio];
});});
Ajaxで電気予報を取得
配列に代入
14 /22Javacriptでできる電力使用状況グラフ
http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?appid=(アプリケーションID) &output=json&datetime=2014042609&callback=?
電力使用状況API
{"Area":"tokyo","Usage":{"@unit":"kW","$":38310000},"Capacity":{"@unit":"kW","$":46190000},"Date":"2014-03-20","Hour":9}})
リクエストURL
レスポンス 本日9時
最大供給量 電力使用量時刻
2
15 /22Javacriptでできる電力使用状況グラフ
// リクエスト$.getJSON( url,
callback = function( data, status ){// レスポンスvar item = data.ElectricPowerUsage;// 時刻var hour = parseInt( item.Hour );// 用 (実績)var ratio = ( item.Usage.$ / item.Capacity.$ ) * 100;ratio = Math.round( ratio );usage[ hour +1 ] = [ hour, ratio];
});
Ajaxで電力使用状況を取得
配列に代入
16 /22Javacriptでできる電力使用状況グラフ
// 用電usage = [['時', ' 用 (%)’],
[0, 67],[1, 64],[2, 63],[3, 63],・・・[17, 81],[18, 86],[19, 86],[20, 84],[21, 81],[22, 77],[23, 73],
];
Google Charts に渡す配列
電力使用率(実績)
電力使用率(予測)配列が完成！
17 /22Javacriptでできる電力使用状況グラフ
// グラフ表示var data = google.visualization.arrayToDataTable( usage );var options = {
title: ‘本日の電 用 ‘,hAxis: { title: '時間(時)' }
};
var chart = new google.visualization.ColumnChart( document.getElementById( 'chart_div' ) );chart.draw( data, options );
グラフ表示 配列を渡す
表示領域
3
18 /22Javacriptでできる電力使用状況グラフ
19 /22Javacriptでできる電力使用状況グラフ
全体の流れ
$(function(){// グラフ描画google.setOnLoadCallback( drawChart );
});
<head><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">google.load("visualization", "1",
{packages:["corechart"]});</script></head><body>
<div id="chart_div" style="width: 1000px; height: 500px;"></div></body></html>
HTML
JavaScript
jQueryとGoogle Chartsライブラリ
表示領域
20 /22Javacriptでできる電力使用状況グラフ
// グラフ描画function drawChart() {
// Google Charts の (24時間ぶん)を用意usage = [['時', ' 用 (%)', { role: "style" }],
[0, 0, 0],…[23, 0, 0]];
// 電気予報API$.getJSON( [リクエストURL],
callback = function( data, status ){$.each( data.ElectricPowerForecasts.Forecast, function( i, item ){
// 用 (予報)をusage[ hour +1 ] = [ hour, ratio];
});
// 電 用 を (本日0時からの)get_usage( ‘20140426’, 0 );
});}
1
21 /22Javacriptでできる電力使用状況グラフ
// 電 用 をfunction get_usage(day, hour) {
if(0 == usage[hour +1][1]){// 電 用 API$.getJSON( [リクエストURL],
callback = function( data, status ){var item = data.ElectricPowerUsage;// 用 (実績)をusage[ hour +1 ] = [ hour, ratio];// 電 用 を (次の時間)get_usage( day, hour +1 );
});}else{
// グラフ表示}
}
配列が埋まらない間は再帰呼び出し
配列が埋まったらグラフを表示
3
2
22 /22
＊サンプルテーマ
ありがとうございました！
https://github.com/sysbird/setsuden
top related