Plotly-Dash has unknown issue and creates "Error loading dependencies" by using Python-pandas.date_range

Question

I stumbled upon this post and used the modification mentioned in the comment of the final answer for my own program. But before I tried to test it with the following code:

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

app = dash.Dash()

daterange = pd.date_range(start='1994',end='2018',freq='W')

app.layout = html.Div(children=[
    html.H1('Range Slider Testing'),
    html.Div(
        [
            html.Label('From 1994 to 2018', id='time-range-label'),
            dcc.RangeSlider(
                id='year_slider',
                min=daterange.min (),
                max=daterange.max (),
                value = [daterange.min(), daterange.max()],
                step='W',
            ),
        ],
        style={'margin-top': '20'}
    ),
    html.Hr(),

    dcc.Graph(id='my-graph')
])

@app.callback(
    dash.dependencies.Output('my-graph', 'figure'),
    [dash.dependencies.Input('year_slider', 'value')])
def _update_graph(year_range):
    date_start = '{}'.format(year_range[0])
    date_end = '{}'.format(year_range[1])

@app.callback(
    dash.dependencies.Output('time-range-label', 'children'),
    [dash.dependencies.Input('year_slider', 'value')])
def _update_time_range_label(year_range):
    return 'From {} to {}'.format(year_range[0], year_range[1])

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

As a result it doesn't raise any Python errors, but the HTML, created by Dash, has an Error loading dependencies text on it...

Nils · Accepted Answer · 2018-06-23 18:06:31Z

Seems like dash does not support datetime objects by default.

You can solve this issue by converting your datetime object into an unix timestamp.

My solution for your problem is:

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

import time

app = dash.Dash()

daterange = pd.date_range(start='1994',end='2018',freq='W')

def unixTimeMillis(dt):
    ''' Convert datetime to unix timestamp '''
    return int(time.mktime(dt.timetuple()))

def unixToDatetime(unix):
    ''' Convert unix timestamp to datetime. '''
    return pd.to_datetime(unix,unit='s')

def getMarks(start, end, Nth=100):
    ''' Returns the marks for labeling. 
        Every Nth value will be used.
    '''

    result = {}
    for i, date in enumerate(daterange):
        if(i%Nth == 1):
            # Append value to dict
            result[unixTimeMillis(date)] = str(date.strftime('%Y-%m-%d'))

    return result

app.layout = html.Div(children=[
    html.H1('Range Slider Testing'),
    html.Div(
        [
            html.Label('From 1994 to 2018', id='time-range-label'),
            dcc.RangeSlider(
                id='year_slider',
                min = unixTimeMillis(daterange.min()),
                max = unixTimeMillis(daterange.max()),
                value = [unixTimeMillis(daterange.min()),
                         unixTimeMillis(daterange.max())],
                marks=getMarks(daterange.min(),
                            daterange.max()),
            ),
        ],
        style={'margin-top': '20'}
    ),
    html.Hr(),

    dcc.Graph(id='my-graph')
])

@app.callback(
    dash.dependencies.Output('time-range-label', 'children'),
    [dash.dependencies.Input('year_slider', 'value')])
def _update_time_range_label(year_range):
    return 'From {} to {}'.format(unixToDatetime(year_range[0]),
                                  unixToDatetime(year_range[1]))

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

Collectives™ on Stack Overflow

Plotly-Dash has unknown issue and creates "Error loading dependencies" by using Python-pandas.date_range

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related