Dojo1.6.1 dojo Dojo道場07 dojox.charting.Chart2Dでリアルタイム更新

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/23 14:47 |

前回の続き。
今回は一度作成したグラフを更新します。
http://codezine.jp/article/detail/5572?p=2

既にグラフの表示自体はできているのでたいして難しいことはありません。
グラフの画面描画はrender()メソッドですが、実は一旦render()してしまえば後はストアに値を突っ込むだけで勝手に画面が更新されます。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.charting.DataSeries");
		dojo.require("dojo.data.ItemFileWriteStore");
		dojo.require("dojox.charting.Chart2D");
		
		var drawChart = function(){
			
			//ダミーのストア
				var store = new dojo.data.ItemFileWriteStore({data:{items:[]}});
			
			//折れ線グラフ
				var myChart = new dojox.charting.Chart2D("myChart");
				myChart.addPlot("default", {type: "Lines"});
				myChart.addAxis("x");
				myChart.addAxis("y", {vertical: true});
				myChart.addPlot("grid", {type: "Grid"});
				myChart.addSeries("stockprice", new dojox.charting.DataSeries(store));
				myChart.render();
			
			//1秒毎に繰り返し
				var i = 1;
				var reloadInterval = setInterval(addItemFileWriteStore, 1000);
				function addItemFileWriteStore(){
					if (i < 30) {
						var val = Math.floor(Math.random() * 1000);
						store.newItem({value: val});
					} else {
						clearInterval(reloadInterval);
					}
					i++;
				}
		}
		//起動時実行
		dojo.addOnLoad(drawChart);
		
	</script>
</head>
<body>
	<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>

見てのとおり、05回のストアにnewItem()メソッドを追加しただけです。

JavaScriptには必須ってわかってはいるんだけど、個人的に無名関数ってちょっと苦手。
なので不要なaddItemFileWriteStore()関数が入ってます。

本来addItemFileWriteStore()の中身はどこかの配信サーバから最新情報を取得してどうこうという形になりますが、今回は単にランダム値を生成しています。
dojo.data.ItemFileWriteStore.newItem()で新しいアイテムの追加を行うことができます。
データストアにアイテムを突っ込んでいるだけですが、画面も自動的に更新されます。すこしふしぎ。

2011/06/27 22:30 | Comments(0) | TrackBack() | JavaScript