ccchart
http://ccchart.com
デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。
ということで、当面は「ccchart」で遊ぶ。
///////
ccchart 011 (棒グラフ 縦 図) 実験 (動くかな?)
///////
///////
///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata80 = {
"config": {
"title": "WS Bar Chart",
"subTitle": "WebSocketで列データをリアルタイム受信し追記描画する",
"type": "bar",
"maxY": 100,
"minY": 0,
"barWidth": 24,
"useVal": "yes",
"maxWsColLen": 4,
"textColors": {"title":"#222","subTitle":"#222","hanrei":"#777","unit":"#777"
},
"colorSet":
["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
"shadows": {"all":["#444",5,5,5]}
},
"data": [
["種別"],
["朝"],
["昼"],
["夜"]
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata80,
function () {
this
.ws('ws://ccchart.com:8017')
.on('message', ccchart.wscase.someColsAtATime)
}
);
</script>
///////