Plotly-Dash has unknown issue and creates “Error l

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...

Answer 1

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()