Change values on cards dynamically in Plotly Dash using an interactive plotly data visualization library and dash web library.
Inputs: Drop down list
Change values on cards dynamically in Plotly Dash. We can build cards in dash app and display numeric values on these cards. These cards linked to dash input components to change values dynamically. I this plotly dash app, I have connected drop down list to six cards, values on these cards change according to input value.
For example, See below I have created html div for this card in the dash app layout.
|
1 2 3 4 |
html.Div([ html.Div(id='live_text1'), ], className = "create_container two columns", style = {'text-align': 'center'}), |
Then create the callback for this card.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@app.callback( Output('live_text1', 'children'), [Input('w_countries', 'value')] ) def update_graph(w_countries): covid_data_2 = covid_data.groupby(['date', 'Country/Region'])[['confirmed', 'death', 'recovered', 'active']].sum().reset_index() total_confirmed = covid_data_2[covid_data_2['Country/Region'] == w_countries]['confirmed'].iloc[-1] today_confirmed = covid_data_2[covid_data_2['Country/Region'] == w_countries]['confirmed'].iloc[-1] - covid_data_2[covid_data_2['Country/Region'] == w_countries]['confirmed'].iloc[-2] return [ html.H6(children = 'Confirmed Cases', style={'textAlign': 'center', 'color': 'white'} ), html.P('{0:,.0f}'.format(total_confirmed), style={'textAlign': 'center', 'color': 'orange', 'fontSize': 40} ), html.P('Today: ' + ' ' + '{0:,.0f}'.format(today_confirmed) + ' (' + str(round(((today_confirmed) / total_confirmed) * 100, 2)) + '%' + ' ' + 'vs last day)', style = { 'textAlign': 'center', 'color': 'orange', 'fontSize': 15, 'margin-top': '-18px'} ) ] |
Watch the video below how this dashboard work?
Download the full code and learn more about plotly dash on Udemy.
