_ 簡単に誰でもグラフが作成できるAPI『Google Chart API』を利用してみる。

使い道が結構ありそうなAPIなので訳したりまとめながら使ってみることにする。

Google Chart APIを利用すると上記のようなグラフを簡単に生成することが可能です。

上記のグラフの画像のURLは

http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:helloWorld

となっています。

helloWorld

の部分がグラフのデータとなっており、A-Z,a-z,0-9の61段階でパラメータを指定することが可能です。

利用規約

このAPIは1ユーザにつき、1日50000アクセスのアクセス制限を行います。

24時間以内にこの制限を超えた場合、あなたは一時的にこのAPIが表示されなくなる可能性があります。

継続的にこの制限を超えた場合、あなたはこのAPIからブロックされる可能性があります。

導入

Google Chart APIはPNG形式の画像を返します。

大きさ、色、ラベルなどの属性を指定して、棒グラフ、円グラフ、折れ線グラフなどを生成することができます。

URLルール

グラフのURLは以下のようになります

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

一行で書く必要があります

Sample chart

上記グラフのURLは

http://chart.apis.google.com/chart?
chs=200x125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

となります。

これはそれぞれ

http://chart.apis.google.com/chart?

このAPIのURL

パラメータの分割

chs=200x125

グラフのサイズをピクセル単位で指定できます。

chd=s:helloWorld

グラフのデータです。

cht=lc

グラフの種類を指定できます。

chxt=x,y

X軸、Ｙ軸それぞれのラベルが必要です。

パラメータ

必須パラメータ

チャートのサイズ
チャートのデータ
チャートの種類

オプションパラメータ

パラメータ	折れ線グラフ	散布図	棒グラフ	ベン図	円グラフ
グラフのタイトル	○	○	○	○	○
グラフ説明	○	○	○	○	○
色	○	○	○	○	○
背景	○	○	○	○	○
複数の軸ラベル	○	○	○
グリッド線	○	○
印の形状	○	○
水平マーカーの範囲	○	○
垂直範囲印	○	○
ラインスタイル	○
記入エリア	○
円グラフのラベル					○

チャートサイズ

chs=<幅px>x<高さpx>

のような形式で渡す。

chs=300x200

だと幅300px高さ200px

最大面積が30000ピクセル、最大の幅、高さは1000ピクセル

チャートデータ

以下のエンコーディングがサポートされている

Simple encoding
Text encoding
Extended encoding

Simple encoding

chd=s:<data>

dataはA～Z、a～z、0～9が利用可能。

A=0,B=1,...,Z=25
a=26,b=27,...,z=51
0=52,1=53,...,9=61
不明な値の場合は『_』を入れる
複数のデータを渡す場合は『,』で区切る

chd=s:ATB19,Mn5tz

これはA→0,T→19,b→27,1→53,9→61のようによむことができる。

Text encoding

chd=t:<data>

dataは0.0～100.0までの数値と『|』が利用できる。

0.0=0,1.0=1～100.0=100
不明な値の時は-1を指定する
複数の値群を渡すときは『|』で区切る

Extended encoding

chd=e:<data>

dataはA-Z,a-z,0-9,『-』,『.』,『_』,『,』が利用できる。

AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63,BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127,.A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
不明な値は『__』で表します
複数の値群を渡すときは『,』で区切る

チャートタイプ

現在以下の種類のチャートをサポートしています。

折れ線グラフ
棒グラフ
円グラフ
ベン図
散布図

折れ線グラフ

cht=lc

データが均等にx軸にポイントされる。

<img src="
http://chart.apis.google.com/chart?
cht=lc&
chs=200x125&
chd=s:fooZaroo"
 />

cht=lxy

ペアのデータを渡す。

最初のデータがx軸にマッピングされ、二つめのデータがy軸にマッピングされる。

x軸のデータ群として未定義値(Simple encodintの時は-1,Text encodingの時は_,Extended encodingの時は__)を渡すとx軸に均等にマッピングされる。

<img src="
http://chart.apis.google.com/chart?
cht=lxy&
chs=200x125&
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
" />

このグラフはまだ説明していない、グラフのスタイルを変更するパラメータを利用しています。

棒グラフ

cht=bhs or cht=bvs

水平および垂直の棒グラフが生成できる。

複数の種類のデータが一行にまとめられるタイプの棒グラフ。

複数のデータ群を指定する場合はそれぞれの色を指定しなければならない。

<img src="
http://chart.apis.google.com/chart?
cht=bhs&
chs=200x125&
chd=s:HELL,WORL&
chco=ff0000,00aa00
" />

<img src="
http://chart.apis.google.com/chart?
cht=bvs&
chs=200x125&
chd=s:hello,world&
chco=cc0000,00aa00&
chbh=20
" />

cht=bhg or cht=bvg

それぞれのデータ群がそれぞれのバーで表示される、棒グラフ。

色分けしたデータを表示するためには、それぞれグループ化する。

<img src="
http://chart.apis.google.com/chart?
cht=bhg&
chs=200x125&
chd=s:el,or&
chco=cc0000,00aa00
" />

<img src="
http://chart.apis.google.com/chart?
cht=bvg&
chs=200x125&
chd=s:hello,world&
chco=cc0000,00aa00
" />

chbh

バーの幅を指定できます。

chbh=<バーの幅>[,<スペースグループ>]

<img src="
http://chart.apis.google.com/chart?
cht=bhs&
chs=200x125&
chd=s:hello

上記のグラフはchbhを指定していない為小さい画像のサイズに対して、グラフが入りきっていない。

<img src="
http://chart.apis.google.com/chart?
cht=bhs&
chs=200x125&
chd=s:hello&
chbh=10
" />

chbnを指定してバーの高さを指定してあげると入る。けどバー同士の間隔がせますぎるかな…

<img src="
http://chart.apis.google.com/chart?
cht=bhs&
chs=200x125&
chd=s:hello&
chbh=10,10
" />

chbnのオプションでバー同士の間隔も指定できます。

円グラフ

円グラフでは一つのデータ群のみ指定可能。

cht=p

二次元の円グラフです

ラベルをchlで指定します。

<img src="
http://chart.apis.google.com/chart?
cht=p&
chd=s:world5&
chs=200x125&
chl=A|B|C|D|E|F
" />

cht=p3

三次元の円グラフです。

ラベルをchlで指定します。

<img src="
http://chart.apis.google.com/chart?
cht=p3&
chd=s:Uf9a&
chs=200x100&
chl=A|B|C|D
" />

ベン図

一つのデータ群のみを受け取る
最初の三つの値は円A,B,Cの相対的サイズ
4つ目の値はAのBと重なっている面積
5つ目の値はBのCと重なっている面積
6つ目の値はCのAと重なっている面積
7つ目の値はA,B,Cの重なっている面積

cht=v

<img src="
http://chart.apis.google.com/chart?
cht=v&
chs=200x100&
chd=t:100,80,60,30,30,30,10
" />

散布図

cht=s

<img src="
http://chart.apis.google.com/chart?
cht=s&
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=200x125
" />