Graph won't update

So I have the following Dash application element:

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

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

    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

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 = [""]

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

app.layout = html.Table(
                    options=[{"label": 1, "value": 1}],
    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__":

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