Callbacks to Cards on Dash App

Dash Python
1

Hello,

I am working on a COVID19 dashboard and I’m trying to make a set of cards update when referenced in a callback. The first card I’m trying to get to update on this chart is just the population of a country. I want the card to update when a new selection from the dropdown menu is chosen.

Here is my code so far:

#Import packages
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import plotly.express as px
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

#Load data
who_data = pd.read_csv("https://covid19.who.int/WHO-COVID-19-global-data.csv")
pops = pd.read_csv("https://gist.githubusercontent.com/curran/0ac4077c7fc6390f5dd33bf5c06cb5ff/raw/605c54080c7a93a417a3cea93fd52e7550e76500/UN_Population_2019.csv")
pops = pops[['Country','2020']]
pops['2020'] = pops['2020']*1000

#Rename columns
who_data.rename(columns={'New_cases': 'New Cases', 'Cumulative_cases': 'Cumulative Cases', 'New_deaths': 'New Deaths','Cumulative_deaths': 'Cumulative Deaths'}, inplace=True)

#Options for dropdown boxes
country_choices=who_data['Country'].unique()
metric_choices=who_data.columns[4:]

#Initialize figure
fig = px.line(who_data, x="Date_reported", y="New Cases")


#App layout
card1 = dbc.Card([
    dbc.CardBody([
        html.H4("Card title", className="card-title",id="card_num1"),
        html.P("This is some card text", className="card-text",id="card_text1")
    ])
],
    style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)'},
    outline=True)

card2 = dbc.Card([
    dbc.CardBody([
        html.H4("Card title", className="card-title",id="card_num2"),
        html.P("This is some card text", className="card-text",id="card_text2")
        ]
     )],
    style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)'},
    outline=True)

card3 = dbc.Card([
    dbc.CardBody([
        html.H4("Card title", className="card-title",id="card_num3"),
        html.P("This is some card text", className="card-text",id="card_text3")
        ]
     )],
    style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)'},
    outline=True)


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
    html.Div([
        dcc.Dropdown(
            id='dropdown1',
            options=[{'label': i, 'value': i} for i in country_choices],
            value=country_choices[0]
        )
    ],style={'width': '50%',
             'display': 'inline-block',
             'text-align': 'center'}
    ),
    html.Div([
        dcc.Dropdown(
            id='dropdown2',
            options=[{'label': i, 'value': i} for i in metric_choices],
            value=metric_choices[0]
        )],style={'width': '50%',
                  'display': 'inline-block',
                  'text-align': 'center'}
    ),
    html.Div([
        card1,
        card2,
        card3
    ]),
    html.Div([
        dcc.Graph(figure=fig, id='country_plot')
    ])
])


@app.callback(
    Output('card_num1','children'),
    Output('card_num2','children'),
    Output('card_num3','children'),
    Output('card_text1','children'),
    Output('card_text2','children'),
    Output('card_text3','children'),
    Input('dropdown1','value')
)

def update_cards(country_select):
    new_df = who_data[(who_data.Country==country_select)]
    country_df = pops[pops['Country']==country_select]
card1 = dbc.Card([
    dbc.CardBody([
        html.H4(f"country_df['2020']", className="card-title",id="card_num1"),
        html.P(f"Current Population of {country_select}", className="card-text",id="card_text1")
    ])
],
    style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)'},
    outline=True)







@app.callback(
    Output('country_plot','figure'),
    Input('dropdown1','value'),
    Input('dropdown2','value'))

def update_figure(country_select,metric_select):
        new_df = who_data[(who_data.Country==country_select)]
        fig = px.line(new_df, x="Date_reported", y=metric_select,
                      title=f'{metric_select} of COVID19 for {country_select}',
                      color_discrete_sequence = ["red"],
                      labels=dict(Date_reported="Date")
                     )
        fig.update_traces(mode='markers+lines',marker=dict(color="black",size=3),line=dict(width=2))
        fig.update_layout(title={'x':0.5,
                                 'xanchor': 'center',
                                 'yanchor': 'top'})
        return fig

app.run_server(host='0.0.0.0',port='8050')

When running the app, I get an “Internal Server Error”. I’m assuming it has something to do with the update_cards function not being written properly. Can someone help me figure out what I’m doing wrong? Any help would be appreciated!

Thank you!