How to update chart.js on websocket event?
Question
I'm trying to update the data of Line chart.js using the .update() method when date is received from a websocket but this is not working and i can't get the problem. This is my code :
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="js/Chart.js"></script>
<script type="text/javascript">
if ("WebSocket" in window) {
var ws = new WebSocket("ws://localhost:8888/ws");
ws.onopen = function() {
ws.send("data");
};
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];
lineChartData.update();
};
ws.onclose = function() {
// websocket is closed.
console.log("Connection is closed...");
};
} else {
// The browser doesn't support WebSocket
console.log("WebSocket NOT supported by your Browser!");
}
</script>
</head>
<body>
<div style="width:70%">
<div>
<canvas id="canvas" height="450" width="800"></canvas>
</div>
</div>
<script>
var lineChartData = {
labels: [],
datasets: [{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: []
}]
}
var options = {
responsive: true,
scaleShowGridLines: false,
scaleLineColor: "rgba(0,0,0,.1)",
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, options);
</script>
</body>
</html>
This is the part when i want to update the chart :
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];
lineChartData.update();
};
From the alert output i'm receiving the good data in the good format but update is not working.
can you help me please ?
2 answers
solution1
0 2018-12-14 10:42:07
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
};
solution2
-2 2016-04-23 00:03:49
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)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.