Google Chart API。Google-O-Meter。　寝太郎の江戸風呂。ね！

2024
04
25

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/25 (Thu.)

2011
04
30

Google Chart API。Google-O-Meter。

「東京電力需給状況」のページで利用しているWEBサービスについて、数回に渡って紹介しています。

前々回「電力使用状況API」
前回「Google Ajax API」「jQuery.getJSON()」

今回は「Google Chart API」。

「東京電力需給状況」のページでは、「Google Chart API」の中の「Bar Chart」という棒グラフタイプのグラフを利用しています。そこでは、時間を横軸に取って時間的変化を見れるようにしました。ただ、時間を複数取ると少し複雑な処理が必要になります。そこで、今回は、シンプルなデータでもインパクトのある「Google-O-Meter」を利用します。

Google-O-Meter

「Google-O-Meter」は次のようなチャートです。

機械の計器のような形をして針が値を示します。

上記のイメージのソースURLは、次のとおりです。

https://chart.googleapis.com/chart?
chs=200x150
&cht=gom
&chco=00FF00,FFFF00,CC0000
&chxt=x,y'
&chd=t:百分率;
&chxl=0:|使用量|1:|0|供給量
&chtt=%E6%9D%B1%E4%BA%AC%E9%9B%BB%E5%8A%9B%E6%B6%88%E8%B2%BB%E7%8E%87|
日付+時刻%E6%99%82|百分率%+(%E4%B8%87Kw)

１行目は「Google Chart API」に共通するものです。これを見てわかるようにイメージは、Google のサイトから送られてきます。「?」以降に記述するパラメータを元に、Google が PNGイメージを生成して返してくれるのです。随分太っ腹ですよね。

Google-O-Meter のパラメータ

サイズ(chs : Chart Size)

イメージのサイズを「chs=幅x高さ」で指定します。掛け合わせて、300,000ピクセル以内に収める必要があります。幅、高さの限度は、両方とも「1,000」です。

種類(cht : Chart Type)

グラフの種類を「cht=種類」で指定します。「Google-O-Meter」は "gom" です。

色(chco : Chart Color)

グラフの色を「chco=色」で指定します。複数の色を指定する場合には、カンマで区切ります。「Google-O-Meter」の場合、この順番で左から右にグラデーションがかかります。

軸の表示(chxt : Chart Visible Axis)

グラフに表示する軸を「chxt=軸」で指定します。複数指定する場合には、カンマで区切ります。下が「x」、左縦が「y」、上が「t」、右縦が「r」です。

軸のラベル(chxl : Chart Axis Label)

１番目の軸を「0:」とし、指定した軸に表示する目盛をパイプ「|」で区切って指定します。

データ(chd : Chart Data)

データのフォーマットには何種類かあります。基本的なテキスト形式(Basic Text Format)がよく利用されます。その場合には「chd=t:値」のように記述します。値が複数ある場合にはカンマ「,」で区切り、系列が複数ある場合にはパイプ「|」で区切ります。「Google-O-Meter」の場合、全体を100とした場合の値の割合を値とします。