ccchart 실시간 히트맵

오늘은 ccchart에서 지난번에 제작한'히트맵 유형'의 실시간 이동 샘플을 소개하고 싶습니다.
참고로 저는 실시간 그래프 ccchart를 잘하는데 그 기본적인 사용 방법에 대한 해설은"여기 있습니다.
Giithub 여기 있습니다.「 WebSocket에서 ccchart로 유입 」
이번에 우리는 지난번 핫맵을 실시간으로 이동할 때의 클라이언트와 웹소켓 서버 측의 코드 샘플을 준비했다.
먼저 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>

이 시위는 이런 느낌이다.시시각각 열도를 그리다.
toshirot/ccchart
서버의 경우 ws:/ccchart.com:8024에서 Websocket으로 데이터를 전송합니다.소스 여기 있습니다. 노드입니다.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에 기술된 hmgrad라는 속성에 따라 색을 바꿀 수도 있습니다.
예를 들어 이런 따뜻한 색계도 괜찮다.
http://jsfiddle.net/UkdvS/593/
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/ 등을 보면 좀 더 상세할 수 있어요.