Dashboard with multiple graphs as inputs/outputs

Dash Python
1

Hi,
I’m new to dash and I’m trying to find a way to create a dashboard where most of the graphs are used as filters for the whole dashboard, so each graph is an Input for itself and the rest of the graphs and an Output when other filter is used. I’ve followed the Dash tutorial so I know the basics about interactivity, callbacks, etc.
e.g. I could have:

  • Dropdown to choose location --> df changes for all the graphs when location is chosen
  • Barchart with type of product (count of products) --> When the user click on one of the bars, filter by that type of product and apply the new df to the whole dashboard
  • Piechart with product supplier (count of products) --> When the user click on one of the slices, filter by that product supplier apply the new df to the whole dashboard.
  • Table that updates with the filtered df, ideally user could filter the table as well, I know that’s in experimentation.

I’ll have about 10 graphs per dashboard. Is that possible? What is the best way to structure the code to manage all the filters?

Thanks

2

Check out the last example here: https://plot.ly/dash/interactive-graphing. It has a function that generates callback functions (def highlight) that are then later applied with code like

app.callback(
    Output('g1', 'figure'),
    [Input('g1', 'selectedData'),
     Input('g2', 'selectedData'),
     Input('g3', 'selectedData')]
)(highlight('Column 0', 'Column 1'))

app.callback(
    Output('g2', 'figure'),
    [Input('g2', 'selectedData'),
     Input('g1', 'selectedData'),
     Input('g3', 'selectedData')]
)(highlight('Column 2', 'Column 3'))

app.callback(
    Output('g3', 'figure'),
    [Input('g3', 'selectedData'),
     Input('g1', 'selectedData'),
     Input('g2', 'selectedData')]
)(highlight('Column 4', 'Column 5'))

For now, I recommend using selectedData instead of clickData as it’s easier to “unselect” data. “Unclick” will be more possible once we add a “persistent” click option to plotly.js (https://github.com/plotly/plotly.js/issues/2143).

3

Thanks Chris,

So if I understand correctly, if I have 10 different graphs/input objects, I’ll have to create 10 callbacks and add 10 inputs there with selectedData.

How does this work for different types of graphs (e.g. barchart, piechart,…) and for dropdowns?

Thanks.