plotly
Plotting vs time on 23 and 25 hour days
I'm trying to find a way to plot values over time on 23 and 25 hour days for daylight savings time (DST). Below is my example code that illustrates the problem, and the two resulting plots. The time stamps in x_23 and x_25 are all one hour apart. They reflect the "US/Pacific" time zone. In the spring forward case, I would expect to see twenty-three hours along the x-axis. And, in fall back, twenty-five. But, both times plotly shows 24. In spring forward, there is a visual gap in the spacing of the second and third markers. And, in fall back, there is a visual overlap.
A suggested approach would be to allow the programmer to optionally assign a time zone to the x-axis. In my case, I would assign US/Pacific. Then, plotly knows to adjust for DST if applicable. Might also want to allow assignment of a 'local' time zone. In that case, plotly would get the timezone from the computer on which it's running. If the programmer makes no assignment, plotly's behavior remains as is. Nobody's code gets broken.
A similar alternative would be to allow the programmer to set a flag to true if they want the behavior that is aware of DST. A value of false would keep the current behavior. Again, nobody's code gets broken.
I found two similar issues, but neither was really addressed.
https://github.com/plotly/plotly.js/issues/171 https://github.com/plotly/plotly.js/issues/4358
import plotly.graph_objects as go
# Spring Forward
x_23 = ["2001-04-01T00:00:00-08:00", "2001-04-01T01:00:00-08:00", "2001-04-01T03:00:00-07:00",
"2001-04-01T04:00:00-07:00", "2001-04-01T05:00:00-07:00", "2001-04-01T06:00:00-07:00",
"2001-04-01T07:00:00-07:00", "2001-04-01T08:00:00-07:00", "2001-04-01T09:00:00-07:00",
"2001-04-01T10:00:00-07:00", "2001-04-01T11:00:00-07:00", "2001-04-01T12:00:00-07:00",
"2001-04-01T13:00:00-07:00", "2001-04-01T14:00:00-07:00", "2001-04-01T15:00:00-07:00",
"2001-04-01T16:00:00-07:00", "2001-04-01T17:00:00-07:00", "2001-04-01T18:00:00-07:00",
"2001-04-01T19:00:00-07:00", "2001-04-01T20:00:00-07:00", "2001-04-01T21:00:00-07:00",
"2001-04-01T22:00:00-07:00", "2001-04-01T23:00:00-07:00", "2001-04-02T00:00:00-07:00"]
y_23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
fig_23 = go.Figure(data=[go.Scatter(x=x_23, y=y_23, mode="lines+markers")])
fig_23.update_layout(title="Spring Forward")
fig_23.show()
# Fall Back
x_25 = ["2001-10-28T00:00:00-07:00", "2001-10-28T01:00:00-07:00", "2001-10-28T01:00:00-08:00",
"2001-10-28T02:00:00-08:00", "2001-10-28T03:00:00-08:00", "2001-10-28T04:00:00-08:00",
"2001-10-28T05:00:00-08:00", "2001-10-28T06:00:00-08:00", "2001-10-28T07:00:00-08:00",
"2001-10-28T08:00:00-08:00", "2001-10-28T09:00:00-08:00", "2001-10-28T10:00:00-08:00",
"2001-10-28T11:00:00-08:00", "2001-10-28T12:00:00-08:00", "2001-10-28T13:00:00-08:00",
"2001-10-28T14:00:00-08:00", "2001-10-28T15:00:00-08:00", "2001-10-28T16:00:00-08:00",
"2001-10-28T17:00:00-08:00", "2001-10-28T18:00:00-08:00", "2001-10-28T19:00:00-08:00",
"2001-10-28T20:00:00-08:00", "2001-10-28T21:00:00-08:00", "2001-10-28T22:00:00-08:00",
"2001-10-28T23:00:00-08:00", "2001-10-29T00:00:00-08:00"]
y_25 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
fig_25 = go.Figure(data=[go.Scatter(x=x_25, y=y_25, mode="lines+markers")])
fig_25.update_layout(title="Fall Back")
fig_25.show()
I don't know why plotly can't offer some kind of setting to deal with Standard Time to DST or DST to Standard Time transitions. It seems that if the x-axis is a Date() object, the offset information is simply ignored. Here is a work-around for the issue:
` // assuming you have an array of either "date-time" (per msarrel's example above) or millisecond timestamp values in x[] and an equal number of corresponding values in y[] var x = []; // provide your own values here var y = []; // provide your own values here
// first, determine if the first and last x array elements have the same time zone offset let o1 = new Date(x[0]).getTimezoneOffset(); let o2 = new Date(x[x.length-1]).getTimezoneOffset(); let od = (o2-o1) * 60000; // offset difference in milliseconds
// if the x array elements are in "date-time" format, convert them to numeric values (otherwise comment the next line out) x = x.map(function(n) { return new Date(n).getTime(); });
// create a new array t[] comprised of Date() objects based on the x[] array and the offset difference var t = []; if (od != 0) { for (let i=0; i < x.length; i++ ) { // x array element is in the first time zone if (new Date(x[i]).getTimezoneOffset() == o1) { t[i] = new Date(x[i]); } else { // x array element is in the second time zone t[i] = new Date(x[i] + od); // negative od = "Spring Forward". if ((od < 0) && (t[i].getTimezoneOffset() == o1)) { // it is impossible to use for hoverinfo t[i] = null; } } } } else { // No time zone difference between the first and last x array elements t = x.map(function(n) { return new Date(n); }); }
// The trick is now to create 2 traces. traces[0] will be used to plot the y[] array values using the x[] array while traces[1] will be used to plot the y[] array values using the t[] array. Also, traces[0] will be displayed but will not display hover info while traces[1] will be invisible but display hover info.
var traces = [];
// visible trace, no hover info traces[0] = { x: x, y: y, mode: 'lines', line: { color: 'blue', width: 1 }, hoverinfo: 'skip', showlegend: false, name: 'my y value name' };
// invisible trace, hover info
traces[1] = {
x: t,
y: y,
mode: 'lines',
line: {
// this color is used for the hover info
color: 'blue',
width: 0
},
// this removes the extra hover info that is normally included when there are multiple traces
hovertemplate: '%{y}
var layout = { title: 'graph title', // don't display the x[] array numeric values xaxis: { visible: false }, // display the t[a] array Date() values at the normal x-axis location xaxis2: { title: 'time', overlaying: 'x', }, yaxis: { title: 'my y axis' }, };
Plotly.react(gd, traces, layout); `
