Contenu connexe
Similaire à JavaScriptでできる電力使用状況グラフ
Similaire à JavaScriptでできる電力使用状況グラフ (20)
Plus de Yuko Toriyama (6)
JavaScriptでできる電力使用状況グラフ
- 11. 11
// 用電
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. 12
http://setsuden.yahooapis.jp/v1/Setsuden/electricPowerForecast?appid=(アプリケー
ションID) &date=20140426&output=json&callback=?
API
{"Area":"tokyo","Usage":{"$":"39850000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“17"},
{"Area":"tokyo","Usage":{"$":"41420000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“18"},
{"Area":"tokyo","Usage":{"$":"42070000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“18"},
{"Area":"tokyo","Usage":{"$":"40930000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“20"},
{"Area":"tokyo","Usage":{"$":"39320000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“21"},
{"Area":"tokyo","Usage":{"$":"37610000","@unit":"kW"},"Capacity":{"$":"4619000
0","@unit":"kW"},"Date":"2014-04-26","Hour":“22"},
URL
電力使用量 最大供給量時刻
本日の予測
1
- 13. 13
// リクエスト
$.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
配列に代入
- 15. 15
// リクエスト
$.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. 16
// 用電
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. 17
// グラフ表示
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
- 19. 19
$(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. 20
// グラフ描画
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. 21
// 電 用 を
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
