Graph not updating with dropdown menu

Dash Python
1

I am trying to build a dashboard where the graph updates depending on the value passed in the dropdown menu.

For some reason, the graph does not adapt to any changes in the dropdown. Peculiarities about this are:

  1. The input is for sure received: I created a second function which has the same structure but updates a different field. It works fine.

  2. The problem seems to be with the graph display: I created a different version of the function where the update function would return “none” for the default value of 1. The area of the graph was empty at first but would change to one of the graphs when a new value was selected in the dropdown. Once a graph was shown, the field would not react to any further changes in the dropdown menu: Neither for values prompting a new graph nor for the return to the default value returning none.

EDIT: I am also not getting any error messages. On changing the dropdown menu the console writes:
127.0.0.1 - - [16/Aug/2018 12:58:35] “POST /_dash-update-component HTTP/1.1” 200 -

This is the code:

import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import collections


app = dash.Dash()

df = dm.return_all_pd_data(token = API_TOKEN)

app.layout = html.Div(children=[
    html.H1(children='''
        Month for graph:
    '''),
    dcc.Dropdown(
        id = "input",
        options=[
            {'label': 'Jan', 'value': 1},
            {'label': 'Feb', 'value': 2},
            {'label': 'Mar', 'value': 3}
        ], value = 1
    ),
    html.Div(id='output-graph'),
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')])
def update_value(value):

    start = datetime.datetime(2018, value, 1, 0, 0, 0, 1)
    end = datetime.datetime(2018,  value + 1, 1, 0, 0, 0, 1)
    subset_df = df[ (df["lost_time"] > start) & (df["lost_time"] < end) ]

    x = pd.value_counts(subset_df.deal_source).index
    y = pd.value_counts(subset_df.deal_source).values

    return(dcc.Graph(
        id='output-graph',
        figure={
            'data': [
                {'x': x, 'y': y, 'type': 'bar', 'name': value},
            ],
            'layout': {
                'title': "You selected month: {}".format(value)
            }
        }
    ))


if __name__ == "__main__":

    app.run_server(debug = True)
2

You should check the error message you’re getting in the console… should clarify things :slight_smile:
for that, remove the debug = True

3

Hi Ola,

Thanks for your help first of all.

The peculiar thing is that I am not getting any error message. The only thing the console is writing is:
127.0.0.1 - - [16/Aug/2018 12:58:35] “POST /_dash-update-component HTTP/1.1” 200 -

which I assume is supposed to mean that everything is working

Do you have an idea what the problem might be?

4

i think you should try defining an empty graph in the layout, and returning a dict with the updates
so,

in the layout…
and the callback would be
Output(component_id='output-graph', component_property='figure')
and you’d just return the following dict,

Cheers!

1 Like
5

Works! Amazing thank you Ola! :slight_smile:

6

@Ola

Can you provide the reason for doing so?

I tried your solution. It works. But I don’t know why.