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

今日は、[ccchart](http://ccchart.com) に前回作った「[ヒートマップタイプ](http://qiita.com/toshirot/items/eedeb1cb2b9597b63509)」をリアルタイムで動かすサンプルを紹介してみようと思います。

![alt](https://camo.githubusercontent.com/78e5158564cc88e1a21dcfc8ffe15917e080d2fa/687474703a2f2f636363686172742e636f6d2f746573742f686561746d61702f312e31312e303762342d686561746d61702d6d6b352e706e67)

ちなみに、リアルタイムチャートが得意の ccchart ですがその基本的な使い方の解説は「[ccchartへWebSocketから流し込む](http://qiita.com/toshirot/items/a461cdc8c2079d9b8530)」ここいらへんにあります。

Githubはここです。「[toshirot/ccchart](https://github.com/toshirot/ccchart)」

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

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

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

```lang: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;
} 
```

<h5>おまけ</h5>
リアルタイム処置とは関係ありませんが、configに記述する hm_grad というプロパティで色合いを変えることもできます。

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

![alt](http://ccchart.org/test/heatmap/img/heat2.png)

```lang: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/

ちなみに[この辺のソース](http://ccchart.org/test/heatmap/test1-hmp-v1.12.01-ws.htm)　などを見ていただくともう少し詳しくわかるかもしれません。