I want to display the right graph under each section. For example, if I select the new cases option under Sweden a plotline of those graphs would appear
This is the code I wrote
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app= dash.Dash(__name__, suppress_callback_exceptions=True,external_stylesheets=[dbc.themes.FLATLY]
)
df=pd.read_excel('owid-covid-data.xlsx',parse_dates=True,index_col='date')
cols=["date","total_cases",
"total_deaths","new_cases","new_deaths","hospital_beds_per_thousand",
"total_vaccinations","people_vaccinated","new_vaccinations","people_fully_vaccinated_per_hundred"]
#sweden
df_sw=df.loc[df["location"] == "Sweden"]
df_sw=df_sw.reindex(columns = cols)
#UAE
df_AE=df.loc[df["location"] == "United Arab Emirates"]
df_AE=df_AE.reindex(columns = cols)
#dashboard
app.layout = html.Div([
dbc.Row(dbc.Col(html.H3("COVID-19 comparaison between Sweden and UAE"),
width={'size': 8, 'offset': 3}
),
),
html.Br(),
dbc.Row(
[dbc.Col(html.H5("SWEDEN SECTION"),
width={'size' : 4, 'offset':1},
),
dbc.Col(html.H5("UAE SECTION"),width={'size' : 4, 'offset':2},
),
],
),
dbc.Row(
[
dbc.Col(dcc.Dropdown(id='Sweden', placeholder='Choose the statistics',
options=[{'label': 'New Cases', 'value': 'new_cases'},
{'label': 'New Deaths', 'value': 'new_deaths'},
{'label': 'Total Cases', 'value': 'total_cases'},
{'label': 'Total Deaths', 'value': 'total_deaths'}]),
width={'size': 4, "offset": 2, 'order': 2}
),
dbc.Col(dcc.Dropdown(id='UAE', placeholder='Choose the statistics',
options=[{'label': 'New Cases', 'value': 'new_cases'},
{'label': 'New Deaths', 'value': 'new_deaths'},
{'label': 'Total Cases', 'value': 'total_cases'},
{'label': 'Total Deaths', 'value': 'total_deaths'}]),
width={'size': 4, "offset": 1, 'order': 1}
),
], no_gutters=True
),
dbc.Row(
[
dbc.Col(dcc.Graph(id='sw_line', figure={}),
width=8, lg={'size': 6, "offset": 0, 'order': 'first'}
),
dbc.Col(dcc.Graph(id='uae_line', figure={}),
width=4, lg={'size': 6, "offset": 0, 'order': 'last'}
),
]
)
])
@app.callback(
[Output('sw_line','figure'),
Output('uae_line','figure')]
[Input('Sweden','value'),
Input('UAE','value')]
)
def build_graph(Sweden, UAE):
if __name__ == '__main__':
app.run_server()
these are the graphs I want to include
""""
fig1 = px.line(df_sw,y="new_cases", title='New Cases')
fig2 = px.line(df_sw,y="new_deaths", title='New Deaths')
fig3 = px.line(df_sw,y="total_cases", title='Total Cases')
fig4 = px.line(df_sw,y="total_deaths", title='Total Deaths')
fig5 = px.line(df_AE,y="new_cases", title='New Cases')
fig6 = px.line(df_AE,y="new_deaths", title='New Deaths')
fig7 = px.line(df_AE,y="total_cases", title='Total Cases')
fig8 = px.line(df_AE,y="total_deaths", title='Total Deaths')"""
how to connect those graphs to the dropdown option in the build_graph function?
6 posts - 2 participants