Best practices for updating graphs based on user input

Dash Python
1

So basically I have a dropdown list, and when I select an id, the graphs of that id (10 graphs) will be updated. I’m wondering what is the best practice when writing these lines. Here is what I am currently looking at

app.layout = html.Div(
    [
        html.H6("Change the value in the text box to see callbacks in action!"),
       dcc.Dropdown(
            ["option a", "option b", "option c"], "option a", id="demo-dropdown"
        ),
        dcc.Graph(id="graph_1"),
        dcc.Graph(id="graph_2"),
        dcc.Graph(id="graph_3"),
        dcc.Graph(id="graph_4"),
        dcc.Graph(id="graph_5"),
    ]
)
@app.callback(
    Output(component_id="graph_1", component_property="figure"),
    Output(component_id="graph_2", component_property="figure"),
    Output(component_id="graph_3", component_property="figure"),
    Output(component_id="graph_4", component_property="figure"),
    Output(component_id="graph_5", component_property="figure"),
    Input(component_id="demo-dropdown", component_property="value"),
)
def update_output_div(input_value):
    #Returns the new graph for each one,
    return px.bar(graph 1), px.bar(graph 2), etc
    )

I know this is definitely not best practices, so I am wondering what would you do in this situation.

2

Hi, you could use pattern matching callbacks fort this.

You also could generate your graphs and outputs in a list comprehension like this:

[Output(id=f"graph_{idx}", “figure”) for idx in range(1, 6)]

It does not change anything, just fewer lines of code.

1 Like