ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  003  (積み上げる面(Area)図) 実験 (動くかな?)

///////

///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata88 = {

  "config": {
    "title": "WebSocket stackedPercent Chart",
    "subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
    "type": "stacked%",
    "bg": "orange",
    "textColor": "#000",
    "valColor": ["rgba(255,200,200,0.9)","rgba(255,0,255,0.9)","rgba(255,255,0,1)"],
    "colorSet": 
          ["rgba(255,0,0,0.7)","rgba(255,0,255,0.6)","rgba(255,255,0,1)"],
    "useMarker": "arc",
    "useVal": "yes"
  },

  "data": [
    ["Time"],
    ["紅茶"],
    ["コーヒー"],
    ["ジュース"]
  ]
};


  ccchart.wsCloseAll();//一旦クリア
  ccchart
      .init('hoge', chartdata88,
        function () {
          this
            .ws('ws://ccchart.com:8018')
            .on('message', ccchart.wscase.oneColAtATime)
        }
      );

</script>
///////