Dropdown default value doesnot display on first load

Bahageel88 · March 16, 2023, 12:01pm

Hi beloved community members
As I am working on our hospital dashboard I encountered something strange , the default value in the drop down failed to display upon the first load I wonder why this is happening although I have looked through the community and did not find an answer
may someone help me please
dbc.CardBody([html.H4(‘Abha Private Hospital’,className=‘card-title’),html.P(‘Choose The revenue Category:’,className=‘card-text’),
dcc.Dropdown(id=‘selection_op’,multi=False , value=‘CONSULTATION’,
options=[{‘label’:x,‘value’:x} for x in (df[‘REVENUESCATEGORY’].unique())] ,clearable=False ,style={“color”: “#000000”} )
]),

with kind regards

hoatran · March 16, 2023, 12:53pm

Can you format your code and attach sample data too?

Bahageel88 · March 16, 2023, 1:04pm

Hi @hoatran ok I will do

Bahageel88 · March 16, 2023, 1:35pm

import pandas as pd
import numpy as np
import dash
from dash import html
from dash import dcc
import plotly.graph_objects as go
from dash.dependencies import Input ,Output
import dash_bootstrap_components as dbc
import plotly_express as px
from plotly.subplots import make_subplots
from dash import dcc, html, callback, Output
from pathlib import Path

#--------------------------Read the data -------------------------------------------------
df=pd.read_excel(‘data\dataset.xlsx’)
#------General Hospital Report ------------------------------------------------------------
#concert the date to datetime format
df[‘Date’]=pd.to_datetime(df[‘Date’])
#extract the month
df[‘Month’]=df[‘Date’].dt.month_name()
df[‘year’]=df[‘Date’].dt.year
#-----------------------------remove the white spaces
df.columns=df.columns.str.replace(" “,”")
df=df.rename(columns={‘CLINIC’:‘clinic’,‘DOCTOR’:‘doctor’,‘REVENUES CATEGORY’:‘revenue_category’,‘CASH’:‘cash’,‘CREDIT’:‘credit’,
‘TOTAL REVENUES’:‘total_revenues’,‘PATIENTS’:‘patients’})

set the layout for the application-----------------------------------------------------------------------------------------------------

app=dash.Dash(external_stylesheets=[dbc.themes.CYBORG],meta_tags=[{‘name’: ‘viewport’,
‘content’: ‘width=device-width, initial-scale=1.0’}],suppress_callback_exceptions=True)
server=app.server
app.layout=dbc.Container([
dbc.Row([ dbc.Col(html.H2(‘MONTHLY HOSPITAL PERFORMANCE DASHBOARD’,className=‘text-center mb4’),width=12)]),
dbc.Row( html.Marquee(“Monthly Hospital Performance Dashboard-Designed by-Mohammed Bahageel-Data Analyst-the Information displayed is stricly confidential”),
style = {‘color’:‘cyan’}),
dbc.Row([dbc.Col(
[dbc.Card([dbc.CardImg(src=“https://media1.giphy.com/media/MgFP7hqxNoDhRCv6Sd/giphy.gif?cid=5e214886366cfe5b9c075895b1569635b4327781c1b7320b&rid=giphy.gif&ct=g”,top=True,bottom=False),
dbc.CardBody([html.H4(‘Abha Private Hospital’,className=‘card-title’),html.P(‘Choose The revenue Category:’,className=‘card-text’),
dcc.Dropdown(id=‘selection_op’,multi=False , value=‘CONSULTATION’,
options=[{‘label’:x,‘value’:x} for x in (df[‘REVENUESCATEGORY’].unique())] ,clearable=False ,style={“color”: “#000000”} )
]),
])],width=2,xs=12, sm=12, md=12, lg=5, xl=2),dbc.Col([dcc.Graph(id=‘revenue’,figure={})],width=6,xs=12, sm=12, md=12, lg=6, xl=6),])

],fluid=True)

#----------the Callbacks-------------------------------------------------------------------------------------------------------------------------

@app.callback(
Output(‘revenue’,‘figure’),
Input(‘selection_op’,‘value’)
)
def update_graph(selected_category):
df22=df[(df[‘year’]==2022)&(df.REVENUESCATEGORY==selected_category)]
df22.columns=df22.columns.str.replace(" “,”")
df23=df[(df[‘year’]==2023)&(df.REVENUESCATEGORY==selected_category)]
dfgrouged22=df22.groupby([‘Month’,‘Date’])[‘TOTALREVENUES’].sum().reset_index(‘Date’)
dfgrouged23=df23.groupby([‘Month’,‘Date’])[‘TOTALREVENUES’].sum().reset_index(‘Date’)
dfgrouged22=dfgrouged22.sort_values(‘Date’)
dfgrouged23=dfgrouged23.sort_values(‘Date’)
dfgrouged23[‘changes’]=round(dfgrouged23[‘TOTALREVENUES’]/dfgrouged22[‘TOTALREVENUES’]-1,2)*100
color=np.where(dfgrouged23[‘changes’]>0,‘green’,‘red’)
fig=make_subplots(rows=2,cols=1,shared_xaxes=True,shared_yaxes=False ,vertical_spacing=0.02,
y_title=‘Changes Revenues’,
row_heights=[0.7,0.2] )

fig.layout.template="plotly_dark"

fig.add_trace(go.Scatter(x=dfgrouged22.index,y=dfgrouged22['TOTALREVENUES'],line=dict(color='#00FFFF'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(0,255,255,0.4)',name="Revenues in 2022"),row=1,col=1,secondary_y=False)
fig.add_trace(go.Scatter(x=dfgrouged23.index,y=dfgrouged23['TOTALREVENUES'],line=dict(color='#66FF33'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(102,255,51,0.4)',name="Revenues in 2023"),row=1,col=1,secondary_y=False)
fig.add_trace(go.Bar( x=dfgrouged23.index,y=dfgrouged23['changes'],marker_color=color,name='change%'),row=2,col=1,secondary_y=False)
fig.update_layout(title=f'Total Hospital Monthly Revenues of {selected_category} ',xaxis=dict(showgrid=False),yaxis=dict(showgrid=False),
                hovermode='x unified', plot_bgcolor='#000000',paper_bgcolor='#000000' ,showlegend=False)
fig.update_traces(xaxis='x2' )
return fig

import pandas as pd
import numpy as np
import dash
from dash import html
from dash import dcc
import plotly.graph_objects as go
from dash.dependencies import Input ,Output
import dash_bootstrap_components as dbc
import plotly_express as px
from plotly.subplots import make_subplots
from dash import dcc, html, callback, Output
from pathlib import Path

#--------------------------Read the data -------------------------------------------------
df=pd.read_excel(‘data\dataset.xlsx’)
#------General Hospital Report ------------------------------------------------------------
#concert the date to datetime format
df[‘Date’]=pd.to_datetime(df[‘Date’])
#extract the month
df[‘Month’]=df[‘Date’].dt.month_name()
df[‘year’]=df[‘Date’].dt.year
#-----------------------------remove the white spaces
df.columns=df.columns.str.replace(" “,”")
df=df.rename(columns={‘CLINIC’:‘clinic’,‘DOCTOR’:‘doctor’,‘REVENUES CATEGORY’:‘revenue_category’,‘CASH’:‘cash’,‘CREDIT’:‘credit’,
‘TOTAL REVENUES’:‘total_revenues’,‘PATIENTS’:‘patients’})

set the layout for the application-----------------------------------------------------------------------------------------------------

app=dash.Dash(external_stylesheets=[dbc.themes.CYBORG],meta_tags=[{‘name’: ‘viewport’,
‘content’: ‘width=device-width, initial-scale=1.0’}],suppress_callback_exceptions=True)
server=app.server

app.layout=dbc.Container([

     dbc.Row([ dbc.Col(html.H2('MONTHLY HOSPITAL PERFORMANCE DASHBOARD',className='text-center mb4'),width=12)]),

    dbc.Row( html.Marquee("Monthly Hospital Performance Dashboard-Designed by-Mohammed Bahageel-Data Analyst-the Information displayed is stricly confidential"),

```
            style = {'color':'cyan'}),
```
```
    dbc.Row([dbc.Col(
```

    [dbc.Card([dbc.CardImg(src="https://media1.giphy.com/media/MgFP7hqxNoDhRCv6Sd/giphy.gif?cid=5e214886366cfe5b9c075895b1569635b4327781c1b7320b&rid=giphy.gif&ct=g",top=True,bottom=False),

                                dbc.CardBody([html.H4('Abha Private Hospital',className='card-title'),html.P('Choose The revenue Category:',className='card-text'),

                                             dcc.Dropdown(id='selection_op',multi=False , value='CONSULTATION',

                                               options=[{'label':x,'value':x} for x in (df['REVENUESCATEGORY'].unique())] ,clearable=False ,style={"color": "#000000"}      )

]),

                     ])],width=2,xs=12, sm=12, md=12, lg=5, xl=2),dbc.Col([dcc.Graph(id='revenue',figure={})],width=6,xs=12, sm=12, md=12, lg=6, xl=6),])

],fluid=True)
#----------the Callbacks-------------------------------------------------------------------------------------------------------------------------
@app.callback(
```
    Output('revenue','figure'),
```
```
    Input('selection_op','value')
```
)
def update_graph(selected_category):

df22=df[(df['year']==2022)&(df.REVENUESCATEGORY==selected_category)]

df22.columns=df22.columns.str.replace("  ","")

df23=df[(df['year']==2023)&(df.REVENUESCATEGORY==selected_category)]

dfgrouged22=df22.groupby(['Month','Date'])['TOTALREVENUES'].sum().reset_index('Date')

dfgrouged23=df23.groupby(['Month','Date'])['TOTALREVENUES'].sum().reset_index('Date')

dfgrouged22=dfgrouged22.sort_values('Date')

dfgrouged23=dfgrouged23.sort_values('Date')

dfgrouged23['changes']=round(dfgrouged23['TOTALREVENUES']/dfgrouged22['TOTALREVENUES']-1,2)*100

color=np.where(dfgrouged23['changes']>0,'green','red')

fig=make_subplots(rows=2,cols=1,shared_xaxes=True,shared_yaxes=False ,vertical_spacing=0.02,

               y_title='Changes      Revenues',

```
               row_heights=[0.7,0.2] )
```
```
fig.layout.template="plotly_dark"
```

fig.add_trace(go.Scatter(x=dfgrouged22.index,y=dfgrouged22['TOTALREVENUES'],line=dict(color='#00FFFF'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(0,255,255,0.4)',name="Revenues in 2022"),row=1,col=1,secondary_y=False)

fig.add_trace(go.Scatter(x=dfgrouged23.index,y=dfgrouged23['TOTALREVENUES'],line=dict(color='#66FF33'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(102,255,51,0.4)',name="Revenues in 2023"),row=1,col=1,secondary_y=False)

fig.add_trace(go.Bar( x=dfgrouged23.index,y=dfgrouged23['changes'],marker_color=color,name='change%'),row=2,col=1,secondary_y=False)

fig.update_layout(title=f'Total Hospital Monthly Revenues of {selected_category} ',xaxis=dict(showgrid=False),yaxis=dict(showgrid=False),

                hovermode='x unified', plot_bgcolor='#000000',paper_bgcolor='#000000' ,showlegend=False)

```
fig.update_traces(xaxis='x2' )
```
```
return fig
```
import pandas as pd
import numpy as np
import dash
from dash import html
from dash import dcc
import plotly.graph_objects as go
from dash.dependencies import Input ,Output
import dash_bootstrap_components as dbc
import plotly_express as px
from plotly.subplots import make_subplots
from dash import dcc, html, callback, Output
from pathlib import Path
#--------------------------Read the data -------------------------------------------------
df=pd.read_excel(‘data\dataset.xlsx’)
#------General Hospital Report ------------------------------------------------------------
#concert the date to datetime format
df[‘Date’]=pd.to_datetime(df[‘Date’])
#extract the month
df[‘Month’]=df[‘Date’].dt.month_name()
df[‘year’]=df[‘Date’].dt.year
#-----------------------------remove the white spaces
df.columns=df.columns.str.replace(" “,”")
df=df.rename(columns={‘CLINIC’:‘clinic’,‘DOCTOR’:‘doctor’,‘REVENUES CATEGORY’:‘revenue_category’,‘CASH’:‘cash’,‘CREDIT’:‘credit’,

                  'TOTAL REVENUES':'total_revenues','PATIENTS':'patients'})

set the layout for the application-----------------------------------------------------------------------------------------------------
app=dash.Dash(external_stylesheets=[dbc.themes.CYBORG],meta_tags=[{‘name’: ‘viewport’,

                        'content': 'width=device-width, initial-scale=1.0'}],suppress_callback_exceptions=True)

server=app.server
app.layout=dbc.Container([

     dbc.Row([ dbc.Col(html.H2('MONTHLY HOSPITAL PERFORMANCE DASHBOARD',className='text-center mb4'),width=12)]),

    dbc.Row( html.Marquee("Monthly Hospital Performance Dashboard-Designed by-Mohammed Bahageel-Data Analyst-the Information displayed is stricly confidential"),

```
            style = {'color':'cyan'}),
```
```
    dbc.Row([dbc.Col(
```

    [dbc.Card([dbc.CardImg(src="https://media1.giphy.com/media/MgFP7hqxNoDhRCv6Sd/giphy.gif?cid=5e214886366cfe5b9c075895b1569635b4327781c1b7320b&rid=giphy.gif&ct=g",top=True,bottom=False),

                                dbc.CardBody([html.H4('Abha Private Hospital',className='card-title'),html.P('Choose The revenue Category:',className='card-text'),

                                             dcc.Dropdown(id='selection_op',multi=False , value='CONSULTATION',

                                               options=[{'label':x,'value':x} for x in (df['REVENUESCATEGORY'].unique())] ,clearable=False ,style={"color": "#000000"}      )

]),

                     ])],width=2,xs=12, sm=12, md=12, lg=5, xl=2),dbc.Col([dcc.Graph(id='revenue',figure={})],width=6,xs=12, sm=12, md=12, lg=6, xl=6),])

],fluid=True)
#----------the Callbacks-------------------------------------------------------------------------------------------------------------------------
@app.callback(
```
    Output('revenue','figure'),
```
```
    Input('selection_op','value')
```
)
def update_graph(selected_category):

df22=df[(df['year']==2022)&(df.REVENUESCATEGORY==selected_category)]

df22.columns=df22.columns.str.replace("  ","")

df23=df[(df['year']==2023)&(df.REVENUESCATEGORY==selected_category)]

dfgrouged22=df22.groupby(['Month','Date'])['TOTALREVENUES'].sum().reset_index('Date')

dfgrouged23=df23.groupby(['Month','Date'])['TOTALREVENUES'].sum().reset_index('Date')

dfgrouged22=dfgrouged22.sort_values('Date')

dfgrouged23=dfgrouged23.sort_values('Date')

dfgrouged23['changes']=round(dfgrouged23['TOTALREVENUES']/dfgrouged22['TOTALREVENUES']-1,2)*100

color=np.where(dfgrouged23['changes']>0,'green','red')

fig=make_subplots(rows=2,cols=1,shared_xaxes=True,shared_yaxes=False ,vertical_spacing=0.02,

               y_title='Changes      Revenues',

```
               row_heights=[0.7,0.2] )
```
```
fig.layout.template="plotly_dark"
```

fig.add_trace(go.Scatter(x=dfgrouged22.index,y=dfgrouged22['TOTALREVENUES'],line=dict(color='#00FFFF'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(0,255,255,0.4)',name="Revenues in 2022"),row=1,col=1,secondary_y=False)

fig.add_trace(go.Scatter(x=dfgrouged23.index,y=dfgrouged23['TOTALREVENUES'],line=dict(color='#66FF33'),line_shape='spline',fill='tonexty' ,fillcolor='rgba(102,255,51,0.4)',name="Revenues in 2023"),row=1,col=1,secondary_y=False)

fig.add_trace(go.Bar( x=dfgrouged23.index,y=dfgrouged23['changes'],marker_color=color,name='change%'),row=2,col=1,secondary_y=False)

fig.update_layout(title=f'Total Hospital Monthly Revenues of {selected_category} ',xaxis=dict(showgrid=False),yaxis=dict(showgrid=False),

                hovermode='x unified', plot_bgcolor='#000000',paper_bgcolor='#000000' ,showlegend=False)

```
fig.update_traces(xaxis='x2' )
```
```
return fig
```

if name==‘main’:
app.run_server(debug=True, port=8000)

if name==‘main’:
app.run_server(debug=True, port=8000)
LINK TO DATA
HERE dataset.xlsx - Google Sheets

jcuypers · March 16, 2023, 1:41pm

you renamed the column to revenue_category in the df but you are still querying on REVENUESCATEGORY

df=df.rename(columns={‘CLINIC’:‘clinic’,‘DOCTOR’:‘doctor’,‘REVENUES CATEGORY’:‘revenue_category’,‘CASH’:‘cash’,‘CREDIT’:‘credit’,'TOTAL REVENUES':'total_revenues','PATIENTS':'patients'})

also, not sure if this is an issue but in your google sheet the column is called ‘REVENUES CATEGORY’ with a space and it looks like you are trying to rename it from ‘REVENUESCATEGORY’

jcuypers · March 16, 2023, 1:48pm

just dump out the df / df.info for us to understand what is actually there and what are the names

jcuypers · March 16, 2023, 1:50pm

And pls pls pls format your code until its formatted correctly. if its not, redo

Bahageel88 · March 16, 2023, 1:55pm

I renamed it but due to white spaces it did not change it so it remains the same I set multi to False and value to CONSULTATION
But Did not appear as default value why I have no clue

jcuypers · March 16, 2023, 1:56pm

so dump out the format of the df before you start altering it

you remove the space ok, then you rename everything but you still query on the old names…

either remove the renaming or query on the right names

hoatran · March 16, 2023, 2:07pm

I saw some problem in your code. As jcuypers said, you still using old name of columns and value of Dropdown has a space at the end. So I think you should revise your code as below:

import pandas as pd
import numpy as np
import dash
from dash import html
from dash import dcc
import plotly.graph_objects as go
from dash.dependencies import Input ,Output
import dash_bootstrap_components as dbc
import plotly.express as px
from plotly.subplots import make_subplots
from dash import dcc, html, callback, Output
from pathlib import Path

#--------------------------Read the data -------------------------------------------------
df=pd.read_excel('dataset.xlsx')

#------General Hospital Report ------------------------------------------------------------
#concert the date to datetime format
df['Date']=pd.to_datetime(df['Date'])
#extract the month
df['Month']=df['Date'].dt.month_name()
df['year']=df['Date'].dt.year
#-----------------------------remove the white spaces
df.columns=df.columns.str.replace(" ","")
df=df.rename(columns={'CLINIC':'clinic','DOCTOR':'doctor','REVENUESCATEGORY':'revenue_category','CASH':'cash','CREDIT':'credit',
'TOTALREVENUES':'total_revenues','PATIENTS':'patients'})

app=dash.Dash(external_stylesheets=[dbc.themes.CYBORG],meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0'}],suppress_callback_exceptions=True)
server=app.server
app.layout=dbc.Container([
    dbc.Row([
        dbc.Col(
            html.H2('MONTHLY HOSPITAL PERFORMANCE DASHBOARD',className='text-center mb4')
            ,width=12)
    ]),
    dbc.Row(
        html.Marquee("Monthly Hospital Performance Dashboard-Designed by-Mohammed Bahageel-Data Analyst-the Information displayed is stricly confidential"),
        style = {'color':'cyan'}),
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardImg(src='https://media1.giphy.com/media/MgFP7hqxNoDhRCv6Sd/giphy.gif?cid=5e214886366cfe5b9c075895b1569635b4327781c1b7320b&rid=giphy.gif&ct=g',top=True,bottom=False),
                dbc.CardBody([
                    html.H4('Abha Private Hospital',className='card-title'),
                    html.P('Choose The revenue Category:',className='card-text'),
                    dcc.Dropdown(id='selection_op',
                                 multi=False,
                                 options=[{'label':x,'value':x} for x in df['revenue_category'].unique()],
                                 value='CONSULTATION ',
                                 clearable=False ,style={'color': '#000000'})
                ]),
            ])
        ],width=2,xs=12, sm=12, md=12, lg=5, xl=2),
        dbc.Col([
            dcc.Graph(id='revenue',figure={})
        ],width=6,xs=12, sm=12, md=12, lg=6, xl=6)
    ])
],fluid=True)

#----------the Callbacks-------------------------------------------------------------------------------------------------------------------------

def update_graph(selected_category):
    df22=df[(df['year']==2022)&(df['revenue_category']==selected_category)]
    df22.columns=df22.columns.str.replace(" ","")
    df23=df[(df['year']==2023)&(df['revenue_category']==selected_category)]
    dfgrouged22=df22.groupby(['Month','Date'])['total_revenues'].sum().reset_index('Date')
    dfgrouged23=df23.groupby(['Month','Date'])['total_revenues'].sum().reset_index('Date')
    dfgrouged22=dfgrouged22.sort_values('Date')
    dfgrouged23=dfgrouged23.sort_values('Date')
    dfgrouged23['changes']=round(dfgrouged23['total_revenues']/dfgrouged22['total_revenues']-1,2)*100
    color=np.where(dfgrouged23['changes']>0,'green','red')
    fig=make_subplots(rows=2,cols=1,shared_xaxes=True,shared_yaxes=False ,vertical_spacing=0.02,
    y_title='Changes Revenues',
    row_heights=[0.7,0.2])
    fig.layout.template="plotly_dark"
    fig.add_trace(go.Scatter(x=dfgrouged22.index,
                             y=dfgrouged22['total_revenues'],
                             line=dict(color='#00FFFF'),
                             line_shape='spline',
                             fill='tonexty' ,
                             fillcolor='rgba(0,255,255,0.4)',
                             name="Revenues in 2022"),
                  row=1,
                  col=1,secondary_y=False)
    fig.add_trace(go.Scatter(x=dfgrouged23.index,
                             y=dfgrouged23['total_revenues'],
                             line=dict(color='#66FF33'),
                             line_shape='spline',
                             fill='tonexty' ,
                             fillcolor='rgba(102,255,51,0.4)',
                             name="Revenues in 2023"),
                  row=1,
                  col=1,secondary_y=False)
    return fig
if __name__ == "__main__":
    app.run_server(debug=False)

Bahageel88 · March 16, 2023, 2:18pm

Ok I will revise the code and get back to you because I am far from my PC but obviously this correct
Thank you very much indeed both @jcuypers @hoatran

Topic		Replies	Views
Dynamic multi dropdown not showing default value on page load Dash Python question	2	1208	June 1, 2022
Drop down only shows default value when used through call back with dcc Interval Dash Python	1	1626	July 23, 2018
Dropdown not displaying in default layout when dcc.Graph figure is {} Dash Python	11	649	February 8, 2021
Default values of dropdown not updated on page load and refresh Dash Python	0	261	July 14, 2020
Please help me with code Dash Python	0	278	February 27, 2019

Dropdown default value doesnot display on first load

set the layout for the application-----------------------------------------------------------------------------------------------------

set the layout for the application-----------------------------------------------------------------------------------------------------

set the layout for the application-----------------------------------------------------------------------------------------------------

Related topics