CodingFirst

C言語、Perl、JavaScript、最近はPythonも。出来上がったものより、プログラムを書くことが好き。あと、スイーツ。

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

東京の電力使用状況グラフをJavaScript+GoogleChartで作った

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

東京電力の使用状況グラフをJavaScript
東京電力電力供給状況APIGoogle Chart APIで作った。

とりあえず、できたグラフを画像で貼っとく。3/27 です。ご注意を。

tepcopow.jpg

で、下記は動作例。動いてれば、現在の日付で画像がプロットされる。

動いてればここに表示される

以下、覚え書きなど。

東京電力電力供給状況APIは、
東京電力の使用状況グラフなどのデータをプログラマが使えるようにAPI化し、
月日指定や直近のデータをJSONPで返してくれる。すげーっ。
使い方などはサイトにわかりやすく書いてあります。ありがたや、ありがたや。
サーバは GAEを使ってるそうです。私も使ってみたい!!

Google Chart APIは、
グーグル提供のグラフ化した画像を取得するAPI。
こちらは難解なので使ったものだけ覚書を書いとく。

chs=500x300
画像サイズ。300,000px以内。
chtt=20110317
グラフのタイトル。URIencode()して渡す。
chxt=x,y
軸線の表示。x=底辺、y=左辺、r=右辺、t=てっぺん(あれ?なんていうんだ)
chxr=1,1000,6000,1000
軸の単位。chxt[1]=y=左辺を0(%)→1000、100(%)→6000とし、1000刻みで表示(わかりづら!)
chxl=0:|0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|
カスタムの軸ラベル。chxt[0]=x=底辺に棒グラフの棒毎に0,1,2..とラベルをつける
chg=0,10.0
補助線。底辺はなし、左軸は500刻み。
chbh=10,2
棒の太さを10pxと隣との間隔を2px。
chd=t1:28,27,22|50
tは0-100の数字(小数可)でデータを並べる指定。1は..なんだっけ..
この場合、棒は28,27,22の3つで、2軸目は50の横線(横線は後述)
chdl=today|capacity
chdで指定した第1列の凡例をtodayとし、第2列の凡例をcapacityとする
chco=FFBB00,FF0000
chdで指定した第1列の色をFFBB00(オレンジ)、第2列をFF0000(赤)とする
cht=bvs
ベースとなるグラフに棒グラフを指定する
chm=H,FF0000,1,0,2
Hが横線、FF0000が赤、1が第2列目、0が横一直線、線の太さが2px

あちこちのサンプルみながら書いたので、説明もちょとあやしいので、
Chart Feature List - Google Chart Tools / Image Charts (aka Chart API) - Google Code
を一読しましょう。

さて、ソースコード。gistに貼っといた。
https://gist.github.com/889164

ふぅ。疲れた...

参考サイト:




プログラミング Google App Engineプログラミング Google App Engine
(2011/01/24)
Dan Sanderson

商品詳細を見る

JavaScript 第5版JavaScript 第5版
(2007/08/14)
David Flanagan

商品詳細を見る

続きを読む »

スポンサーサイト

 | HOME |  »

Search

Recent Entries

Foot Print



Categories

Monthly

Recent Comments

Recent Trackbacks

Profile

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。