Announcing Dash Bio 1.0.0 ๐ŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

Best practice to update multiple graphs

i am just getting started trying out dash. i am trying to update 2 graphs, when the values of any one of the two drop down menu is changed. The code seem to run fine, but was not sure if its good practice to do it this way. Any thoughts/suggestions/more efficient way to do the same would be appreciated`

@app.callback(
    dash.dependencies.Output('indicator-graphic', 'figure'),
    [dash.dependencies.Input('sec1', 'value'),
     dash.dependencies.Input('sec2', 'value')])
def update_graph(sec1,sec2):
      return plotly graph object
 
@app.callback(dash.dependencies.Output('scatter-graphic', 'figure'),
[dash.dependencies.Input('sec1', 'value'),
 dash.dependencies.Input('sec2', 'value')])
def update_chart2(sec1,sec2):
  return ploly graph object
1 Like

Welcome to Dash! This is the correct way to do this :slight_smile: :+1:

2 Likes

I was building a Dash project and one of the requirement is also to update multiple graphs from an input. Hereโ€™s how I did it:

  • Wrap the multiple graphs in a single HTML div
  • Use a single callback to update that entire HTML div, thereby updating the multiple graphs in it.

If the multiple graphs are supposed to be from separate divs, then I would do it your way, i.e. to use multiple callbacks to update multiple graphs.

While these approaches work really well so far, I would really wish that a callback can update multiple components with multiple IDs, instead of only a single ID like at the moment. That would really help the code organizations.

4 Likes

(Iโ€™m also new to Dash)

Is there any way to update all the charts using only 1 decorator function? With the way explained in your question we have to write 1 function/graph.

Hi, you can merge the 2 callbacks in just one. Dash allows you to have multiple outputs in one callback function.

@app.callback(
    [dash.dependencies.Output('indicator-graphic', 'figure'),
     dash.dependencies.Output('scatter-graphic', 'figure')],
    [dash.dependencies.Input('sec1', 'value'),
     dash.dependencies.Input('sec2', 'value')])
def update_graph(sec1,sec2):
      return plotly graph object