トップ  >  2008年  >  2008.9.15 グラフを描いてみる「Google Chart API」
features
グラフを描いてみる「Google Chart API」
2008.9.15記

今回は Google Chart API を使ってグラフを描いてみます。
http://code.google.com/intl/ja/apis/chart/
http://code.google.com/apis/chart/

折れ線グラフ

年別オリンピックでの日本の金メダル数

<img src="http://chart.apis.google.com/chart?cht=lc&amp;chco=ff0000&amp;chs=500x300
&amp;chd=t:50,20,15,15,25,80,45&amp;chxl=|84|88|92|96|00|04|08&amp;chxr=0,20" />
http://chart.apis.google.com/chart?
cht=lc	(グラフの種類:lc は折れ線グラフ)
&chco=ff0000	(グラフの色:ff0000 は赤色)
&chs=500x300	(グラフサイズ:横500、縦300ピクセル)
&chd=t:50,20,15,15,25,80,45	(グラフデータ)
&chxl=|84|88|92|96|00|04|08	(グラフラベル:X軸)
&chxr=0,20	(グラフラベル範囲:Y軸)
折れ線グラフの場合、Y軸は0〜100で表示されるので、金メダルの数(10, 4, 3, 3, 5, 16, 9)を20を100として(50, 20, 15, 15, 25, 80, 45)に換算した数値をデータとして設定。

棒グラフ

北京オリンピックでの日本の金銀銅別のメダル数

<img src="http://chart.apis.google.com/chart?cht=bhs&amp;chs=500x200&amp;chbh=40,30
&amp;chd=t:60,40,66.6&amp;chxt=x,y&amp;chxl=0:|0|5|10|15|1:|Bronze|Silver|Gold|" />
http://chart.apis.google.com/chart?
cht=bhs	(グラフの種類:bhs は横の棒グラフ)
&chs=500x200	(グラフサイズ:横500、縦200ピクセル)
&chbh=40,30	(グラフの棒のサイズ:40ピクセルで間隔30ピクセル)
&chd=t:60,40,66.6	(グラフデータ)
&chxt=x,y	(軸設定)
&chxl=0:|0|5|10|15|1:|Bronze|Silver|Gold|	(グラフラベル)
棒グラフの場合も、数値軸は0〜100で表示されるようなので、メダルの数(金9・銀6・銅10)を15を100として(60・40・66.6)に換算した数値をデータとして設定。

スパークライン

<img src="http://chart.apis.google.com/chart?chs=300x60&amp;cht=ls&amp;chco=0077CC
&amp;chm=B,E6F2FA,0,0,0&amp;chls=1,0,0&amp;chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,
25,31,25,25,25,26,26,25,25,28,25,25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,
34,25,26,25,36,25,26,37,33,33,37,37,39,25,25,25,25" />
http://chart.apis.google.com/chart?
chs=300x60	(グラフサイズ:横300、縦60ピクセル)
&cht=ls	(グラフの種類:ls はスパークライン)
&chco=0077CC	(グラフ色)
&chm=B,E6F2FA,0,0,0	(グラフ線とX軸との間の設定のようです)
&chls=1,0,0	(グラフ線のスタイル[線の太さ],[線の長さ],[空白の長さ])
&chd=t:27,25,25,25,25,27,100,31,25,36,25,25,39,25,31,25,25,25,26,26,25,25,28,25,
		25,100,28,27,31,25,27,27,29,25,27,26,26,25,26,26,35,33,34,25,26,25,36,25,
		26,37,33,33,37,37,39,25,25,25,25	(グラフデータ)
ちなみにスパークラインって何? 

棒グラフ

北京オリンピックでの日本の金銀銅別のメダル数

<img src="http://chart.apis.google.com/chart?cht=p&amp;chd=t:9,6,10&amp;chs=400x240
&amp;chl=Gold+9|Silver+6|Bronze+10" />
http://chart.apis.google.com/chart?
cht=p	(グラフの種類:p は2次元円グラフ、p3なら3次元)
&chd=t:9,6,10	(グラフデータ)
&chs=400x240	(グラフサイズ:横400、縦240ピクセル)
&chl=Gold+9|Silver+6|Bronze+10	(グラフデータ)
右側が円のスタート地点になるらしい。アメリカンスタイルなんだろうか?

