Connecting 8 graphs two 2 dropdown bars

Dash Python
1

1
11361×631 18.5 KB

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?

2

Hi @W_101001

Give this a try:


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)


options = {
    "new_cases": "New Cases",
    "new_deaths": "New Deaths",
    "total_cases": "Total Cases",
    "total_deaths": "Total Deaths"
}

# 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": v, "value": k} for k, v in options.items()],
                    ),
                    width={"size": 4, "offset": 2, "order": 2},
                ),
                dbc.Col(
                    dcc.Dropdown(
                        id="UAE",
                        placeholder="Choose the statistics",
                        options=[{"label": v, "value": k} for k, v in options.items()],
                    ),
                    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):
    return (
        px.line(df_sw, y=Sweden, title=options[Sweden]),
        px.line(df_AE, y=UAE, title=options[UAE]),
    )


if __name__ == "__main__":
    app.run_server()
1 Like
3

It worked ! That was so simple. Thank you !

1 Like
4

One small issue ! When I select for example total cases under the Sweden section it changes for the total cases under UAE section as if they were swapped. Like the dropdown for UAE is under the Sweden section and vica-versa. What’s the reason for that?
The graphs are under the right section but not the dropdown.

5

hmm… check out the Col with the dropdowns. You have Sweden as 'order': 2 and UAE as 'order': 1

One more tip… with Bootstrap it’s recommended to use dbc.Container() for the main layout to center the content and make the margins work correctly.


app.layout = dbc.Container(
    [
        ...
        
    ], fluid=True
)
1 Like
6

I swapped the IDs and it got fixed so I think it’s the order thing like you said. Thanks a lot. I’m going to try and manipulate this more and make it better I’ll use the tip!
Mercii :slight_smile:

1 Like