Line Graph Point Connection Bug
- This topic has 25 replies, 4 voices, and was last updated 7 years, 8 months ago by
.
-
I’ve just tried posting this but I believe there was an error, so my apologies if this is posted twice
I’m trying to use CanvasJS to display some data in real-time from a SQL DB.
This data is added periodically every 10th of a second.I am achieving this by sending an AJAX request to the PHP server with the ID of the last record previously retrieved, which then replies with all the records currently adter this ID. Upon the JS (JavaScript) getting this, the data is then added to the graph in CanvasJS. The JS-side keeps track of 24 hours worth of data, so it will only ever contain a maximum of 24 hour-old data at once; however, I am encountering some unusual issues with the graph when the points are added. In the following screenshot(s) the data is shown in real-time, but only 1 minute’s worth of data is shown.
As seen in the screenshot above, some of the points are connected to unrelated previous points. Focusing on the time stamp, if the page is refreshed (the past 24 hour’s worth of data is retrieved again), this behaviour is not replicated again, as seen below:
My first assumption was that there was some mistake with the data in the database; however the subsequent screenshot shows that the data is in the correct order and hence should not be causing the problem:
(Yes, I know some of the IDs are missing – this is due to multiple machines feeding data to ensure that the 10th-second-interval is met, even so, this should not cause an issue that I can think of).I have also implemented a “pause” button to the graph, which stops the interval of continuously requesting recent data until “played” again. This uses the same request system, retrieving all after the previous ID (as it would do in real-time). The below screenshot indicates the time period spent paused by the red box:
The problem of the connecting points does not seem to occur when the graph is “paused” (the interval is cleared and started again at a later date).This problem does not occur when the data is submitted at 1 second intervals, only at 0.1 second intervals. Despite this, I would like to pursue with the 0.1 second intervals for the increased level of accuracy.
Hi @Vishwas R, I use this code to update my chart:
function updateEcg() {
$.getJSON(“/data_ecg.php”, function (result) {
if (dataLength !== result.length) {
for (var i = dataLength; i < result.length; i++) {
data.push({
x: parseInt(result[i].valuex),
y: parseFloat(result[i].valuey)});
if (data.length > 478) {
data.shift(); }}
dataLength = result.length;
chart.render();}});}
How you can see I parse my valueX to Int , and yes some of my X values are not in order, I attach you an image (
) where you can see that the counter is not having order when it is inserting. Do you know how can I sort my X values to have a good chart?data.sort((a,b)=>a-b);works on array but not on array of objects. You need to sort it manually to handle it. Please chek out the code-snippet to sort datapoints below.for (var i = 0; i < dataPoints.length - 1; i++) { if (dataPoints[i].x > dataPoints[i + 1].x) { var temp = dataPoints[i]; dataPoints[i] = dataPoints[i + 1]; dataPoints[i + 1] = temp; i = 0; } }Please check this JSFiddle for complete code.
Also please refer to this documentation page for tutorial on dynamically updating chart from JSON data.
—
Vishwas RThe dataPoints in your chart are scrambled as the dataPoints parsed from the JSON aren’t sorted. As mentioned in previous reply, sorting the datapoints should work fine in this case. Please take a look at this JSFiddle.
__
Suyash,
Team CanvasJS
You must be logged in to reply to this topic.