[Perspective XY Chart] X-Axis date offset by 1 hour

Ignition
1

Hi there,

In a perspective XY Chart, the X-Axis is displayed with a 1-hour offset
See below : dataset ranges from 10am to 12pm, whereas X-Axis is displayed from 11am to 1pm

Same issue from within the Designer (same session timezone than the gateway)

Any idea how to fix this ?

Below a summary of my dataset and parameters

dataSource

[
{
"ds0": {
"$": [
"ds",
192,
1695039976849
],
"$columns": [
{
"name": "date_lavage",
"type": "Date",
"data": [
1694679000000,
1694679600000,
1694680200000,
1694680800000,
1694681400000,
1694682000000,
1694682600000,
1694683200000,
1694683800000,
1694684400000,
1694685000000
]
},
{
"name": "c01_1_right_up",
"type": "Double",
"data": [
101.979164,
102.10648,
102.5897,
102.170135,
101.77951,
102.59838,
103.0353,
102.49421,
102.30903,
102.54051,
102.546295
]
},
{
"name": "c02_1_left_up",
"type": "Double",
"data": [
103.020836,
102.986115,
102.922455,
102.323494,
102.572334,
103.104744,
103.62558,
103.37384,
103.24364,
103.36806,
103.451965
]
},
{
"name": "c03_1_right_down",
"type": "Double",
"data": [
102.673615,
103.16551,
103.81655,
105.41377,
105.19386,
104.03356,
104.05382,
103.9294,
103.385414,
103.4809,
103.85706
]
},
{
"name": "c04_1_left_down",
"type": "Double",
"data": [
102.49132,
102.728584,
102.91956,
104.46759,
104.86979,
103.86864,
103.729744,
103.6603,
103.295715,
103.521416,
103.56192
]
},
{
"name": "c05_2_right_up",
"type": "Double",
"data": [
101.322334,
101.197914,
101.55382,
101.68403,
102.61864,
101.55382,
101.64931,
101.65799,
101.43519,
101.06481,
101.579865
]
},
{
"name": "c06_2_left_up",
"type": "Double",
"data": [
100.59606,
100.50347,
100.763885,
100.81597,
101.41782,
100.45718,
101.03009,
100.865166,
100.83912,
100.74653,
101.021416
]
},
{
"name": "c07_2_right_down",
"type": "Double",
"data": [
101.99653,
102.02257,
101.74769,
101.69271,
103.53009,
103.85127,
102.24537,
103.142365,
102.734375,
102.103584,
102.572334
]
},
{
"name": "c08_2_left_down",
"type": "Double",
"data": [
104.042244,
104.11169,
104.14352,
104.03935,
105.19676,
105.96354,
104.80035,
105.07523,
104.5978,
104.53125,
104.60648
]
},
{
"name": "c09_3_right_up",
"type": "Double",
"data": [
104.32002,
104.06829,
104.759834,
104.1522,
102.02546,
103.19155,
105.06076,
105.50636,
104.37789,
103.55614,
105.448494
]
},
{
"name": "c10_3_left_up",
"type": "Double",
"data": [
104.34028,
104.03646,
104.80035,
104.10301,
101.77373,
102.546295,
104.05671,
104.48785,
103.41146,
103.11632,
104.99711
]
},
{
"name": "c11_3_right_down",
"type": "Double",
"data": [
110.09549,
110.36748,
110.50636,
110.30093,
109.64989,
110.677086,
111.229744,
111.889465,
111.71875,
110.75231,
111.59433
]
},
{
"name": "c12_3_left_down",
"type": "Double",
"data": [
106.01852,
106.35706,
106.59433,
106.56829,
106.15162,
106.9184,
107.16435,
108.078705,
107.46817,
106.958916,
107.17593
]
}
]
}
}
]

xAxes

[
{
"name": "date_lavage",
"label": {
"enabled": true,
"text": "date de fixage",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "date",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "minute",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "dd/MM/yyyy kk:mm:ss",
"format": "M/dd kk:mm"
},
"value": {
"range": {
"max": "",
"min": "",
"useStrict": false
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1,
"rotation": 90,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": 10,
"position": 0.5
},
"font": {
"size": 12,
"weight": 500
}
}
}
]

yAxes.0

