Android、Java、Web系、Linux、マラソン等の備忘録

2011/12/29

jQueryのプラグインjqPlotでタスクマネージャのような動的なグラフを作ってみ る

0 件のコメント

前回jqPlotでとりあえずグラフを表示させてみたので、今回は動くグラフを作成してみたいと思います。WS000334 作成するイメージは右図のような感じですが、そこまで細かく表示させるのは割愛します。

あと、実際にCPU使用率を取得したり等のデータは、jQuery外の話になるので擬似的に表示を行うために、タイマーと値を上下させる乱数で実装してみます。

 

サンプルソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqPlottest</title>
<meta name="author" content="prog" />
<!-- Date: 2011-12-26 -->
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css">
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery.jqplot.min.js"></script>
</head>
<script type="text/javascript">
var widthSize=50; // 50刻みで表示
var gbls1 = new Array(); // グラフの値を格納
var gbleCnt = 0;
// 初期化処理
$(document).ready(function() {
// グラフデータを格納する配列を初期化
for(idx=0;idx<widthSize-1;idx++) {
gbls1.push(null);
}
// タスクマネージャのCPU使用率ように0スタートのため最後に0を格納
gbls1.push(0);
setTimeout("display()",1000);
});

function display() {
// 0~99までのランダムな数字を取得
var randnum = Math.floor( Math.random() * 100 );
gbls1.push(randnum);

if( gbls1.length > widthSize) {
// 古いデータを削除
gbls1.shift();
}

// グラフを描画
$.jqplot('graf', [ gbls1 ],{
title:'Random value',
seriesDefaults: {
color: '#22de41', // グラフの色
lineWidth: 1.5, // グラフの線の太さ
showMarker:false  // 値の点を非表示
},
axes: {
yaxis:{ // Y軸の設定
min:0,
max:100
},
xaxis:{ // X軸の設定
min:1,
max:widthSize,
showTicks:false // X軸の値を非表示
}
},
grid: {
gridLineColor: '#149262', // 格子の色
background: '#000000', // 背景の色
borderColor: '#149262' // 枠の色
}
}).replot();
gbleCnt++;
setTimeout("display()",1000);
}

</script>
<body>
<div id="graf" style="width:600px;height:300px"></div>
</body>
</html>


だいたい、ソース内のコメントにある通りですが、display()を繰り返し実行することで、乱数を生成しその値でグラフを描画し直しています。繰り返しの処理は1000msのタイマーで呼んでいます。



Demo Page




気になった所だけ以下に。



初期化処理



前回のソースにあるように、配列に値を入れるだけのグラフのためfor文で配列を初期化しています。分解すると、



gbls1 = [null, null, null, ・・・・(中略)・・・null, 0]



という初期化をしています。タスクマネージャのように、右からグラフが流れてくるのを演出するためです。あとはsetTimeoutでdisplay()メソッドを1000msで呼んでいます。



 



displayメソッド



大きくわけると、




  1. 乱数を生成し配列へ格納


  2. グラフを再描画


  3. 1秒後にdisplayメソッドを呼ぶタイマーをセット


といった所ですかね。1番目は乱数を生成して配列gbls1に追加しています。表示領域以上のデータ数だと古いデータを削除します。



グラフの描画は、replot()している所がアニメーションのポイントです。これをしないと重ねて表示されます。また、グラフ描画でやってることは、ほとんどが背景色やグラフの色などの設定です。なので、これを何度も何度もreplot()させるのは無駄な処理をさせているような気もします。が、ソースをシンプルにするために敢えてこうしました。



詳しい設定等は、ドキュメントや公式サンプルで。


・jqPlot Usage

http://www.jqplot.com/docs/files/usage-txt.html


・Examples | jqPlot

http://www.jqplot.com/tests/



websocketなどで連携させると面白いかもしれませんね。

0 件のコメント :

コメントを投稿