Best practices for updating graphs based on user input

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!"),
            ["option a", "option b", "option c"], "option a", id="demo-dropdown"
    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 1), 2), etc

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

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