No reaction when date-picker-single is changed


#1

https://vanhevel-eu.herokuapp.com/

Function ‘update_plot(date)’ creates a figure after loading csv’s depending on the date picked from the date-picker.
The graph loads with the initial date in update_graph (value date-picker = None), but it does not change when a date is chosen with the date picker. Do I have to add the state of the date-picker as an input?`

app.layout = html.Div([
    html.Div([
        html.Div(children='',
            className='four columns top row'),    
        html.Div(children='Pick a date:',
            className='two columns top row'),
        html.Div([
            dcc.DatePickerSingle(
                id='date-picker-single',
                with_portal=True,
                display_format='Y-MM-DD',
                min_date_allowed=dt(2018, 4, 17),
                max_date_allowed=dt.today(),
                date = dt.today() - timedelta(days=1)
                )
        ], className='two columns top row'),     
        html.Div(children='Progress: ' + message,    
            className='four columns top row'),             
    ], className='twelve columns plot'),
    html.Div([
        html.Div([
            dcc.Graph(
                id='my_graph',
                style={'height': 800}
                )  
        ], className='twelve columns plot')
    ], className='twelve columns plot')           
],
style={
       'marginLeft': 'auto', 'marginRight': 'auto', 'width': 'auto',
       }
)

@app.callback(
    Output('my_graph', 'figure'),
    [Input('date-picker-single', 'value')])
def update_graph(value):
    if value is not None:
        date = dt.strptime(value, '%Y-%m-%d')
    else: 
        date = dt.today() - timedelta(days=1)
    fig = update_plot(date)    
    return fig

#2

Solved it.

date_init = dt(2018, 5, 1)
fig_init = update_plot(date_init)
   
app.layout = html.Div([
html.Div([               
    html.Div([                                                             # Use a hidden graph as per https://stackoverflow.com/questions/48886533/plotly-dash-cannot-create-graphs-dynamically
        dcc.Location(
            id='location', 
            refresh=False
            )
    ], className='two columns top row'),    
    html.Div(children='Pick a date:',
        className='two columns top row'),
    html.Div([
        dcc.DatePickerSingle(
            id='my-date-picker-single',
            display_format='YYYY-MM-DD',
            min_date_allowed=dt(2018, 4, 17),
            max_date_allowed=dt.today(),
            date = dt.today() - timedelta(days=1)
            )
    ], className='two columns top row'),     
    html.Div(                                                              # Use a hiddden Div i/o a global variable https://dash.plot.ly/sharing-data-between-callbacks
            id='intermediate-value', 
            style={'display': 'none'},
            children='Waiting ...',
        className='six columns top row'),           
], className='twelve columns plot'),
html.Div([
    html.Div([
        dcc.Graph(
            id='my-graph',
            figure=fig_init,
            style={'height': 800},
            ),   
    ], className='twelve columns plot'), 
], className='twelve columns plot')           
],
style={
   'marginLeft': 'auto', 'marginRight': 'auto', 'width': 'auto',
   }
) 

@app.callback(
    Output(component_id='my-graph', component_property='figure'),
    [Input(component_id='my-date-picker-single', component_property='**date**')])
def update_date(date):
    if date is not None:
        date = dt.strptime(date, '%Y-%m-%d')
        fig = update_plot(date)
        return fig