プラグイン ccchart.wscase.plain

v0.01 WebSocket受信データパターン: プレーン

毎回ccchartのデータ形式で受け取りそのまま表示します

       ccchartのWebSocket用受信パターンのデフォルトはoneColAtATime 関数で
       下記のような1列ずつの配列を連続受信してチャートを描画しますが
       
       [
         ["2013"],
         [435],
         [600]
       ]
    
       このプラグインは、毎回下記のようなccchartのデータ形式で送ります
       
       [
         ["時間","00:00","00:01","00:02","00:03","00:04","00:05"],
         ["製品A","1","4","12","10","0","5"],
         ["製品B","35","62","56","42","70","60"]
       ]
       
       たとえば、下記のように起動します 
       
       ccchart
          .init('hoge', chartdata)
          .ws('ws://ccchart.com:8031')
          .on('message', ccchart.wscase.plain)
          
          
    参考WebSocketサーバーが送り出すJSONデータのためのコンバート関数
    

<script src="http://ccchart.org/js/ccchart-v1.08.3.js" charset="utf-8"></script>
<script src="http://ccchart.org/plugins/ws/wscase/plain/ccchart.wscase-plain-v0.01.js" charset="utf-8"></script>
<canvas id="hoge1"></canvas>
<script>
  //チャートデータ
  var chartdata = {

    "config": {
      "title": "ccchart.wscase.plain Patterns",
      "subTitle": "WebSocketのリアルタイム受信パターン plain",
      "type": "bar",
      "lineWidth": 2,
      "maxY": 150,
      "minY": 0,
      "xLines": [
          {"val":50,"color":"rgba(0,255,255, 0.6)","width":"1"}
      ],
      "colorSet": 
            ["#DDA0DD","#3CB000"]
    },

    "data": [//こんなタイプのパターン つまり通常通り
       ["日時","00:00","","","","01:00",""],
       ["製品A","1","4","12","10","0","5"],
       ["製品B","35","62","56","42","70","60"]
     ]
  };
  ccchart.wsCloseAll();//念のために一旦クリア

  //実行
  ccchart
      .init('hoge', chartdata)
      .ws('ws://ccchart.com:8031')
      .on('message', ccchart.wscase.plain)
</script>