Let's talk about Flex, AIR, ActionScript, ColdFusion and more    

Google チャート API (HTTPリクエストでチャート表示)


Google Chart API


こんな感じで
http://chart.apis.google.com/chart?cht=p3&chd=t:15.0,49.5,25.5,20.0&chs=400x160&chl=Sapporo|Tokyo|Osaka|Fukuoka

PNG画像のチャートができます。




HTTPリクエストのURLに全パラメターを記述します。
そのおかげでブラウザキャッシュも効くし
「img」タグで簡単に表示できるし、すごいね Google!





ただ、Google の方に載ってるサンプルは
「chd=s:」ってふうにデータを文字列で
エンコーディングしてるんですが
それがどうにもおいらにとっては分かり辛い ^_^;

なので「chd=t:」でいろいろとサンプルを作ってみました。

Pie Chart (cht = p)






3D Pie Chart (cht = p3)




width : height = 2.5 : 1



Line Chart (cht = lc)






Line Chart (cht = lxy)




Value of axis-x is from 0 to 100.

chd=t:

First line's value set (x|y)
0,20,40,60,80,100|0,20,40,60,80,100

First line's markers
d,ff0000,0,0.0,10.0|d,ff0000,0,1.0,10.0|d,ff0000,0,2.0,10.0|d,ff0000,0,3.0,10.0|d,ff0000,0,4.0,10.0|d,ff0000,0,5.0,10.0


Second line's value set (x|y)
0,20,40,60,80,100|100,80,60,40,20,0

Second line's markers
o,00ff00,1,0.0,10.0|o,00ff00,1,1.0,10.0|o,00ff00,1,2.0,10.0|o,00ff00,1,3.0,10.0|o,00ff00,1,4.0,10.0|o,00ff00,1,5.0,10.0


Third line's value set (x|y)
0,20,40,60,80,100|10,40,5,20,60,80

Third line's markers
s,0000ff,2,0.0,10.0|s,0000ff,2,1.0,10.0|s,0000ff,2,2.0,10.0|s,0000ff,2,3.0,10.0|s,0000ff,2,4.0,10.0|s,0000ff,2,5.0,10.0



Bar Chart (cht = bhs)



Data Order is opposite order of label.

with chbh parameter



Bar Chart (cht = bvs)



label of axis-x is crushed.

with chbh parameter



Bar Chart (cht = bhg)



Data Order is opposite order of label.

with chbh parameter



Bar Chart (cht = bvg)




with chbh parameter



Venn diagrams (cht = v)



chd=t:
60,40,10 = Tokyo,Osaka,Okinawa
4th parameter is common value between Tokyo and Osaka.
5th parameter is common value between Tokyo and Okinawa.
6th parameter is common value between Osaka and Okinawa.
7th parameter is common value for all (?).



Scatter plots (cht = s)



chd=t
First is axis-x value (10,20,30,40,50,60,70,80,90,100)
Second is axis-y value (5,20,10,30,15,20,40,10,60,80)
Third is scale size of point (60,80,100,60,50,60,30,20,10,10)


チャートの種類は網羅しているけど
他にもオプション(背景とか)があります。

このサンプルのソースはこのエントリーの下の
「ダウンロード」リンクからダウンロードできます。
まぁ、このページのソースを見ても分かりますがね ^_^;
#FireBug 使えばすぐに見つけられますよ。


[元ネタ]
Google Charting API Released


コメント
BlogCFC was created by Raymond Camden. This blog is running version 5.5.005.