Calendar

August 2010
M T W T F S S
« Jul   Sep »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

気象データをグラフ化する - Google Chart API編


はじめに

以前の記事 気象データを取得する – GAE編 で、NOAAから収集したMETARをGAEに蓄積しブラウザで一覧表示する仕組みを作りました。

全国の不快指数 – http://99blues.appspot.com/

が、テキストをだらだら並べただけでは魅力に欠けるので、もう少し見栄えを良くしたいと考え、せっかくの時系列データなのでトレンドグラフ化することにしました。

こんな感じで

(2008年8月29日の米子空港のトレンドグラフ)
米子空港2008/8/29のチャート

どうやって画像を作るか?

まずは画像を作成するAPI の選定です。 ライブラリに要求される要件は次の通りです。

(ライブラリの要件)

  1. GAE/Python で使えること
  2. GAEの制限された動作環境で使えること。

  3. 画像を生成し、グラフが描けること
  4. 新規で画像を生成し、線を引いたり、テキストの描画等が出来ること。

ライブラリの選定

候補1:Images Python API

当初、GAE/Python には Images Python API という画像処理ライブラリが最初から用意されているので大丈夫、と軽く考えていました。…が、ドキュメントを読んでみると、どうやら写真など既にある画像に対する操作(サイズ変更、回転、反転、切り抜きなど) しか出来ないようで、今回の用途には使えなさそうでした。

ということで断念。いきなり当てが外れてしまいました。

候補2:Python だけで実装された画像ライブラリを探せ

次に、Pythonのみで書かれた画像ライブラリを探してみました。 GAEでの動作が前提なので、libjpeg や libpng のような C/C++ で書かれたライブラリに依存するものは不可です。

…が、適当なものが見つかりません (Cのライブラリに依存したものなら、沢山あるんですが…)

候補3:Google Chart API

いっそ自宅サーバに画像生成用サービスでも作って、そこで画像を作ろうかと考えていたところ、Google Chart API というサービスが公開されていることを発見。どんなものかちょっと調べてみました。

Google Chart API の概要

