Visual Bug with Column Stacked Apex Charts

1

Hi there,

I’m currently working with some column stacked apex charts and I’ve noticed a strange phenomenon.

Normally the chart in question shows the last 24 hours with a 1h aggregation:

image
image1181×340 16.2 KB

So when a new hour starts, like in this case at 16:02h. As the only series whose devices have sent information are the Rack and the AC, they appear to be drawn in front of the whole chart. The other series are left behind.
As you can see, different ‘layers’ have formed:
Those that haven’t sent are stacked behind, and the two that have sent are not stacked.

image
image1185×342 13.5 KB

As I understand it, the correct approach to this would be to draw the 2 series whose devices have send stacked in the new hour column, but not to change the rest of the chart.

Is this a bug?

Thank you in advance,

2

Hi there,

Anyone knows if this is a bug?

3

I’m sorry to say that this still happens every hour.
I’ve checked the json code of the widget as well as the apex charts configuration a thousand times and still can’t find anything wrong.

4

It probably happens earlier in the bucket data, or in the data aggregation.
How is it displayed, if you chose to show the shortest data pace, without aggregation?
You might also try another dashboard with the regular time series (non-Apex) to see which data comes from your aggregation process.
So you might trace down to the culprit.

I’m affraid I can’t help further, I have only a maker account which has no aggregation features.

5

Hi @SRG

We’ve been able to reproduce the issue. After analyzing it we’ve come to the conclusion that it could be a an issue from the Apex Chart library, which they don’t seem acknowledge:

We’ve been able to reproduce this issue a couple of different ways:

  1. When the time series of the chart don’t have the same number of data points. Caused by having different period in data send in the underlying sensor/device.
    Example:
humidity: [[1730304000000,72],[1730304300000,72],[1730304900000,72],[1730305200000,72]]
temperature: [[1730304000000,26],[1730304300000,26],[1730304600000,26],[1730304900000,26],[1730305200000,26]]
  1. When the time series of the chart have the same number of data points but the timestamps of the data points do not align between the series.
    Example:
humidity: [[1730304300000,72],[1730304600000,null],[1730304900000,72],[1730305200000,72],[1730305500000,null]]
temperature: [[1730304000000,26],[1730304300000,26],[1730304600000,26],[1730304900000,26],[1730305200000,26]]

As for Thinger, data was handled like in the first example, without inserting null values in the missing timestamps, and also not aligning the time series, but in order to fix this issue, for the next version of Thinger server, we will give the possibility to align the time series for the apex charts.

For future reference regarding this change/feature, let me hijack this thread to explain the reasoning on to why this is given as an option.

First, the alignment of time series adds an additional overhead on the client device/browser due to the necessary processing required. Secondly, it could have unintended consequences in other types of charts, like line charts for example, in which it will break up the line where the null values are found.
https://apexcharts.com/javascript-chart-demos/line-charts/null-values/

The is currently no option to join data points in a line chart with null values:

Additionally, the alignment of time series will also “fix” an issue regarding the combination of the tooltips on the chart when time series is not aligned, with the downside commented before in which the line chart breaks up when null values are present.

Before:

apex2
apex21017×495 35.6 KB

apex3
apex31052×530 39.7 KB

After:

apex1
apex11052×586 48.7 KB

And finally, when activating the Alignment of Time Series on the Apex Chart, the chart options need to be updated to handle the possibility that null values might be present when executing transformations to labels. So all these:

"formatter": function (val) {
      return val.toFixed(0);
}

Must be converted to:

"formatter": function (val) {
    if ( val !== null )
        return val.toFixed(0);
}

The provided templates will be updated for new charts.

I hope this can fix your issue and stay tuned for the next release!

6

Hi @jaimebs,

That is so nice! Thank you for the provided help with this issue.
Can’t wait for the next release!