ccchartでリアルタイムヒートマップ #JavaScript

今日は、ccchart に前回作った「ヒートマップタイプ」をリアルタイムで動かすサンプルを紹介してみようと思います。

ちなみに、リアルタイムチャートが得意の ccchart ですがその基本的な使い方の解説は「ccchartへWebSocketから流し込む」ここいらへんにあります。

Githubはここです。「toshirot/ccchart」

今回は、前回のヒートマップをリアルタイムに動かす場合のクライアント側とWebSocketサーバー側のコードサンプルを用意しました。

まず、WebSocketでデータを受信しチャート描画を行うクライアント側です。

html

<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 で書いていてこんな感じ。

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 というプロパティで色合いを変えることもできます。

たとえば、こんな感じの暖色系にもできます。

html

<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/

ちなみにこの辺のソース　などを見ていただくともう少し詳しくわかるかもしれません。