Dots not connecting right in Apex Chart

Hello good folks in the Thinger community. I’ve been using the apex chart and I often find they don’t properly render the time chart. All is good after opening the page first time, but a while later it shows a connecting line between the latest data point and a previous one in the graph. Here is an example:

2023-08-23_08-48-05

My workaround is to refresh/reload the data. I’m using latest version of Chrome. I see this behavior on desktop and mobile versions.

Is there a way to prevent this from happening?

This happens often when it is loading graphs (usually with huge amount of datapoints) and it is received a new dataset, Idk why but that’s what I’ve detected.

What you are meaning is that having the console open and in first sight it shows this behaviour? Never have had that situation.

Could you provide further detail? as if this is at public or private instance? the amount of datapoint in each bucket’s dataset, also if there are a lot of datapoints being drawed at the whole dashboard and any other particular info you may provide, in order to detect the potential root of this situation.

If I understand correctly, this behavior can occur if a large data set is loading while a new update occur. Like, say it takes a 5 seconds to load a large data set, but updates occur every 1 second, I will likely see this behavior.

I think this is on the right track as the dataset I’m loading is indeed large and the larger it gets, the quicker I see this issue/behavior.

Does Thinger put out any recommendation/best practice for number of data points to render in one chart? Like, if I upload a reading every 1 minute, but I also want to show a chart with all data over a one month. In this example, I will have close to 50K data points, which would appear to be a bit much for an HD monitor at 1920pixels wide resolution. On a private instance I can use a 30 minute aggregate to lower the resolution. But if user tries to zoom in, the details will be lost.

Is there a way to dynamically adjust the number of data points in the chart based sample size and chart width? This would not only be nice, but ensure that I’m not reading more data than needed and therefore avoid the rendering issue altogether.

Hi,

The amount of datapoints recommended to be handled depends mostly on browser and computer resources/capabilities, so there are not a general recommendation beyond to handled the less amount of datapoints allowed by you and your particular process needs.

On other hand 1sec refresh rate is a pretty high frequency, I would recommend to apply some data analisys at end device to deliver for example the max, mean and min values, in a 5 mins timelapse, those 3 values may provide a clear idea about the 1 sec data acquisition without having the need of reading and analize the 300 individual values dataset.

Hope this helps.