Googleのかんたんグラフ作成API「Google Charts」を試す。 先日リリースされたGoogleのグラフ･･･

⇒ほかの情報をリサーチ（ブログランキング）

かんたんグラフ作成API「Google Charts」

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

3D円グラフ

↑これは日本の検索エンジンシェアを現した円グラフの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=450x200&chl=Yahoo|Google|msn|Biglobe|nifty|goo|ocn&chtt=Seach+Engine+Share" alt="" />

Point：3Dにする場合は”cht=p3”と設定

Option：グラフタイトルは”&chtt=「チャートの+タイトル」”を追加（日本語はひらがなとカタカナのみOK、漢字も使えるようになるといいですね。）

2D円グラフ

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=450x200&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=400x200&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=400x200&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=400x200&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）」”

バブルチャート

バブルチャートのコード

<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=400x250" alt="" />

Point：バブルチャートは”cht=s”と設定

Option：シェイプの形は「c」がクロス、「o」がサークル、「a」が矢印、「x」が×など全9種類用意されています

棒グラフ

棒グラフのコード

<img src="http://chart.apis.google.com/chart?cht=bvg&chs=400x250&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を利用したグラフ作成ツールやアプリケーションも楽しみです。

関連情報

• Via：Google Releases Chart Image Generator
• Developer's Guide - Google Chart API - Google Code
• WEBツール