[
{
"name": "c01_1_right_up",
"label": {
"enabled": false,
"text": "",
"color": ""
},
"inversed": false,
"visible": true,
"tooltip": {
"enabled": true,
"text": "",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "value",
"category": {
"break": {
"enabled": false,
"startCategory": "",
"endCategory": "",
"size": 0.05
}
},
"date": {
"baseInterval": {
"enabled": false,
"timeUnit": "minute",
"count": 1,
"skipEmptyPeriods": false
},
"range": {
"max": "",
"min": "",
"useStrict": false
},
"break": {
"enabled": false,
"startDate": "",
"endDate": "",
"size": 0.05
},
"inputFormat": "dd/MM/yyyy kk:mm:ss",
"format": "M/dd kk:mm"
},
"value": {
"range": {
"max": 113,
"min": 96,
"useStrict": true
},
"logarithmic": false,
"break": {
"enabled": false,
"startValue": 0,
"endValue": 100,
"size": 0.05
},
"format": "#,###.##"
},
"appearance": {
"opposite": false,
"inside": false,
"labels": {
"color": "",
"opacity": 1,
"rotation": 0,
"verticalCenter": "middle",
"horizontalCenter": "middle"
},
"grid": {
"color": "",
"opacity": 1,
"dashArray": "",
"minDistance": null,
"position": 0.5
},
"font": {
"size": "",
"weight": 500
}
}
}
]

series.0

[
{
"name": "c01_1_right_up",
"label": {
"text": ""
},
"visible": true,
"hiddenInLegend": false,
"defaultState": {
"visible": true
},
"data": {
"source": "ds0",
"x": "date_lavage",
"y": "c01_1_right_up"
},
"xAxis": "date_lavage",
"yAxis": "c01_1_right_up",
"zIndex": 0,
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"render": "line",
"candlestick": {
"open": {
"x": "",
"y": ""
},
"high": {
"x": "",
"y": ""
},
"low": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"column": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"opacity": 1,
"width": 1
},
"width": null,
"height": null,
"stacked": false,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
}
},
"heatRules": {
"enabled": false,
"max": "",
"min": "",
"dataField": ""
}
}
},
"line": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "#FFCA8A",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": false,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
},
"stepLine": {
"open": {
"x": "",
"y": ""
},
"appearance": {
"connect": true,
"tensionX": 1,
"tensionY": 1,
"minDistance": 0.5,
"stroke": {
"width": 3,
"opacity": 1,
"color": "",
"dashArray": ""
},
"fill": {
"color": "",
"opacity": 0
},
"bullets": [
{
"enabled": true,
"render": "circle",
"width": 10,
"height": 10,
"label": {
"text": "{value}",
"position": {
"dx": 0,
"dy": 0
}
},
"tooltip": {
"enabled": true,
"text": "{name}: [bold]{valueY}[/]",
"cornerRadius": 3,
"pointerLength": 4,
"background": {
"color": "",
"opacity": 1
}
},
"fill": {
"color": "",
"opacity": 1
},
"stroke": {
"color": "",
"width": 1,
"opacity": 1
},
"rotation": 0,
"deriveFieldsFromData": {
"fill": {
"color": "",
"opacity": ""
},
"stroke": {
"color": "",
"opacity": "",
"width": ""
},
"rotation": ""
},
"heatRules": {
"enabled": false,
"max": 100,
"min": 2,
"dataField": ""
}
}
]
}
}
}
]

XY chart date offset
XY chart date offset739×544 52.5 KB

2

What is the client timezone? (This looks like normal formatting of date/times on the client side for the chart, while I'm guessing that you formatted the dates in the labels with an expression, which runs in the gateway.)

3

The data is actually correct, Just the X-axis starts an hour sooner and ends an hour later than you expected, right?

4

Both ends are "later". (But almost certainly correct for the browser time zone, as shown in the session props.)

1 Like
5

This topic might help:

6

Client tz is Europe/Paris (CET)

Currently the 'Project Timezone' is set to 'Gateway Timezone'
Project Properties > Perspective > General > Project Timezone > 'Gateway Timezone'
No difference when I change it to 'Client Timezone'

For the dates label I just wrote M/dd kk:mm as the output format

7

Solution : basic date format of the label : M/dd HH:mm instead of M/dd kk:mm ... hence the 1-hour offset, as explained in the documentation.

Thanks @pturmel and @sydney.bosworth for putting me on the path !

https://docs.inductiveautomation.com/display/DOC81/Data+Type+Formatting+Reference

1 Like