パラメータの指定方法とグラフの表示

それではGoogle Chart APIを使ってPNG画像を取得する方法から確認していきます。

画像を取得するにはGoogleで用意されたURLに必要なパラメータを付けて送信すると生成された画像を取得できるようになっています。書式は次の通りです。

http://(指定のURL)?(パラメータ1)&(パラメータ2)&(パラメータn)

まず指定のURLは「http://chart.apis.google.com/chart」です。このURLに対してパラメータを指定付けてリクエストを送ります。

パラメータはURLの直後の後「?」の後に続けて記述していきます。パラメータは「パラメータ名=値」の形式となっており、複数のパラメータを指定する場合は区切り文字として「&」を使い続けて記述していきます。例えば次のようになります。

http://chart.apis.google.com/chart?chs=150x150&chd=t:78.0,32.0,84.0&cht=lc

パラメータはURLの後の「?」の次から始まり区切り文字は「&」ですので次のように3つのパラーメータが指定されていることになります。

chs=150x150
chd=t:78.0,32.0,84.0
cht=lc

パラメータは指定が必須のものと、オプションのものがあります。グラフの種類によって指定可能なパラメータは異なります。詳しくはそれぞれのグラフの解説ページで確認します。

グラフの表示

URLにパラメータを付けてリクエストを送信すると結果としてPNG画像を取得することができますので、静的に作成あれたPNG画像と同じように扱うことが可能です。その為<img>タグの「src」属性にパラメータ付きのURLを指定するだけでグラフを画像として表示することができます。

<img src="パラメータ付きのURL" alt=".." width=".." height="..">

では先ほどのサンプルURLを実際に貼り付けてみます。

<img src="http://chart.apis.google.com/chart?chs=150x150&chd=t:78.0,32.0,84.0&cht=lc">

今回はグラフのサイズを150×150、3つのデータを持つ折れ線グラフを表示しました。何らかの理由でグラフが表示されていない場合用にブラウザにグラフが表示されたキャプチャ画像も下記に表示します。

このようにGoogle Chart APIを使用すると<img>タグにパラメータ付きのURLを指定するだけで簡単に任意のデータと形状を持ったグラフを表示させることが出来ますので大変便利です。

AjaxTower