忍者ブログ
[PR]
×

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



2017/04/30 18:10 |
Dojo1.6.1 dojo Dojo道場07 dojox.charting.Chart2Dでリアルタイム更新
前回の続き。
今回は一度作成したグラフを更新します。
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()で新しいアイテムの追加を行うことができます。
データストアにアイテムを突っ込んでいるだけですが、画面も自動的に更新されます。すこしふしぎ。
PR


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

トラックバック

トラックバックURL:
前回の続き。 これまでdojoで作ってきたグラフは単に表示するだけでした。 いよいよグラフに対し動的な変化を与えてやりましょう。 dojox.charting.Chart2D.setAxisWindowメソッドでスケールの変更を行うことができます。 あとはその値を設定するインターフェイスを追加するだけです。 <html> <head> <meta http-equiv="Content-Type" content=&quo...
弱小PHPerの憂鬱 | 2011/07/01 21:58

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<XBOX360春のSTG祭り | HOME | データベーススペシャリストを受けてきた>>
忍者ブログ[PR]