3. リアルタイムの更新
前節ではデータAPIを用いてグラフを描画しましたが、データAPIを利用してデータを更新すると、グラフが自動的に再描画されます。これを利用して、簡単にグラフのリアルタイム更新が実現できます。
以下の例では、日経平均株価推移グラフにデータを追加して、リアルタイムにグラフを更新します。このサンプルでは1秒ごとにランダムなデータを追加していますが、実際のアプリケーションでは定期的にdojo.xhrなどでサーバに問い合わせて、得られたデータを追加すれば良いでしょう。
以下のコードを前節のサンプル・コードの直後に追加します。グラフが描画された後、setIntervalメソッドで設定された関数が1秒ごとに呼ばれるようになります。
// グラフを1秒ごとに10回更新
var i = 0;
var updateInterval = setInterval(function() {
if (i < 10) {
// ランダムに 9150 ~ 9250 の値を追加する
var val = Math.floor(9150 + Math.random() * 100);
store.newItem({value: val});
} else {
clearInterval(updateInterval);
}
i++;
}, 1000);
実行結果例（10秒後）
4. ズームとスクロール
Dojo Toolkitのグラフでは、各軸に対してズームや表示開始位置の変更が可能です。この節では、ある会社の各月の新規契約数を、1年、6か月、3か月と表示期間を変更する例を考えましょう。表示期間の変更にはChart2Dの次のメソッドを使用します。
・setAxisWindow(/*String*/name, /*Number*/scale, /*Number*/offset, /*Boolean|Object*/zoom)
第1引数のnameで対象となる軸、第2引数のscaleで対象となる軸の拡大率、第3引数のoffsetで表示開始位置を目盛単位で指定します。第4引数（省略可能）のzoomで拡大／縮小する際のアニメーションを指定します。
また、1年、6か月、3か月と表示期間の変更を行うユーザー・インターフェースには、RadioButtonウィジェットを使用します。
<html>
<head>
<!-- IE7 互換モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<!-- ウィジェット用テーマを読み込み -->
<style type="text/css">
@import "../dojo-release-1.5.0/dojo/resources/dojo.css";
@import "../dojo-release-1.5.0/dijit/themes/claro/claro.css";
</style>
<!-- dojo の読み込み -->
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true">
</script>
<script type="text/javascript">
// Chart2D 読み込み
dojo.require("dojox.charting.Chart2D");
// DataSeries 読み込み
dojo.require("dojox.charting.DataSeries");
// ストア読み込み
dojo.require("dojo.data.ItemFileWriteStore");
// グラフ用スタイル読み込み
dojo.require("dojox.charting.themes.PrimaryColors");
// フォーム・ウィジェット読み込み
dojo.require("dijit.form.Form");
// ラジオ・ボタン・ウィジェット読み込み
dojo.require("dijit.form.RadioButton");
var myChart;
var drawChart = function(){
var store = new dojo.data.ItemFileWriteStore({
data:{items:[
{value: 20}, {value: 17},
{value: 21}, {value: 31},
{value: 41}, {value: 41},
{value: 31}, {value: 28},
{value: 21}, {value: 20},
{value: 32}, {value: 33}
]}
});
var labels = [
{value: 1, text: "4月"}, {value: 2, text: "5月"},
{value: 3, text: "6月"}, {value: 4, text: "7月"},
{value: 5, text: "8月"}, {value: 6, text: "9月"},
{value: 7, text: "10月"}, {value: 8, text: "11月"},
{value: 9, text: "12月"}, {value: 10, text: "1月"},
{value: 11, text: "2月"}, {value: 12, text: "3月"}
];
myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
myChart.addPlot("grid", {type: "Grid"});
myChart.addSeries("月別新規契約数", new dojox.charting.DataSeries(store));
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
myChart.setTheme(dojox.charting.themes.PrimaryColors);
myChart.render();
}
var changeView = function(/*Number*/span){
// ラジオ・ボタン・ウィジェット取得
var button = dijit.byId(span + "months");
if(button.get("checked")){
// 拡大率の計算
var sx = (12 - 1) / (span - 1);
// グラフの表示期間変更
myChart.setAxisWindow("x", sx, 12 - span);
// 再描画
myChart.render();
}
}
// dojo のパース完了後に drawChart 関数を呼び出す
dojo.addOnLoad(drawChart);
</script>
</head>
<body class="claro">
<!-- 表示期間変更用ラジオ・ボタン -->
<form dojoType="dijit.form.Form">
<input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(3)" name="span" id="3months"/>
<label for="3months">3ヶ月</label>
<input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(6)" name="span" id="6months"/>
<label for="6months">6ヶ月</label>
<input type="radio" dojoType="dijit.form.RadioButton" onChange="changeView(12)" name="span" id="12months" checked/>
<label for="12months">1年</label>
</form>
<!-- グラフを表示するための DOM ノードには高さと幅を指定 -->
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
実行結果（表示期間：1年）
実行結果（表示期間：6か月）
