Google Chart APIで作成する電力使用状況グラフ：クラウドとgaedirectでできる緊急対応マッシュアップ（2）（3/3 ページ）
グラフデータの登録・参照・更新
gaedirectでの登録・参照・更新処理プログラミングについては前回紹介しているので、基本的な処理手順は問題ないと思いますが、今回サンプルでのいくつかのポイントを簡単に見ていきます。
プロパティ項目の変数定義
今回のサンプルでは、全てのプロパティ項目をデフォルトの文字列（String）としているため、登録・参照・更新が共通になります。
また今回は、プロパティ数が多いことから、【1】でプロパティ並びの変数「props」を定義しています。ここで定義されたpropsは【3】【4】【8】【9】のgaedirectによるデータストアアクセスで共通に使用されています。
タグでのデフォルト値設定
今回のようなサンプルでは、登録データは毎回の登録で同じデータ値になることが多い項目が、かなりあります、このような項目は登録での画面入力を少しでも省略できるようにするためにリスト下部のタグ記述でvalue値として指定あります。
もしvalue値が登録ごとに変更がないような場合は、プログラムでの定数として定義し、クラウドのデータストアに登録しないで済ます方法もあると思いますが、ここではグラフ表示で使用されるパラメータ値はすべてクラウド上のデータストアに登録しています。
参照処理での配列使用
このサンプルではデータ項目（プロパティ）数が多いので、【4】の参照処理では配列を使用して、コード数削減を行っています。
まず、プロパティ名は表示フィールドのID値名でもあるわけですが、これを【2】で配列変数の「prop」にセットしています。次に、【5】でサーバからのレスポンスデータを配列「dat」にセットし、これで配列データの準備が完了します。【6】では、表示項目の数だけ繰り返して【7】で表示処理を行っています。【7】の表示処理では、表示フィールド（タグ）のID値を「prop[i]」でセットし、そのタグへの表示データを「dat[i]」でセットしています。
gaedirectのデータをグラフ表示
さて、ようやく今回のメインテーマと言えるグラフ表示の処理に入ります。この部分はリスト2の（D）の部分で行われていますが、ここでも配列を使用してコード数削減を行っています。【9】の参照メソッドで受信したグラフ表示用データを【10】で配列「dat」にセットし、【11】でChart APIで表示するパラメータ設定用の変数「parm」を初期化しています。
paramへのパラメータ設定は【12】のfor文でパラメータ数だけ繰り返し行います。【13】では簡略形式で条件判断を行っていますが、「(i)」でiの値を評価して真（1またはそれ以上）の場合は、「&」を変数parmに追加し、偽（i==0）の場合は何も行いません。
その後、【14】で「パラメータ名=値」の組をparmに追加していき、結局次のようなデータ並びの文字列を生成して【15】でChart APIを使用した表示処理を行っています。
parm = 'cht='+cht+'&chtt='+chtt+'&chts='+chts+ '&chdl='+chdl+'&chco'+chco+ '&chs='+chs….Google Chart APIの使い方
グラフ描画ではChart APIを使用していますが、Chart APIはグーグルが提供しているグラフ作成用のWebサービスでJavaScriptからアクセスして使用できます。
【15】では生成されたパラメータと値の組を指定してChart APIでグラフを描画していますが、今回使用したパラメータは次のような意味を持っています。
| パラメータ | 意味 | 設定例 |
|---|---|---|
| cht | グラフのタイプ | lcで折れ線グラフ |
| chtt | グラフのタイトル | - |
| chts | chttのカラーとフォントサイズ | - |
| chdl | 折れ線グラフ描画の凡例 | - |
| chco | 折れ線グラフのカラー | - |
| chs | 図のサイズ | 700x400 |
| chg | グリッド線 | 4,10（[x軸のステップサイズ],[y軸のステップサイズ],[分断線],[空白線]） |
| chxt | 複数軸ラベル（軸タイプ） | x,y |
| chxr | 座標軸のレンジ（値範囲） | 0,0,24|1,0,5000 |
| chxl | 複数軸ラベル（軸ラベル） | 0:|0|1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17 |18|19|20|21|22|23|24|1:|0|1000|2000|3000|4000|5000 |
| chxp | 座標軸ラベルの位置 | - |
| chco | チャートの色 | ffc266 |
| chd | グラフポイントの値 | - |
| chds | グラフの最小、最大値 | - |
| chm | 図形マーカー | o（円） |
| 表1 今回のサンプルで使用したChart APIのパラメータ | ||
なお、Chart APIでのパラメータ指定に関する詳しい内容については、英文ですがGoogleの公式サイトを参照してください。さまざまなチャートサンプルが掲載されており、画面上からパラメータ値を変更して画面表示の変更を確認できる画面なども用意されています。
パラメータ数がかなり多いように見えますが、今回サンプルのように日単位グラフを表示する場合は、前にも触れたように値固定で変化のないものもあるので、データストアに登録するパラメータの数はもっと減らせます。実際に登録されているパラメータは、やや細かくて見づらいかもしれませんが、図8の内容が正確な値で、gaedirectで登録されたものです。
ここで、グラフ図上に折れ線を複数（ここでは前日と今日の2種類）登録する場合は、指定するパラメータ値を「今日|前日」のように「|」で区切ることで区別しています。
gaedirectの環境構築は、もう少し待って
今回はgaedirectでの、簡易セキュリティ対応とグラフ描画を紹介しましたが、次回はGoogle Maps APIでの地図描画への応用を取り上げる予定です。広域に渡る緊急時には、地図上にポイントを指定して情報を提供することも効果的で、よく行われていますが、このような情報もgaedirectで容易にクラウド化でき、それによってアクセスの集中で閲覧不能などにはならない強固なシステムになり得ます。
またgaedirectの機能については、次回は条件検索機能を紹介します。gaedirectの条件検索ではGAEでサポートされる、下記の条件検索機能はすべて実行できます。
- 昇順ソート、降順ソート
- 検索開始エンティティ番号の指定と検索数指定
- ＜（LESS_THAN）
- ≦（LESS_THAN_OR_EQUAL）
- ＝（EQUAL）
- ＞（GREATER_THAN）
- ≧（GREATER_THAN_OR_EQUAL）
- ≠（NOT_EQUAL）
ただし、検索条件の組み合わせなどでは、まだ制限があります。次回はGoogle Maps APIでの地図描画の他に、条件検索のサンプルを紹介する予定です。
条件検索機能の紹介でgaedirectについての機能紹介は、ほぼ一通り終えることになり、次々回にはgaedirectのダウンロードと稼働環境の設定などを紹介する予定です。gaedirectを使ってみたいという方は、次々回までもう少しお待ちください。
＠IT関連記事
リアルタイム株価チャートの基盤フレームを作る
OpenLaszloアドバンスド・テクニック（3） いよいよクールなRIAの作成に着手する。目指すのはリアルタイムに株価の変動を反映する「ローソク足・出来高チャート」だ
「リッチクライアント ＆ 帳票」フォーラム 2006/6/7
Java TIPS
− サーブレットでグラフを描く（JFreeChart活用）
− クリッカブルなグラフを作成する
「Java Solution」フォーラム
Rによるオープン・データの可視化（1）
Rで実践する統計的検定の初歩（3） 今回はパブリックに入手可能な“オープン・データ”とRを使い、人口動態統計や株式相場などのデータを可視化する
「Coding Edge」フォーラム 2010/8/20
オープンソースのグラフ・コントロール「ZedGraph」
連載：VBで実践！ 外部コンポーネント活用術 折れ線グラフや棒グラフなどの2Dグラフを多彩な装飾とともに描画するフリーのコントロールを紹介。Webアプリでも利用できる
「Insider.NET」フォーラム 2008/2/1
Copyright © ITmedia, Inc. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。