ベン図

<img src="http://chart.apis.google.com/chart?cht=v&amp;chs=300x200
&amp;chd=t:100,80,60,30,30,30,10" />
http://chart.apis.google.com/chart
?cht=v	(グラフの種類:v はベン図)
&chs=300x200	(グラフサイズ:横300、縦200ピクセル)
&chd=t:100,80,60,30,30,30,10	(グラフデータ)
引用:
- 最初の 3 つの値は、3 つの円 A、B、C の相対的なサイズを指定します。
- 4 番目の値は、A と B の交わりの面積を指定します。
- 5 番目の値は、A と C の交わりの面積を指定します。
- 6 番目の値は、B と C の交わりの面積を指定します。
- 7 番目の値は、A と B と C の交わりの面積を指定します。
これってベン図って言うんだ。

散布図

<img src="http://chart.apis.google.com/chart?cht=s
&amp;chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn
&amp;chxt=x,y&amp;chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&amp;chs=400x250" />
http://chart.apis.google.com/chart?
cht=s	(グラフ種類: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=400x250	(グラフサイズ:横400、縦250ピクセル)
データはエンコードされているのでどんな値かは見ただけではわかりませんね
データセットの1番目はX軸、2番目はY軸、3番目はデータサイズ
(グラフサイズだけ変えて値はデベロッパーガイドのままです

レーダー チャート

<img src="http://chart.apis.google.com/chart?cht=r&amp;chs=300x300&amp;chd=t:60,40,66.6,60
&amp;chco=FF0000&amp;chxt=x&amp;chxl=0:|Gold+9|Silver+6|Bronze+10" />
http://chart.apis.google.com/chart?
cht=r	(グラフ種類:r はレーダーチャート)
&chs=300x300	(グラフサイズ:横300、縦300ピクセル)
&chd=t:60,40,66.6,60	(グラフデータ)
&chco=FF0000	(グラフ色)
&chxt=x	(グラフ軸)
&chxl=0:|Gold+9|Silver+6|Bronze+10	(グラフラベル)
データは0〜100で表示されるようなので、メダルの数(金9・銀6・銅10)を15を100として(60・40・66.6)に換算した数値をデータとして設定。
ラベルが3つのところに、データも3つ用意し余分にひとつ最初のデータを追加し4つにすると、レーダーチャートが繋がりました。

Maps

<img src="http://chart.apis.google.com/chart?cht=t&amp;chs=440x220&amp;chd=s:Af9
&amp;chco=ffffff,ff0000,00ff00,0000ff&amp;chld=JPMNIN&amp;chtm=asia&amp;chf=bg,s,EAF7FE" />
http://chart.apis.google.com/chart?
cht=t	(グラフ種類:t はMaps)
&chs=440x220	(グラフサイズ:横440、縦220ピクセル)
&chd=s:Af9	(グラフデータ、どこに使う? ないと表示できない)
&chco=ffffff,ff0000,00ff00,0000ff	(着色する色、ひとつめはベース色)
&chld=JPMNIN	(着色する国)
&chtm=asia	(表示する地域)
&chf=bg,s,EAF7FE	(無地塗りつぶし)
サイズは440x220が最大、それ以上にしても地図はでてこない。
サンプルをアジアに変えてみただけ
JP(日本)、MN(モンゴル)、IN(インド)
(インドって飛び地みたいなのがあるんだ、今更ながらに知る)

Google-o-meter

<img src="http://chart.apis.google.com/chart?chs=300x150&amp;cht=gom&amp;chd=t:70&amp;chl=Hello" />
http://chart.apis.google.com/chart?
chs=300x150	(グラフサイズ:横300、縦150ピクセル)
&cht=gom	(グラフ種類:gom はGoogle-o-meter)
&chd=t:70	(グラフデータ)
&chl=Hello	(データラベル)
サイズだけ変えて、サンプルのまま

QRコード

当社電話番号です。
日本語版のデベロッパーガイドにはまだありません。英語版には凡例とかの説明もあり。
複雑ではないものならウェブ上にグラフを簡単につくれるので便利だね。
前
2008.10.15 広角コンパクトデジカメ2008
カテゴリートップ
2008年
次
2008.8.15 Tour de France 2008 #95

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2018 keibunsya all right reserved.