温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » googls apps » Google Chart を使ってmyでんき予報グラフをWordPressのサイドバーに表示する

— 広告 —


— 広告 —

Google Chart を使ってmyでんき予報グラフをWordPressのサイドバーに表示する

所要時間 約 5分

東京電力でんき予報のページに電力の使用状況データ (CSVデータ)あるので、PHP と google chart api を使って WordPress のサイドバーに棒グラフを表示するようにしてみました。

Google Chart に渡すパラメータ

// google chart
$chtt= ""; // グラフのタイトル
$chl = ""; // グラフのラベル
$chxt = ""; // 複数軸ラベルを指定(chxt=x,y,r,x)
$chs = ""; // グラフのサイズ
$chxl = ""; // グラフのx軸・y軸のラベル
$xcho = ""; // グラフの色
$chd = ""; // グラフの数値を指定
$chd = ""; // 補助線を指定(chg=[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線])
$chm = ""; // グラフの補助的な数値を表示
$chds = ""; // データスケーリングを指定(chds=[最小値],[最大値])
$chbh = ""; // 棒グラフの太さ・間隔を指定(chbh=[棒線の太さ],[棒線の間隔])
$cht = ""; // グラフの種類を指定
/*
lc - 折れ線グラフ
lxy - 折れ線グラフ
bhs - 棒グラフ(横)
bvs - 棒グラフ(縦)
bhg - 棒グラフ(横)グループ化
bvg - 棒グラフ(縦)グループ化
p - 円グラフ
p3 - 円グラフ3D
v - ベン図
s - 散布図
ls - スパークライン
r - レーダー(直線)
rs - レーダー(曲線)
t - 地図
gom - Google-o-meter
qr - QR コード

<img src=\"http://chart.apis.google.com/chart?
データの場所
http://www.tepco.co.jp/forecast/html/images/juyo-j.csv
*/

PHPでの処理

file_get_contents("http://www.tepco.co.jp/forecast/html/images/juyo-j.csv")で東電から電力の使用状況データを配列に読み込みます。

$getURL = "http://www.tepco.co.jp/forecast/html/images/juyo-j.csv";
 
$data =  file_get_contents( $getURL );
$data = mb_convert_encoding( $data, 'utf-8', 'shift_jis' );
$data = preg_replace( '/(\r\n|\r|\n)/', "\n", $data );
$data = explode( "\n", $data);

$data に取り込んだ情報を使いまわして Google Chart API にパラメータを渡します。後は iframe を使ってWordPress のサイドバーに Google Chart API で作成されたグラフを表示します。

<?php 
// 東京電力 電力の使用状況データ
$getURL = "http://www.tepco.co.jp/forecast/html/images/juyo-j.csv";
 
$data = file_get_contents($getURL);
$data = mb_convert_encoding($data, 'utf-8', 'shift_jis');
$data = preg_replace('/(\r\n|\r|\n)/', "\n", $data);
$data = explode("\n", $data);
 
$dataUpdate = $data[0]; // 1行目 最終更新日時
 
// ピーク時供給力(万kW),時間帯,供給力情報更新日,供給力情報更新時刻
$peakData = explode(",", $data[2]);
// 予想最大電力(万kW),時間帯,予想最大電力情報更新日,予想最大電力情報更新時刻
$yosouData = explode(",", $data[5]);
 
$viewatai1 = round($yosouData[0] / $peakData[0] * 100, 0);
$viewatai2 = 100 - $viewatai1;
// google chart
$chtt = "時刻,当日実績(万kW)"; // グラフのタイトル
$chl = ""; // グラフのラベル
$chxt = ""; // 複数軸ラベルを指定(chxt=x,y,r,x)
$chs = "500x125"; // グラフのサイズ
$chxl = ""; // グラフのx軸・y軸のラベル 
$xcho = ""; // グラフの色
$chd = ""; // グラフの数値を指定
$chd = ""; // 補助線を指定(chg=[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線])
$chm = ""; // グラフの補助的な数値を表示
$chds = ""; // データスケーリングを指定(chds=[最小値],[最大値])
$chbh = ""; // 棒グラフの太さ・間隔を指定(chbh=[棒線の太さ],[棒線の間隔])
$cht = ""; // グラフの種類を指定
/**
 * lc - 折れ線グラフ
 * lxy - 折れ線グラフ
 * bhs - 棒グラフ(横)
 * bvs - 棒グラフ(縦)
 * bhg - 棒グラフ(横)グループ化
 * bvg - 棒グラフ(縦)グループ化
 * p - 円グラフ
 * p3 - 円グラフ3D
 * v - ベン図
 * s - 散布図
 * ls - スパークライン
 * r - レーダー(直線)
 * rs - レーダー(曲線)
 * t - 地図
 * gom - Google-o-meter
 * qr - QR コード
 * 
 * <img src=\"http://chart.apis.google.com/chart?
 * http://www.tepco.co.jp/forecast/html/images/juyo-j.csv
 */
 
$wkchl = urlencode("予想最大電力(万kW) " . $viewatai1 . "%");
$cmd = "<img src=\"http://chart.apis.google.com/chart?";
$cmd .= "cht=bhs&chs=250x20";
// $cmd .="&chtt=" .urlencode("東京電力 電力使用予想");
$cmd .= "&chco=e5000b,00ff00"; // 赤、緑
// $cmd .="&chl=" . urlencode("予想最大電力(万kW) ") . $viewatai1 . "%";
// $cmd .="&chl=$wkchl";
$cmd .= "&chdl=$wkchl";
$cmd .= "&chd=t:$viewatai1|$viewatai2";
// $cmd .="&chp=4.712";
$cmd .= "&chds=0,100";
$cmd .= "&chbh=20,0";
$cmd .= "\">";
 
print "\n$cmd\n<br>";
 
print "<font size=\"1\">$dataUpdate<br><br>ピーク時間帯:$yosouData[1]<br>予想最大電力:$yosouData[0]万kW<br>ピーク時供給力:$peakData[0]万kW<br>予想最大電力情報更新時刻:$yosouData[2] $yosouData[3]</font>";
?>

Google Chart の描画機能は、簡単、便利だけどラベルの位置の指定ができなかったり、細かい指定が出来ないのが気にります。商用利用でなければ JpGraph を無料で使えるので、求められる内容によって Google Chart を使うか JpGraph にするか? 選択肢があるのはありがたいことです。

参考URL 感謝です

東京電力 でんき予報
電力の使用状況データ
PHPでごりごり書いた東京電力の電力使用状況取得スクリプト
Toden Power Information: 東京電力の消費電力情報表示ツール
Google Chart API でグラフをカンタン作成!

-- 広告 -- -- 広告 --

 

この記事に関連する記事一覧

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。