Graph won't update

Dash Python
1

So I have the following Dash application element:

app.layout = html.Table([
    html.Tr([
        dcc.Dropdown(id='building-dropdown', options=['label': 1, 'value': 1]),
        dcc.Graph(id='graph')
    ])
])

Really simple. The thing is I’m trying to update the graph dynamically through the following callback (using Pandas to create x):

@dash_app.callback(
    Output('graph', 'figure'),
    [Input('building-dropdown', 'value')]
)
def plotData(values):
    if values:
        x = pd.date_range(start='2020-02-01', end='2020-02-07', freq='1H')
        fig = go.Figure(go.Scatter(x=x, y=[1 + i for i in range(len(x))]))
    return fig

And the figure won’t show. Don’t know what to do next, if anything

2

Hi @thmasker

So, from glancing at your code, I see a few reasons why the figure won’t show:

In the layout, you are missing the { } in the options for the dropdown, and the table is too narrow to display the graph.

In the callback, the figure is only created if there is a value from the dropdown, and there is no error handling if there is none. An easy way to fix this is to add a default value in your dcc.Dropdown by including value=1 and clearable=False.

The @dash_app.callback might be a problem as well, but I’m not sure.

Here is a working version to get you started.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd


external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


app.layout = html.Table(
    [
        html.Tr(
            [
                dcc.Dropdown(
                    id="building-dropdown",
                    options=[{"label": 1, "value": 1}],
                    value=1,
                    clearable=False,                
                ),
                dcc.Graph(id="graph"),
            ]
        )
    ],
    style={"width": "100%"},
)


@app.callback(Output("graph", "figure"), [Input("building-dropdown", "value")])
def plotData(values):
    if values:
        x = pd.date_range(start="2020-02-01", end="2020-02-07", freq="1H")
        fig = go.Figure(go.Scatter(x=x, y=[1 + i for i in range(len(x))]))
    return fig


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

Debugging tip:
When things are not working and you don’t know what to do… try starting with something you know works - like from the tutorial, then make small changes and test each change. It makes finding the problem much easier.

1 Like