Add option to format dates as UTC

[brian428]

Currently, Plotly offers the tickformat property to specify date formats. But the results are always shown in local time. I see no way to format the dates as UTC other than manually transforming all of the dates to offset based on the current time zone so they look like the equivalent UTC time. And obviously, this is a major pain.

D3 can certainly handle UTC dates, so Plotly really needs to expose something to allow dates to be shown as UTC.

[alexcjohnson]

To be precise (and yes, we're aware that this is a mess), Plotly ONLY shows dates in UTC (you'll notice every day on a plotly plot has 24 hours, for example), but if you feed in native js Date objects or milliseconds to mean dates (rather than date strings) we assume what you really wanted was the (UTC) date with the same representation as the date you provided has in the local timezone.

See #1532 for more info - one of these days we will need to build in real time zone support, but that's a substantial project (largely due to DST issues)

[schwabts]

How to simply show the current (real-) time of two (or more) different timezones simultaneously?

About half a year ago I wrote the code "Timezone Table" below to show a table of all 24 hours of a day correctly aligned for several selected timezones in a Jupyter Notebook. My reason for mentioning that is to point out that

• the package pendulum (as well as pytz) was of greatest help for getting this done. It provides the abstraction of timezones from any local time to Python but making use of that in Plotly probaly involves bringing this functionality to Javascript, React, or something else I am not familiar with.
• Clearly, if having all display updates needed to be triggered over the net is to be avoided this involves clientside_callbacks, AFAIK.
• But I don't even manage to run the "example with two Outputs" in the answers to Display correct time in browsers timezone. After adding dcc.Interval(id="clock", interval=1000) to the layout and brackets around the Output-s the remaining Error is

dc[namespace] is undefined
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)

But even if "the example with two Outputs" worked I believe the two Outputs would display the same time twice. Could anyone run it sucessfully?

Timezone Table

import pandas as pd
import pytz
import pendulum

parameters = {
    'cities': ['Los_Angeles',
               'Chicago',
               'New_York',
               'London',
               'Berlin',
               'Moscow',
               'Dubai',
               'Shanghai',
               'Tokyo'],
    'cities_west_of_chicago': 1,
    'first_column_chicago': 17,
    'separator_chicago': 9
}

timezone_cities = [ [tz for tz in pytz.all_timezones if city in tz][0] for city in parameters['cities']]
pendulum_for_each_city = [pendulum.today(tz) for tz in timezone_cities]

index_chicago = parameters['cities'].index('Chicago')
p_chicago = pendulum_for_each_city[index_chicago]

def get_offset_city(i):
    if i<parameters['cities_west_of_chicago']:
        return(-p_chicago.diff(pendulum_for_each_city[i]).in_hours())
    else:
        return(p_chicago.diff(pendulum_for_each_city[i]).in_hours())

def get_entry(h,o):
    return((parameters['first_column_chicago']+o+h)%24)

offset_cities = [get_offset_city(i) for i in range(len(pendulum_for_each_city))]
data = {_: [get_entry(_,o) for o in offset_cities] for _ in range(24)}
df = pd.DataFrame(data)
df.rename(index={_: parameters['cities'][_] for _ in range(len(parameters['cities']))}, inplace=True)

# Using DataFrame.insert() to add a column
index_separator=int(df.loc[parameters['cities'][index_chicago],[df[col][index_chicago]==parameters['separator_chicago'] for col in df.columns]].index[0])
df.insert(index_separator, "|", ["|" for  city in parameters['cities']], True)

pd.options.display.max_columns = None
display(df)