Googleのかんたんグラフ作成API「Google Charts」を試す

先日リリースされたGoogleのグラフ作成API、「Google Charts」、そのうち生成ツールが出てくるでしょうけど、いち早く試したかったので実践してみました。

ホントにかんたんな設定でいろいろなグラフを描く事ができる「Google Charts」。いろいろ楽しめそうです。サンプルと合わせてご紹介していきます。

↑これは日本の検索エンジンシェアを現した円グラフの3Dバージョン。

1. 3Dバージョンのコード: <img src="http://chart.apis.google.com/chart?cht=p3&chd=t:60.2,31.6,2.6,1.7,1.1,1,0.6&chs=450×200&chl=Yahoo|Google|msn|Biglobe|nifty|goo|ocn&chtt=Seach+Engine+Share" alt="" />; Point：3Dにする場合は”cht=p3″と設定; Option：グラフタイトルは”&chtt=「チャートの+タイトル」”を追加（日本語はひらがなとカタカナのみOK、漢字も使えるようになるといいですね。）

2. 2Dバージョンのコード: <img src="http://chart.apis.google.com/chart?cht=p&chd=t:60.2,31.6,2.6,1.7,1.1,1,0.6&chs=450×200&chl=Yahoo|Google|msn|Biglobe|nifty|goo|ocn&chtt=けんさくシェア&chco=0000ff" alt="" />; Point：2Dにする場合は”cht=p”と設定; Option：色の指定は”chco=「カラーコード」”と設定

ベン図のコード: <img src="http://chart.apis.google.com/chart?cht=v&chs=400×200&chd=t:100,80,60,30,30,50,10&chdl=First|Second|Third&chco=ff0000,00ff00,0000ff" alt="" />; Point：”t:100,80,60,30,30,50,10″の部分は最初の”100,80,60″で三つの円の大きさを設定、次の”30,30,30″で交わり具合を設定、最後の”10″で三つの円が重なる部分の大きさを設定できます。; Option：グラフの概要を表示したい場合は”chdl=First|Second|Third”と設定; Option：

折れ線グラフのコード: <img src="http://chart.apis.google.com/chart?cht=lc&chs=400×200&chd=s:Aacz" alt="" />; Point：折れ線グラフは”cht=lc”で設定; Point：折れ線の数値は”chd=s:「数値記号」”で設定。数値記号は0～61まで設定可能で、0が「A」、25が「Z」、26が「a」、51が「z」、52が「0」61が「9」という順番になっています。ちなみに上のグラフは「Aacz」なので「0⇒26⇒28⇒51」という数値になっています。

複数の折れ線グラフのコード: <img src="http://chart.apis.google.com/chart?cht=lxy&chs=400×200&chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5&chg=20,50" alt="" />; Point：複数の折れ線グラフは”cht=lxy”と設定; Point：こちらの数値の設定は”chd=t:「1本目のシェイプを打つ位置の座標（一番右が100）」|「1本目のグラフ遷移座標」|「2本目のシェイプを打つ位置の座標」|「2本目のグラフ遷移座標」|「3本目のシェイプを打つ位置の座標」|「3本目のグラフ遷移座標」|”と設定していきます; Option：グリッドを表示するには”chg=「横座標」,「縦座標」”と設定、グリッド線の種類も変更可能です⇒”chg=「横座標」,「縦座標」,1,「線の間隔（実線の場合は0）」”

グーグルのかんたんバブルチャート作成API

バブルチャートのコード: <img src="http://chart.apis.google.com/chart?cht=s&chm=o,0000FF,1,1.0,10.0&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=400×250" alt="" />; Point：バブルチャートは”cht=s”と設定; Option：シェイプの形は「c」がクロス、「o」がサークル、「a」が矢印、「x」が×など全9種類用意されています

グーグルのかんたん棒グラフ作成API

棒グラフのコード: <img src="http://chart.apis.google.com/chart?cht=bvg&chs=400×250&chd=s:hello,world&chco=FF0000,000000" alt="" />; Point：2データの比較棒グラフは”cht=bvg”と設定、横バージョンは”cht=bhg”、割合を表示する棒グラフは横が”cht=bhs”縦が”cht=bvs”、単一データの場合は”chbh”となっています; Option：シェイプの形は「c」がクロス、「o」がサークル、「a」が矢印、「x」が×など全9種類用意されています

このようなツールがたくさん出てくると、WEBの視覚化がどんどん進みますよね。一日のリクエスト制限が5万回までという制約もありますが、今後出てくるであろうGoogle Chart APIを利用したグラフ作成ツールやアプリケーションも楽しみです。

先日リリースされたGoogleのグラフ作成API、「Google Charts」、そのうち生成ツールが出てくるでしょうけど、いち早く試したかった