Datetime axis of Graph element does not show the correct values

Dash Python
1

Hello, I’m building an example dashboard using time series data. I have a DataFrame df with a datetime index and want to display a column of it, but the datetime index is not displayed/interpreted correctly. That’s the code (without reading of the input csv file)

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import datetime

app = dash.Dash(__name__)

x = df.index
y = df[column]
print(x)
print(y)
print(isinstance(df.index[0], datetime.datetime))

trace = go.Scatter(x=x, y=y)
data = [trace]
layout = dict(title=column)
fig = dict(data=data, layout=layout)

app.layout = html.Div([
    dcc.Graph(id='plot-graph', figure=fig)
    ])


if __name__ == '__main__':
    app.run_server(debug=True)

That’s the output here:

20
Screen Shot 2018-09-13 at 13.47.20.png1899×397 28 KB

So somehow the x-axis is not in the correct datetime format.

The output of the print statements for the x and y arguments of the Scatter plot are the following:

print(x) (doesn’t matter if x=df.index or df.index.values, the output graph stays the same):

DatetimeIndex(['1980-01-01', '1981-01-01', '1982-01-01', '1983-01-01',
               '1984-01-01', '1985-01-01', '1986-01-01', '1987-01-01',
               '1988-01-01', '1989-01-01', '1990-01-01', '1991-01-01',
               '1992-01-01', '1993-01-01', '1994-01-01', '1995-01-01',
               '1996-01-01', '1997-01-01', '1998-01-01', '1999-01-01',
               '2000-01-01', '2001-01-01', '2002-01-01', '2003-01-01',
               '2004-01-01', '2005-01-01', '2006-01-01', '2007-01-01'],
              dtype='datetime64[ns]', name='Year', freq=None)

print(y)

Year
1980-01-01     536702.720
1981-01-01     550010.368
1982-01-01     573368.368
1983-01-01     596125.472
1984-01-01     651605.760
1985-01-01     668291.616
1986-01-01     692441.040
1987-01-01     693331.392
1988-01-01     729678.272
1989-01-01     705122.144
1990-01-01     693642.832
1991-01-01     713160.960
1992-01-01     717737.296
1993-01-01     754098.832
1994-01-01     752966.656
1995-01-01     769839.376
1996-01-01     791248.128
1997-01-01     808828.000
1998-01-01     836524.176
1999-01-01     858178.416
2000-01-01     912951.552
2001-01-01     901677.424
2002-01-01     917190.800
2003-01-01     952966.096
2004-01-01    1023435.808
2005-01-01    1079106.624
2006-01-01    1079135.936
2007-01-01    1132219.968
Name: CO2 emissions, industrial (kt), dtype: float64

I also checked, whether the index entries are datetime.datetime objects (I think these are the ones plot.ly can work with, right?) and print(print(isinstance(df.index[0], datetime.datetime)) outputs True, so they are.

Now, if I specify the x-axis to be date type with layout = dict(title=column, xaxis=dict(type='date')) I get the following output graph:

48
Screen Shot 2018-09-13 at 13.47.48.png1885×377 6.31 KB

The axis has a datetime format, but the data points do not appear anymore, since they have a value of something x 10^18 apparently.

Does anybody see the issue here? This example was working some months ago and now it is not working anymore after I updated the dash and Plotly libraries (maybe here is a compatibility issue?). I don’t see any difference to available time series example in how to use datetime.datetime objects for the time data. Hope someone can help :slight_smile:

1 Like
2

I’ve run into this issue as well. I was able to resolve it by casting the datetime series to a string.

3

Try this, it converts the index to Python datetime.datetime:
x = df.index.to_pydatetime()

Casting the pandas dataframe datetime64 index to string will not work that well when it comes to layout formatting of the axis, eg tickformat.

Plotly supports python datetime.date and datetime.datetime data types, see the ref:

1 Like
4

I have the same problem as yours. I managed to solve it by updating the plotly Js script to the latest version.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
1 Like