Search⌘ K
Home
Courses
Interactive Dashboards and Data Apps with Plotly and Dash

Adding Histograms and Tables to the App

Explore how to enhance your Dash app by adding histograms alongside interactive tables. Learn to implement sortable, filterable, and exportable DataTables tied to histogram data, improving user exploration and data insight. This lesson guides you through adding these features and integrating them with callback functions for interactivity.

We'll cover the following...

We’ll now see how to incorporate some interactivity with tables and add this to our app. We’ll also use this as an opportunity to demonstrate a few other options available to the DataTable component.

Incorporating table functionality

We’re now ready to incorporate the table functionality into our app and add it to the callback function that we already created. What we’ll do is display the data that is used to generate the histograms right under the histogram figure. Since the histograms don’t show data points as we discussed (only aggregates), it might be interesting for users to see for themselves, if they wish.

Let’s add this functionality right away.

C++
#Adding the new div
html.Div(id='table_histogram_output')
#Updating the callback function
@app.callback(Output('indicator_year_histogram', 'figure'),'children'),
              Output('table_histogram_output',
              Input('hist_multi_year_selector', 'value'),
              Input('hist_indicator_dropdown', 'value'),
sort_action='native'
filter_action='native'
export_format='csv'
style_cell={'minWidth': '150px'}
# Updating the return argument
return fig, table
  • Line 2: We add a new div
...