[Chartjs]-How to update chart.js on websocket event?

by

1👍

The problem is you are updating your data “lineChartData” but you want to call update() on the chart

so 

ws.onmessage = function(evt) {
                var received_msg = JSON.parse(evt.data)
                alert(received_msg[0]);
                alert(received_msg[1]);
                lineChartData.labels = received_msg[0];
                lineChartData.datasets[0].data = received_msg[1];
                window.myLine.update(); //<-- magic

            };

-2👍

If you draw a chart other than chart.js
For example, ccchart

http://jsfiddle.net/UkdvS/602/
https://github.com/toshirot/ccchart

    var chartdata81 = {
      "config": {
        "title": "WebSocket Line Chart",
        "subTitle": "realtime",
        "bg": "#666",
        "type": "line",
        "xLines": [{
                    "useRow":1,
                    "color":"rgba(250,250,250,0.7)"
        }]
      },
      "data": [
        ["year"],
        ["data1"],
        ["data2"]
      ]
    };

    ccchart
    .init('hoge', chartdata81)
    .ws('ws://ccchart.com:8016')
    .on('message', ccchart.wscase.oneColAtATime);

WebSocket data format at this time is as follows:

["23:41:47",58,41]
["23:41:47",30,46]
["23:41:47",7,35]
["23:41:47",46,34]
["23:41:47",59,41]
["23:41:47",95,47]
["23:41:47",22,40]
["23:41:47",73,35]
・・・・
・・・・
・・・・

@see qiita.com/toshirot/items/a461cdc8c2079d9b8530　(japanese)

Leave a comment