I'm in the process of setting up a live streaming data chart that reads data from a page displaying the most recent data points every second. I am utilizing the chart.js-plugin-streaming plugin developed by nagix for this task.
The challenge I'm facing is that the data resolution varies based on the sensor connected to the backend. Some sensors produce 1 data point per second while others generate 10 data points per second. Refreshing the chart at a high frequency could strain processing power and overload sensor requests, especially on older computers.
To address this issue, I designed a system where the URL outputs an array containing the last 20 data points (equivalent to approximately 2 to 20 seconds of data) and refreshes the chart once per second.
However, instead of only appending new data points to the existing chart, I encountered unexpected behavior. Upon checking the timestamps, they appear to be accurate.
The data array is fetched using a simple jQuery $.get() call to a Django view URL responsible for generating the data array each time it's called.
Here's an example of the URL output structure for a sensor producing 1 data point per second:
[
{y: 0.74, x: 1558531380957},
{y: 0.96, x: 1558531379950},
{y: 1.08, x: 1558531378942},
...
]
Upon subsequent calls, the first data point is removed, and a new data point is added to the end of the array, creating a scrolling effect.
The objects within the array are formatted as follows:
{"y": <float>, "x": <timestamp-in-ms>}My current chart configuration:
$(document).ready(function() {
// Chart settings
});
While the chart functions correctly overall, the issue arises with how the lines connect between data points, resulting in unintended line patterns. The graph appears to create new lines upon fetching new data rather than refreshing them properly. This is causing inconsistencies in the graph display.
If you would like to see more details regarding the issue, check out this Example GIF showcasing the problem in action.
Currently, I'm uncertain about what exactly may be causing this behavior. Although the chart is functional and accurately represents the data, there are concerns about how the lines are connecting between different data points, as highlighted in the GIF demonstration.