ccchartでリアルタイムヒートマップ
今日は、ccchart に前回作った「ヒートマップタイプ」をリアルタイムで動かすサンプルを紹介してみようと思います。
ちなみに、リアルタイムチャートが得意の ccchart ですがその基本的な使い方の解説は「ccchartへWebSocketから流し込む」ここいらへんにあります。
Githubはここです。「toshirot/ccchart」
今回は、前回のヒートマップをリアルタイムに動かす場合のクライアント側とWebSocketサーバー側のコードサンプルを用意しました。
まず、WebSocketでデータを受信しチャート描画を行うクライアント側です。
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata101 = {
"config": {
"title": "リアルタイム ヒートマップ",
"type": "heatmap",
"maxWsColLen":300, //表示するデータの件数
"outerCircle": 70, //円の大きさ
"bg": "#eee" //背景色
},
"data": [
["X"], //X位置
["Y"] //Y位置
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata101)
.ws('ws://ccchart.com:8024')
.on('message', ccchart.wscase.oneColAtATime)
</script>
このデモはこんな感じ。刻々とヒートマップが描画されます。
http://jsfiddle.net/UkdvS/593/
サーバー側は、ws://ccchart.com:8024 から Websocket でデータを送り出しています。ソースはここでは Node.js で書いていてこんな感じ。
var WsServer = require('ws').Server;
var tid;
//WebSocketサーバーを立てる
var ws = new WsServer({
host: 'ccchart.com',
port: 8024
});
broadCast();//データ配信開始
//on connection 接続時の処理(省略可)
ws.on('connection', function(socket) {
//console.log('conned: ' + ws.clients.length);
//これはHeartbeatをする場合だけ(ccchart.jsが自動的にやってくれます)
socket.on('message', function(msg) {
var msg = JSON.stringify(msg);
if(msg === 'Heartbeat'){
socket.send(msg);
console.log(msg);
}
});
});
//データ配信処理
function broadCast(){
//console.log(ws.clients.length)
//300ミリ秒ごとに送出する
tid = setInterval (function(){
var dataAry = mkData();
ws.clients.forEach(function(client) {
if(client.readyState===1)
client.send(JSON.stringify(dataAry));//全クライアントへ送出する
});
}, 300);
}
//ランダムデータを作成
function mkData(){
var data = [
["X"],
["Y"]
];
data[0]=Math.floor(Math.random(10) * 96 );
data[1]=Math.floor(Math.random(10) * 20) + Math.floor(Math.random(10) * 50);
return data;
}
おまけ
リアルタイム処置とは関係ありませんが、configに記述する hm_grad というプロパティで色合いを変えることもできます。
たとえば、こんな感じの暖色系にもできます。
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
//暖色系の色合いのグラデーションを決めておく
var _GRADIENT={
0.1 : 'red',
0.3 : 'red',
0.6 : 'yellow',
1.0 : '#fff'
}
var chartdata102 = {
"config": {
"title": "リアルタイム ヒートマップ",
"type": "heatmap",
"maxWsColLen":100, //表示するデータの件数
"outerCircle": 80, //円の大きさ
"hm_grad": _GRADIENT,//色合い
"bg": "#eee" //背景色
},
"data": [
["X"], //X位置
["Y"] //Y位置
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata102)
.ws('ws://ccchart.com:8024')
.on('message', ccchart.wscase.oneColAtATime)
</script>
このソースのデモは下記にあります。
http://jsfiddle.net/UkdvS/594/
ちなみにこの辺のソース などを見ていただくともう少し詳しくわかるかもしれません。
Author And Source
この問題について(ccchartでリアルタイムヒートマップ), 我々は、より多くの情報をここで見つけました https://qiita.com/toshirot/items/6759502c759760d28420著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .