Plotrでグリッドデータからグラフ表示
DWR、ActiveWidgetsとPotrでのグラフ表示を組み合わせる
このサンプルではグリッド表示ではActiveWidgetsを、サーバーリモーティングではDWR（Direct Web Remoting）を使用しています。この組み合わせについては、「第2回：DWRでAjaxプログラムをかんたん作成！（http://www.thinkit.co.jp/article/136/2/）」で紹介しているので、この部分のプログラムについてはそちらを参照してください。
図3（上）では「第3回：応用編！Excel的な機能を追加しよう（http://www.thinkit.co.jp/article/136/3/）」を使用した東京都区の人口データが表示されていますが、このデータから棒グラフを表示した例が図3（下）になります。なお、グリッド表示画面は第3回で紹介したものに比べて操作オプション項目が増えていますが、今回説明する部分については変更ありません。
最初に図3（下）のグラフ表示までの操作手順を説明します。
まず、図3（上）で、画面上部の「グラフ」をクリックすると、表示が赤色に変わり、その下のメニュー項目がグラフ表示でのオプション選択項目に変わります。
次にグラフ表示形式を選択します。ここでは「棒グラフ（横）」を選択します。
あとはデフォルトの「フィルカラー」をそのままにして、グラフカラーで「グレイ」を選択します。グラフ表示の準備はこれで完了です。
最後に図3（上）で、例えばグリッドの1行1列（千代田区総人口）と4行5列（新宿区世帯数）をクリックすれば、図3（下）のような横形式の棒グラフが表示されます。
グリッドデータからグラフ表示のプログラミング
それでは、グリッドデータからのグラフ表示手順を紹介します。ここでは、グラフ表示の準備までのステップの処理は省略し、最後のグラフ表示のプログラム処理について解説します。
グラフ化対象グリッド指定で、グリッド上の2点をクリックするとshowGraphが呼び出されます。showGraphはグラフ表示のすべての処理を行う関数ですが、順に全プログラムコードを見ていきましょう。
リスト3の初期設定では4行目からのif文処理がポイントです。ここでは、順にクリックされた2点値（行値と列値）の大小関係に関係なくグラフ表示を行うための調整をしています。
マウスクリックで2点を選択する時、例えば最初に左上のセルを選択し、2回目で右下を選択する、あるいは右下を先に選択し、2回目に左上を選択するなど4種類のパターンがあります。そこでif文処理を使って、どのパターンでポイントした場合でも問題なくグラフ表示できるようにしています。
次にリスト4のグラフデータの配列生成を行うプログラム処理を見ていきましょう。この部分ではdatasetオブジェクトを生成し、グラフ表示に必要なデータを格納していますが、この処理はfor文ネスト処理で行われています。
for文内では、最初に選択範囲セルの列数に対応する配列garrayが生成されます。
for(var i = 0; i
var garray = new Array(cols);
内側のfor文で、最初の要素値がj、2番目の要素値が選択したグラフデータに対応する2つの要素数で配列を作成して、garrayの各要素にセットします。
for(var j = 0; j
garray[j] = new Array(j, parseFloat(cdat[r0 + i][c0 + j]));
以上の処理で作成した配列garrayをdatasetオブジェクトのi番目のキー"item"+iの値とします。これをfor文で選択行数分繰り返すことにより、連想配列datasetが作成されます。
グラフ表示用の連想配列生成後、オプション項目を設定します。オプション項目の設定では、図3（下）のグラフ表示で、Y軸タイトルとなっている「人口総数」「男性」「女性」などのテキストを連想配列で作成していきます。
タイトルテキストは、labelキーに対する値になりますが、これはグリッドデータcdat配列の0行のデータ項目に該当しており、for文の繰り返し選択範囲を対応させて、値を取得します。
その後、連想配列optionsにパディングや背景色などの基本項目、および上で取得したxTicksのデータを設定しておきます。さらにグラフカラーなどのオプション指定に対応する項目をObject.extendメソッドで連想配列に追加しています。このように連想配列では、プロパティを後から任意に追加できる点が便利です。
以上の準備ができれば、グラフ表示を行います。リスト6のグラフ表示ではif文判断で画面から選択されたグラフ形式、つまり棒グラフ、折れ線グラフ、円グラフに対応したオブジェクトを生成しています。
ただ、棒グラフではグラフの縦表示または横表示の選択があり、図3（下）のような横表示の場合はbarOrientation: 'horizontal'をオプション項目に追加しています。
Object.extend(options,{ barOrientation: 'horizontal'});
このようにグラフ形式に対応したオブジェクトを生成後、render()メソッドでボックスへの棒グラフ描画が行われ、prototype.jsのshow()実行によりWebブラウザ上に表示されます。