Google Chart API の サーバ(http://chart.apis.google.com/) にグラフの作成パラメータを連結した URI を送れば、サーバ側でグラフを作成し、PNG形式の画像を返してくれるサービスです。

(公式サイト)


例えば、HTML のimgタグ の src属性に Google Chart API への URI を埋め込んでおくと、

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World"/>

次のようにグラフを表示させることが出来ます。

折れ線グラフもあります。

<img src="http://chart.apis.google.com/chart?cht=lc&chco=FF0000,00FF00,0000FF&chs=200x125&chd=s:FOETHECat,lkjtf3asv,KATYPSNXJ&chxt=x,y&chxl=0:|Oct|Nov|Dec|1:||20K||60K||100K" />

ドキュメントのサンプルを見ると、こちらの想定する品質・機能を満たすグラフは十分作成出来そうです。レスポンスも速くて全く気になりません。(むしろ GAE の Datastore の遅さが…)

また、Google Chart API を使うと次のようなメリットがあります。

(Google Chart API を使うメリット)

  1. グラフ作成が楽

    URIの文字列を作成するだけでグラフ画像が取得出来ます。
    描画のための座標計算など面倒な処理が不要になり、開発・デバッグの工数を大幅にカット出来ます。

  2. 画像ライブラリが不要

    1と同様、URIの文字列を作成するだけでグラフ画像が取得出来るので、画像処理ライブラリの類が一切不要です。
    ライブラリの選定・動作検証等の手間が不要になります。

  3. 画像作成のために GAE の リソースを使用しない

    GAE のサーバと、 Google Chart API のサーバは異なるので、画像作成のために GAE の CPUリソースを使用することはありません。
    GAE の無料クォータでやりくりする場合、ちょっと気が楽です。

以上の理由から、Google Chart API を使うことにしました。

Google Chart API の制限

Google Chart API の制限事項について、もう少し詳しく確認しておきます。(GAEアプリ側をこの制限に合わせます)

(Google Chart API の制限)

  1. API呼び出し回数の制限はない

    ドキュメントには「250,000回/日を越えそうなら、メールで連絡して欲しい」と買いてありますが、今回はその心配は不要です。
    (その前に GAEアプリ側が無料クォータの制限に引っかかって動かなくなるハズです)

  2. URI長の制限

    Google Chart API サーバに送れるURI長は、GETメソッドを使う場合 2048byte以内に制限されます。 今回の一番の注意点で、描画出来るデータ点数に影響します。

    今回は関係ありませんが、POSTメソッドを使えば、HTTPボディ部を16KBまで使えるようになり制限が大幅に緩和されます。

  3. 画像サイズの制限

    生成出来る画像サイズは、縦・横共、最大 1,000pixel までです。 また、縦x横の値が 300,000pixel 以下に制限されます。

以上を念頭に置いて GAEアプリを作成します。

グラフ化してみる

METARをグラフ化する時の注意点

一番(かつ唯一)の注意点は 「定期的にデータが届くとは限らない」ということです。

例えば、

  • 成田、羽田、関空などの大きな空港は24時間、ほぼ30分毎にデータが届きますが、時々、もっと短い間隔でデータが届くことがあります。

    (新千歳空港の例)

    新千歳空港のチャート

    2010/8/29 の 1:00am ~ 3:00am の間は30分より短い間隔でデータが届いていました。

    2010-08-29 03:00:00
    ----
    2010-08-29 02:46:00
    2010-08-29 02:30:00
    2010-08-29 02:13:00
    2010-08-29 02:00:00
    ----
    2010-08-29 01:44:00
    2010-08-29 01:39:00
    2010-08-29 01:30:00
    2010-08-29 01:00:00
    


  • ほとんどの地方空港は、ほぼ1時間毎にデータが届きますが、夜間はデータが途切れます。また、1時間より短い間隔でデータが届くこともあります。

    (釧路空港の例)
    釧路空港のチャート

    見事に夜間のデータが抜け落ちてます。また、時々短い間隔でデータが届いてます。


  • 自衛隊の飛行場は、休日(土日)になるとデータが減る地点があります。

    (岐阜飛行場の 2010/8/29 日曜日)

    岐阜飛行場のチャート

    …日曜日はお休みのようです。 ちなみに前日の8/28(土曜日) のデータは1件だけでした。

    2010-08-28 02:28:00
    ----
    2010-08-27 23:15:00
    2010-08-27 08:27:00
    

    百里飛行場や三沢飛行場からは、土日も24時間しっかりデータが届いてるので大丈夫なのかな?


以上より、次の点に注意が必要です。

  1. 1日のデータ件数は正確には分からない

    日によって変動します。

  2. 長時間データが届かないことがある

    全体では夜間のデータがない空港の方が多く、24時間データのある空港の方が少数派です。

  3. 24時間に1件もデータが届かないこともある

    沖永良部空港(RJKB)のように、2008年9月30日を最後に、約2年間データがない地点もあります。

グラフの仕様

以上の調査結果を基に、今回作成するグラフの仕様を次のようにしました。

(グラフの仕様)

  1. 表示期間(X軸)は最大24時間固定

    “URI長2048byte以内” の制限に対応するため範囲を絞ります。

  2. 表示項目は、温度、湿度、不快指数の3つ

    項目を増やすと表示可能な期間が短くなるし、また、項目が多いとごちゃごちゃ見づらいので、3つに絞りました。

  3. 一定時間以上間隔が開いたらデータ欠落とみなし、グラフの線を分断する

    あまりに間隔が長いと、グラフの見栄えが悪くなるための対応です。 とりあえず、閾値を2時間としました。

  4. グラフは Line Charts(折れ線グラフ)、chart_type=lxy を使う

    Line Chartsの詳細はこちらを参照願います。 Google Chart API – Line Chart

    等間隔でないデータを描画するために、X軸、Y軸の値をセットで指定するタイプ(lxy)のグラフを使用します。 X軸のデータも必要になるため、データ1件当たりのバイト数が増え表示可能件数が減ります。

グラフ化してみる

既に何度も出てますが、今回作成したグラフは次のようになります。



上のグラフを作るために、 Google Chart API のサーバに次のようなリクエスト(URI) を送信してます。


http://chart.apis.google.com/chart?

  &cht=lxy
  &chs=768x120
  &chdl=気温(℃)|湿度(%)|不快指数(%)
  &chco=ff0000,0000ff,00ff00
  &chf=c,lg,90,ccccff,0,ffffff,0.5,ffcccc,1
  &chxt=x,y,r
  &chxl=0:|24h|21h|18h|15h|12h|9h|6h|3h|0h|1:|0(℃)|10(℃)|20(℃)|30(℃)|40(℃)|2:|0(%)|25(%)|50(%)|75(%)|100(%)
  &chd=t
    :97.6,93.4,-1,30.9,26.7,22.6,18.4,14.2,10.1,5.9,1.7,-1|58,58,-1,58,60,62,62,62,62,62,60,-1
    |97.6,93.4,-1,30.9,26.7,22.6,18.4,14.2,10.1,5.9,1.7,-1|88,88,-1,83,78,69,73,65,65,61,69,-1
    |97.6,93.4,-1,30.9,26.7,22.6,18.4,14.2,10.1,5.9,1.7,-1|72,72,-1,72,73,74,74,73,73,73,72,-1
  &chm=o,ff0000,0,-1,5|o,0000ff,1,-1,5|o,00ff00,2,-1,5
  &chg=12.5,25

可読性のため改行していますが実際は1行です。また、マルチバイト文字(UTF-8)はBASE64でエンコードします。

各パラメータの詳細は Google Chart API の以下のページを参照願います。

使っているパラメータについて

今回のグラフ作成に使用しているパラメータについて簡単に解説します。

最後に

初めて Google Chart API を使ってみましたが、なかなか良い感じでした。 大昔、Basic や C言語で 一本〃線を描いてグラフを作っていたことを思うと、隔世の感があります。
URI長, 画像サイズなどの幾つか制限はありますが、ほとんどのケースでは問題にならないと思いますし、それ以上に使いやすさ, 汎用性, 工数削減などのメリットが大きいと考えます。

世間で公開されている地図や検索のWebサービスは、趣味ならともかく仕事で使うことがあるか疑問でしたが、Google Chart API なら仕事でも十分使う機会がありそうです。

こうやって便利なサービスを染まっていくうちに、気がついたらインターネットに接続されてないとまともに動かないシステムしか作れなくなってしまうのでしょうか?

そして最後に

Google Chart API とは別に、 Google Visualization API というのもあるようですが、こちらはもう少し敷居が高そうです…

両者の比較は こちら にあります。

1 comment to 気象データをグラフ化する – Google Chart API編

  • vaco

    初めまして!
    Google Chart APIを使うにあたり、大変参考にさせて頂いております!

    ただ一点どうしても解けない点がありまして、もしご存知であれば教えて頂きたいのですが、
    POST送信でのグラフ生成時に日本語テキストを表示するのは不可能なのでしょうか…?

    GETではUTF8エンコードで日本語も使えましたが、POST時にはどうやっても日本語が使えず撃沈しております。。

    もし何か方法をご存知でしたら、是非教えてくださいませ!