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/ 등을 보면 좀 더 상세할 수 있어요.

좋은 웹페이지 즐겨찾기