数値データのグラフ化には通常エクセルを利用しますが、Webブラウザ に実装されている
SVGという描画機能を利用すれば、グラフの作成ツールや画像の用意の必要は一切なく
ブラウザの機能のみでグラフ表示が実現可能です。
SVGとは Scalable Vector Graphics の略称です。
Webブラウザ上に線や円などのベクトル図形を表示するためのXMLベースのタグ言語で、
InternetExplorer 9 以降、およびFirefox、Chrome、Opera、Safariでサポートされています。

「グラフ表示」を取り入れれば、データ推移、比較等が一目でわかりよりユーザーにとって
より使いやすいものとなります。

実際のグラフ表示の例として次の画面をご覧下さい。

左メニューより項目をクリックすると右画面に

• ■ 売上比率表 【円グラフ】
  
• ■ 売上達成率表 【折れ線グラフ】
  
• ■ 保有状況表 【棒グラフ】
  

の初期画面が表示されます。

このサンプルは SVG＋Ajax を利用して、
非同期通信によるグラフ表示を行っています。
右画面のコンボボックスのうち「年度」と「事業」を選択するとグラフが表示されます。
(保有状況表は「事業」のみです)

いずれも次の図のように、ブラウザからのリクエストに対してサーバーから XML のレスポンスを
受け取り、そのXMLデータを基に SVG+Javascript で動的ににグラフを生成/表示しています。

Ajaxによるリクエスト

サーバーへのリクエストは、コンボボックスの内容が変更された際に非同期で行われます。
リクエストには次の Javascript を使用します。

new Ajax.Request('リクエストURL',{method:"GET", onComplete:setGrph,onFailure:err});

この Javascript が実行されると、リクエストURL の値をサーバーに要求して、結果が戻れば
setGrph というメソッドが実行されます。
リクエストURL の値は、コンボ・ボックスの内容に応じて書き換えられます。

レスポンスされるXMLデータの形式

リクエストを受けたサーバーは、次のような形式の XMLデータを生成してレスポンスを返します。

<?xml version="1.0" encoding="Shift_JIS" ?>
<RESULT>
  <DATA>
    <TUKI>2014/08</TUKI>　･･･　�@
    <HOYUSU>10000</HOYUSU>　･･･　�A
  </DATA>
  <DATA>
    <TUKI>2014/09</TUKI>
    <HOYUSU>2000</HOYUSU>
  </DATA>
     :
</RESULT>

レスポンスされるデータベースの内容は１レコード毎に <DATA>〜</DATA>タグに分割して
格納します。
レコードの各値は �@、�A のように <DATA>タグ内に個別のタグで格納されます。
例えば年月を表す値が <TUKI>タグ（�@）、保有数を表す値が <HOYUSU>タグ（�A）内へ
格納されています。

このXMLデータをJavascriptによって DOM解析し、SVG を利用して次のようなグラフとして
表示されます。
<TUKI>タグの値は �@ の箇所に 年月 として表示します。
<HOYUSU>タグの値は �A のように値と、それに応じた グラフ として表示します。