URLだけでグラフ・チャートが作れる『Google Chart API』

いまさらな紹介ですが・・　投稿が滞っていたので、仕方がありません。。

さて、BlogやWebページ内に各データを掲載するとき、本当は円グラフや折れ線グラフで示した方が分かりやすいようなデータも、作るのが面倒だからというので、表形式になってしまったりします。

しかし、それがURL一つでチャートができあがるとなれば話は別。Googleが実現してくれました。
次のURLを見てください。

»http://chart.apis.google.com/chart?cht=p3&chd=s:cz&chs=250×100&chl=A|B

この URLにアクセスすると、冒頭の図のようなグラフが表示されます。このグラフ、上記のURLが呼び出されたときに、その場で生成されているグラフなのです。

その証拠に、URLの最後の「A|B」という箇所を「Item1|Item2」などと書き換えてみてください。グラフのラベルが変わります。このように、URLでグラフを生成できるのが「Google Chart API」です。

パラメータの各意味は、次の通りです。

・cht… チャートのタイプ。p3は「パイチャート」の意味でしょうか？　lcだと「ラインチャート」です。
・chd… チャートのデータ。この設定値は後述します。
・chs… チャートのサイズ。「×」の代わりに「x（小文字のエックス）」を使って縦・横を指定します。
・chl… チャートのラベル。「|（縦棒、Shiftキーを押しながら¥キー）」で区切って指定します。

このようにパラメータを指定すれば、チャートができあがります。ちなみに、チャートのタイプによってはパラメータが違うので注意。

ここで、「chd」というパラメータですが、ちょっと特殊な指定です。これは「a」を1、「z」を26として並べて記述していきます。つまり「s:cz」は「3:26」という割合。他の指定方法もあるのだと思いますが、この指定方法が基本となるようです。

こうして作ったチャートは、Webページ内に貼り付けることもできます。いつものように<img />要素で指定するだけです。

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

必要に応じて、width、height属性や、alt属性も付加しましょう。

これなら、チャートを使うのも怖くないですね。詳しい説明は、以下のページからどうぞ（英語です）。

»Developer’s guide - Google Chart API