あんにんにっき。

日々思ったことや、おこったことを記録するブログ。要するに日記。

簡単にグラフが書けてしまう！

試してみた

　Googleで使われているグラフ描画のAPIが公開された、との事らしいです。
　これは便利！誰でも簡単にグラフを描けるAPIがGoogleから登場！『Google Charts』 | IDEA*IDEA
　リンク先のリンク先
　Charts  |  Google Developers


　せっかくなので、試してみた。
　まずは、デベロッパーズガイドの先頭にあるURLを、imgタグをつかって

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World">

　こう書く。すると、

　こうなる。良い感じだ。


　円グラフが斜めになってる感じでないのはどうするかって読み進めていくと、cht=p3をpに変えればイイっぽい。チャートタイプの略かな。

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:hW&chs=250x100&chl=Hello|World">



　数値をいじると割合が変わるのだろうか。chs=250x100を350x100に変えてみる。

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:hW&chs=350x100&chl=Hello|World">

　むむ、数値はサイズみたいだ。chsでチャートサイズか。まあ、数値x数値だからな。幅x高さと見るのが当然っぽい。


　数値変えながら試しつつ、英語を追いかけていくと、なんとなく対応関係が分かってきた。
　chd=ってのがチャートデータっぽい。s:ってのがシンプルエンコーディング、って事らしく。その後ろの、hとWが値っぽい。
　A-Zが0-25に対応。a-zが26から51に対応。0-9が52から61に対応しているようす。
　なので、hWってのは、33:22って事のようだ。
　なので、15%と45%とかだったら、Ptとすればいいはず。試してみよう。

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Pt&chs=250x100&chl=Hello|World">



　3分割とかもできるっぽい。s:Ptとかを、s:Ujtとかにして、chl=のところを3つにするといい。

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Ujt&chs=250x100&chl=Hello|GoogleChart|World">




　読んでるうちに、数値の指定にテキストエンコーディングってのが使える事に気づく。
　chd=t:10.0,20.0,70.0という指定でいい。直観的でわかりやすいね！

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:10.0,20.0,70.0&chs=250x100&chl=Hello|GoogleChart|World">



　chco（チャートカラー）っての付けると、色も変えられる。chco=ff0000,00ff00,0000ffって感じで追加。

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:10.0,20.0,70.0&chco=ff0000,00ff00,0000ff&chs=250x100&chl=Hello|GoogleChart|World">


　今回は円グラフだけ試してみたけど、棒グラフとか折れ線グラフもある。
　URL指定するだけなんで、Javascriptとかから使ったりするのも可能っぽい。
　かなり面白い感じですね。