寝太郎の江戸風呂。ね！

[PR]

2024/04/25 (Thu.)

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とした場合の値の割合を値とします。

タイトル(chtt : Chart Title)

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

テスト用サンプル

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

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

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

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

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

国の色分け地図

Google Chart Tools / Image Charts (aka Chart API)  の Map Charts を利用して、国を色分けした地図を作成しましょう。
題材は、2011年のサッカー・アジアカップの出場16か国です。


グループステージは、4グループに分けて争われます。
それぞれのグループを4色で色分けしました。
日本が属するのはBグループで、青色で表示しています。
サウジアラビア、シリア、ヨルダンという中東でも西側の国と同一グループです。
各グループ２位までが決勝トーナメントに出場できます。
開催は2010年1月。日本の活躍を期待します。

2010/09/08 (Wed.) Trackback() Comment(0) Google Chart

Dynamic Icons 用アイコン選び - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons については、これまで次の記事を掲載してきました。
「文字列を画像にする。Dynamic Icons - Google Chart Tools」
「文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools」
「アイコン付の文字列画像を作成する。Dynamic Icons - Google Chart Tools」
「吹き出しを作る。Dynamic Icons - Google Chart Tools」
「マップピンを作る。Dynamic Icons - Google Chart Tools」
「天気予報画像を作る。Dynamic Icons - Google Chart Tools」

これらの中には、アイコンの名前をパラメータとして指定する必要がるものがあります。アイコンの名前は、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から選ぶように記載していました。

今回は、そのページを開くのは面倒という方(筆者自身ですが）のために、アイコン名を簡単に取得できるツールを作成しました。リストの中のアイコンをクリックすると、その名前がテキストボックスに表示されます。表示されたアイコンの名前をコピペして、パラメータに挿入しようというものです。

2010/08/30 (Mon.) Trackback() Comment(0) Google Chart

天気予報画像を作る。Dynamic Icons - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons については、これまで次の記事を掲載してきました。
「文字列を画像にする。Dynamic Icons - Google Chart Tools」
「文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools」
「アイコン付の文字列画像を作成する。Dynamic Icons - Google Chart Tools」
「吹き出しを作る。Dynamic Icons - Google Chart Tools」
「マップピンを作る。Dynamic Icons - Google Chart Tools」
今回は、天気予報画像(Weather Forecast Note)を作成するすツールを紹介します。

2010/08/28 (Sat.) Trackback() Comment(0) Google Chart

マップピンを作る。Dynamic Icons - Google Chart Tools

Google Chart Tools/Image Charts(aka Chart API)の Dynamic Icons については、これまで次の記事を掲載してきました。
「文字列を画像にする。Dynamic Icons - Google Chart Tools」
「文字列に枠を付けた画像を作成する。Dynamic Icons - Google Chart Tools」
「アイコン付の文字列画像を作成する。Dynamic Icons - Google Chart Tools」
「吹き出しを作る。Dynamic Icons - Google Chart Tools」
今回は、マップピン(Map Pin)を作成するすツールを紹介します。

下記のフォームにテキストやパラメータを入力して、「getPNG(Map Pin)」ボタンを押して下さい。入力した文字かアイコンを持つPNGイメージが作成されます。アイコンの指定がある場合は、文字は無効です。アイコンも文字もブランクの場合は影だけ表示されます。アイコンの指定がある場合、影だけの場合、文字が一文字だけの場合は、「xpin」というタイプのマップピンを作成します。「Style」を指定することで星マークを付けたり、左右に傾けたりすることができます。

文字が二文字目以上の場合には、「spin」という特別なマップピンが作成されます。
また、「Scale」を「0.5」、「Rotation」を「0」以外に指定した場合にも「spin」tとなります。「Scale」の数値を変えると拡大または縮小されます。「Rotation」を変えると回転します。逆さにするときは「180」です。
アイコンは、「Google Chart Tools / Image Charts (aka Chart API) Dynamic Icons の Image List」から、アイコンを選んで、その名前を入力して下さい。


上記のフォームでは作成しませんが、より簡単なパラメータの指定方法もあります。
「xpin」でも「spin」でもない、ただの「pin」タイプです。
その構文は、次のとおりです。「_withshadow」を削除すると、影なしになります。
●文字
http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=
character|fill_color|text_color
●アイコン
http://chart.apis.google.com/chart?chst=d_map_pin_icon_withshadow&chld=
icon|fill_color
●影のみ
http://chart.apis.google.com/chart?chst=d_map_pin_shadow

2010/08/27 (Fri.) Trackback() Comment(0) Google Chart