ここでは、WebSocketサーバーから送り出すJSONデータをccchart用にコンバートする関数とカスタマイズについて簡単に説明します。
ccchart の WebSocket 受信処理は、サーバー側から送り出された JSON を受け取り描画します。
サーバーが送り出すデータパターンはいろいろありますが、ccchartでは、いくつかのJSONデータパターンに対応するため、ccchart.wscase というオブジェクトの中にケースごとの変換関数を用意する仕組みを作りました。
たとえば、次のように ws メソッドの後の on イベントメソッド第二引数へその関数を指定すると、
ccchart
.init('hoge0', chartdata)
.ws('ws://ccchart.com:8016')
.on('message', ccchart.wscase.oneColAtATime)
ccchartはリアルタイムにデータを描画してくれます(サンプル)。
このケースでの oneColAtATime 関数がコンバートしてくれるデータパターンは次のような配列です。
[ ["2013"], [435], [600] ]つまり、一度に1列ずつ送られてくる上記のような配列をたとえば、ccchart の次のようなチャートデータの"deta"配列へコンバートして列挿入します。(表示列数は maxWsColLen で指定します)
{ "config": {
"title": "WebSocket test",
"subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
"type": "bezi2",
"lineWidth": 2,
"minY": 0,
"xScaleSkip": 3,
"maxWsColLen": 18,
"colorSet":
["#DDA0DD","#3CB000"]
}, "data": [
["時分",16：28:10,16：28:11,16：28:12,16：28:13,16：28:14,16：28:15,16：28:16],
["データ1",435,332,524,688,774,825,999],
["データ2",600,335,584,333,457,788,900]
]}
今のところは、このほかに多少雑な実装ですが someColsAtATime という関数もあります。一度に複数列ずつ
[
[
["製品A"],
[435],
[600]
],
[
["製品B"],
[332],
[335]
],
[
["製品C"],
[524],
[584]
]
]といった配列で届く場合です。(サンプル)
ただ、今のところこの二つのパターンしかありません。そこで、もし他のパターンを利用したい場合は、このccchart.wscaseオブジェクト下へ‘自分で‘ カスタマイズ関数を追加して利用します。
コードの例は、ccchart.js内のスクリプトを読んでいただければと思いますが、とりあえず、何も変換しないパターンを例示しておきます。
つまり、次のような ccchart.initのチャートデータとして、そのまますぐに利用できるデータパターンの場合です。
//こんなパターンのJSONデータをサーバーから出力する場合
[
["日時","00:00","","","","01:00",""],
["製品A","1","4","12","10","0","5"],
["製品B","35","62","56","42","70","60"]
]
このソースは次の通り。
//チャートデータ
var chartdata = {
"config": {
"title": "Customized function for JSON Patterns",
"subTitle": "リアルタイム受信描画",
"type": "bar",
"lineWidth": 2,
"maxY": 150,
"minY": 0,
"xLines": [
{"val":50,"color":"rgba(0,255,255, 0.6)","width":"1"}
],
"colorSet":
["#DDA0DD","#3CB000"]
},
"data": [//こんなタイプのパターン つまり通常通り
["日時","00:00","","","","01:00",""],
["製品A","1","4","12","10","0","5"],
["製品B","35","62","56","42","70","60"]
]
};
//これがカスタマイズした関数。ccchartへ追加する
ccchart.wscase.testCase = function (msg) {
// こんな風に使います ws.on('message', ccchart.wscase.testCase)
//受信処理
try { var msgs = JSON.parse(msg.data); } catch(e) { return }
//加工せずにそのまま代入する。( this.op.idはこの場合canvasのid名 'hoge' です)
ccchart.ops['hoge'].op.data = msgs;
//再起へ
ccchart.init('hoge', ccchart.ops[this.op.id].op);
}
ccchart.wsCloseAll();//念のために一旦クリア
//実行
ccchart
.init('hoge', chartdata)
.ws('ws://ccchart.com:8031')
.on('message', ccchart.wscase.testCase)
このサーバーから届いたmsgデータのフォーマットを「加工せずにそのまま代入」している場所で、配列の組み換えを行うことで、さまざまなパターンに対応させることができます。
あと、この辺も参考になるかも＞ ccchartへWebSocketから流し込む
※追記 2014/3/3 近々ccchartでプラグインを追加できるバージョンをリリースしますので、この関数はそれで追加すると便利になるかも。こうご期待＾＾
<canvas id="hoge2"></canvas>
<script>
var chartdata = {
"config": {
"title": "allColsAtATime at v1.12.03",
"subTitle": "リアルタイム受信描画",
"type": "bar",
"maxY": 150,
"minY": 0,
"xLines": [
{"val":50,"color":"rgba(0,255,255, 0.6)","width":"1"}
],
"colorSet":
["#DDA0DD","#3CB000"]
},
"data": [//こんなパターン
["日時","00:00","","","","01:00",""],
["製品A","1","4","12","10","0","5"],
["製品B","35","62","56","42","70","60"]
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge2', chartdata)
.ws('ws://ccchart.com:8031')
.on('message', ccchart.wscase.allColsAtATime)
</script>