Chart Timezone Issue : X axis wrong

#1

Hello guys, I found a behavior I can't explain, maybe you can help :slight_smile: !
here is my test code :

msg.payload = [{
"series": ["A", "B", "C"],
"data": [
[{ "x": new Date(1504029632890).toUTCString(), "y": 5 },
{ "x": new Date(1504029636001).toUTCString(), "y": 4 },
{ "x": new Date(1504029638656).toUTCString(), "y": 2 }
],
[{ "x": new Date(1504029633514).toUTCString(), "y": 6 },
{ "x": new Date(1504029636622).toUTCString(), "y": 7 },
{ "x": new Date(1504029639539).toUTCString(), "y": 6 }
],
[{ "x": new Date(1504029634400).toUTCString(), "y": 7 },
{ "x": new Date(1504029637959).toUTCString(), "y": 7 },
{ "x": new Date(1504029640317).toUTCString(), "y": 7 }
]
],
"labels": ["A","b","C"]
}]

here is the result :

When I add the .toUTCString() the time is correct for my zone but the X axis is still wrong (GMT +2).
My NodeRed is in the correct GMT.

I searched a little on internet and saw some people with the same problem but no good solution ...

0 Likes

#2

Try Date.toLocaleString();

0 Likes

#3

Why turn those nice timestamps into strings, and send them to the chart as X values? It should do the right thing is you just pass those timestamps in directly:

"data": [
[{ "x": 1504029632890, "y": 5 },
...
0 Likes

#4

Because of tooltip maybe
And then the problem starts. X-axsis and tooltip values show different times.

0 Likes

#5

Then that should be raised as a bug on the dashboard...

The tooltip is meant to be human-readable -- but the charts use UTC timestamps to correctly render the lines, especially when showing in multiple timezones and around Daylight Savings time changes. Since the dashboard line charts are expecting the x-axis to be dates, it detects a timestamp and correctly creates the right date for each point.

DaveCJ will have to elaborate on how the axis tics and tooltips are determining which Locale to use when showing them (typically it uses the browser's timezone and language settings).

0 Likes

#6

Will have a look...
Pushed a fix to master to make the hover match the xAxis formatting

0 Likes

#7

Thanks ! :slight_smile:

0 Likes