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

商品詳細を見る

続きを読む »

スポンサーサイト

JavaScriptでYouTubeのWebAPIを使ってみた

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

JavaScriptでYouTube Data APIを使って、 動画検索とサムネイル表示を作ってみた。

WebAPIを勉強するのには、YouTube Data APIだと、
登録とか不要なのでいいかも知れない。

YouTube の API とツール - Google Code
http://code.google.com/intl/ja/apis/youtube/overview.html

まずはWebAPIは何だろ?とは思ってたんだけど、
一言でいうとURLかな。
たとえば、"cat"を検索するのは以下のURL。
JavaScriptとか使わずともブラウザでアクセスできる。

http://gdata.youtube.com/feeds/api/videos?vq=cat

データがずらーっと出てくるだけだけなので面白くない。
これをJavaScriptで使うには、
JSONPで返すような URLにしてscriptタグに埋め込めばいい。

<script
 src='http://gdata.youtube.com/feeds/api/videos?vq=cat&callback=func' />
<script>
function func(data){
  ...
}
</script>

コールバック関数の引数はfeedの親が返ってくるんだけど、
詳しくはリファレンスを参照。

リファレンス ガイド: Data API プロトコル
http://code.google.com/intl/ja/apis/youtube/reference.html

あとはデータを加工するだけなので、
サンプルを gistにあげておいた。
キーワード検索すると30個サムネイル表示して、
画像を2秒おきに切り替えるおまけ付き。

とりあえず、"アニメ"とか"AKB"とか検索してみると面白い。
余計なものが無いのですごく高速に動く。

Player APIをみたらプレーヤを埋め込めそうだったので
そのうち試したいな

あと、Google Codeの
API と デベロッパー ツール
にて、いろんなWebAPIが提供されてるので
これらもそのうち使ってみたいな!


ブログパーツを自作しよう Webサービス+JavaScript編ブログパーツを自作しよう Webサービス+JavaScript編
(2008/08/20)
蒲生 睦男

商品詳細を見る

WebAPIの本は検索してみると、
なんだかこむずかしそうな本が多いな。。
これなら気楽に読めそうかなぁ。。。


 | HOME | 

Search

Recent Entries

Foot Print



Categories

Monthly

Recent Comments

Recent Trackbacks

Profile

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