忍者ブログ

2018
08
17

[PR]

×

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

2018/08/17 (Fri.)

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」は次のようなチャートです。

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)

1行目は「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)

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

データ(chd : Chart Data)

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

タイトル(chtt : Chart Title)

グラフのタイトルを「chtt=タイトル」で指定します。スペースは「+」、改行は「|」。日本語は URIエンコードします。

テスト用サンプル

下のテキストボックスに「Google Chart API」にリクエストするURLのサンプルを置きました。内容を書き換えて、ブラウザのアドレスバーに入力してみて下さい。

なお、URIエンコードは「encodeURIComponent」のページで変換できます。

また、最新の東京電力使用量率のグラフは「東京電力使用量率チャート」のページでご覧になれます。

次回は、これまでの内容を元に動的にグラフを作成しましょう。

PR

2011/04/30 (Sat.) Trackback(0) Comment(0) Google Chart

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

07 2018/08 09
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア