$ cd ./YourDir $ npm i -g bower $ bower i ccchart ccchart directory has been generated. YourDir/   bower_components/     ccchart/         README.md         ccchart-min.js         ccchart.js         update.json         plugins/

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script> <canvas id="hoge"></canvas> <script> var chartdata1 = {   "config": {     "title": "Bar Chart",     "type": "bar"   },   "data": [     ["Year",2007,2008,2009,2010,2011,2012,2013],     ["Tea",435,332,524,688,774,825,999],     ["Coffee",600,335,584,333,457,788,900],     ["Juice",60,435,456,352,567,678,1260],     ["Oolong",200,123,312,200,402,300,512]   ] }; ccchart.init('hoge', chartdata1) </script> 

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script> <canvas id="hoge"></canvas> <script> var chartdata1 = {   "config": {     "title": "Option useMarker",     "subTitle": "useMarker: maru",     "type": "line",     "useMarker": "maru",     "lineWidth": 6,     "markerWidth": 15   },   "data": [     ["Year",2007,2008,2009,2010,2011,2012,2013],     ["Tea",435,332,524,688,774,825,999],     ["Coffee",600,335,584,333,457,788,900],     ["Juice",60,435,456,352,567,678,1260],     ["Oolong",200,123,312,200,402,300,512]   ] }; ccchart.init('hoge', chartdata1) </script> 

<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script> <canvas id="hoge"></canvas> <script> var chartdata1 = {   "config": {     "title": "WebSocket test",     "subTitle": "realtime chart",     "type": "bezi2",     "lineWidth": 2,     "minY": 0,     "xScaleSkip": 3,     "maxWsColLen": 18,     "colorSet":           ["#DDA0DD","#3CB000"]   },   "data": [     ["time"],     ["data1"],     ["data2"]   ] };   ccchart       .init('hoge', chartdata1)       .ws('ws://ccchart.com:8016')       .on('message', ccchart.wscase.oneColAtATime) </script> 

var WsServer = require('ws').Server; var tid; var ws = new WsServer({     host: 'ccchart.com',     port: 8016 }); broadCast();//start function broadCast() {     tid = setInterval(function() {         var dataAry = mkData();         ws.clients.forEach(function(client) {             if (client.readyState === 1)                 client.send(JSON.stringify(dataAry));         });     }, 200); } function mkData() {     var data = [         ["Year"],         ["s2"],         ["s3"]     ];     var now = new Date();     var H = now.getHours();     var M = now.getMinutes();     var S = now.getSeconds();     H = (H < 10) ? '0' + H : H;     M = (M < 10) ? '0' + M : M;     S = (S < 10) ? '0' + S : S;     data[0] = H + ':' + M + ':' + S;     data[1] = Math.floor(Math.random(10) * 96);     data[2] = 32 + Math.floor(Math.random(10) * 18);     return data; } //on connection for Heartbeat　これはハートビート用なのでいらなければ無くてもOK // ccchart はデフォルトでは60秒に一度"Heartbeat"という文字列を // サーバーへ送り、その返信である"Heartbeat"文字列を受信しています ws.on('connection', function(socket) {     console.log(         'conned: ' + ws.clients.length, (new Date),         socket.upgradeReq.socket.remoteAddress     );     socket.on('message', function(msg) {         var msg = JSON.stringify(msg);         if (msg === 'Heartbeat') {             if (socket.readyState === 1) {                 socket.send(msg);                 console.log(msg);             }         }     }); });