Graph plot not linking with 2 dropdown lists of Years and Months
Question:
I wanted to integrate graph plot to two dropdown lists. One is for years and the other one is for months. After selecting any year from year dropdown and month from months dropdown, I wanted the graph of the month from the year selected to be plotted. But I am not able to do this.
I have created the graph plots of the students joined on the days in the month.
It will be very grateful if any of you solve my doubt.
Click to open image
The graph plot of the selected month from the selected year should be displayed which shows the number of students joined on days of the selected month.
Click to open image
But I am getting this as the result. Please solve the issue .
Nothing is showing in the graph section in the web page.
Click to open image
My code-
dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_3',
options=[
{'label': '2022', 'value': '2022_Year'},
{'label': '2023', 'value': '2023_Year'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
dcc.Dropdown(
id='dropdown_4',
options=[
{'label': 'January', 'value': 'plotd_2023_jan'},
{'label': 'February', 'value': 'plotd_2022_feb'},
{'label': 'March', 'value': 'plotd_2022_mar'},
{'label': 'April', 'value': 'plotd_2022_apr'},
{'label': 'May', 'value': 'plotd_2022_may'},
{'label': 'June', 'value': 'plotd_2022_jun'},
{'label': 'July', 'value': 'plotd_2022_jul'},
{'label': 'August', 'value': 'plotd_2022_aug'},
{'label': 'September', 'value': 'plotd_2022_sep'},
{'label': 'October', 'value': 'plotd_2022_oct'},
{'label': 'November', 'value': 'plotd_2022_nov'},
{'label': 'December', 'value': 'plotd_2022_dec'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_2')),
])
@app.callback(
Output('graph_2', 'figure'),
[Input(component_id='dropdown_3', component_property='value'),
Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
if (year_value == '2022_Year' & month_value == 'plotd_2022_feb'):
plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
plotd_2022_feb.update_layout(bargap=0.2,height=722)
return plotd_2022_feb
if (year_value == '2022_Year' & month_value == 'plotd_2022_mar'):
plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
plotd_2022_mar.update_layout(bargap=0.23,height=724)
return plotd_2022_mar
if (year_value == '2022_Year' & month_value == 'plotd_2022_apr'):
plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
plotd_2022_apr.update_layout(bargap=0.23,height=724)
return plotd_2022_apr
if (year_value == '2022_Year' & month_value == 'plotd_2022_may'):
plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
plotd_2022_may.update_layout(bargap=0.23,height=724)
return plotd_2022_may
if (year_value == '2022_Year' & month_value == 'plotd_2022_jun'):
plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
plotd_2022_jun.update_layout(bargap=0.23,height=724)
return plotd_2022_jun
if (year_value == '2022_Year' & month_value == 'plotd_2022_jul'):
plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
plotd_2022_jul.update_layout(bargap=0.23,height=724)
return plotd_2022_jul
if (year_value == '2022_Year' & month_value == 'plotd_2022_aug'):
plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
plotd_2022_aug.update_layout(bargap=0.23,height=724)
return plotd_2022_aug
if (year_value == '2022_Year' & month_value == 'plotd_2022_sep'):
plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
plotd_2022_sep.update_layout(bargap=0.23,height=724)
return plotd_2022_sep
if (year_value == '2022_Year' & month_value == 'plotd_2022_oct'):
plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
plotd_2022_oct.update_layout(bargap=0.23,height=724)
return plotd_2022_oct
if (year_value == '2022_Year' & month_value == 'plotd_2022_nov'):
plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
plotd_2022_nov.update_layout(bargap=0.23,height=724)
return plotd_2022_nov
if (year_value == '2022_Year' & month_value == 'plotd_2022_dec'):
plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
plotd_2022_dec.update_layout(bargap=0.23,height=724)
return plotd_2022_dec
if (year_value == '2023_Year' & month_value == 'plotd_2023_jan'):
plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
plotd_2023_jan.update_layout(bargap=0.23,height=724)
return plotd_2023_jan
Answers:
After checking your notebook I think you should change as below, instead of & you should use and and I added PreventUpdate to make graphs not update when it doesn’t have value from dropdown:
from dash.exceptions import PreventUpdate
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
dbc.Col([
html.H1('Hackveda '),
html.H2('Statistics'),
], style={'textAlign': 'center'}),
html.Div([
html.H4(children='Students Joined in Year',style={"margin-left": "26px", "margin-top": "20px"}),
dcc.Graph(
id='example-graph',
figure=fig_1
),
html.Div([
html.H4(children='Number of Students in Course',style={"margin-left": "26px"}),
dcc.Graph(id='graph2',figure=fig_2),
])
])
,
dbc.Col([html.H4('Total Interns Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown',
options=[
{'label': '2017', 'value': 'fig_2017'},
{'label': '2018', 'value': 'fig_2018'},
{'label': '2019', 'value': 'fig_2019'},
{'label': '2020', 'value': 'fig_2020'},
{'label': '2021', 'value': 'fig_2021'},
{'label': '2022', 'value': 'fig_2022'},
{'label': '2023', 'value': 'fig_2023'},
],
value='fig_2022',
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph')),
dbc.Col([html.H4('Students Enrolled In Interview Preparation'),
html.H5('Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_1',
options=[
{'label': '2022', 'value': 'plot_2022'},
{'label': '2023', 'value': 'plot_2023'},
],
value='plot_2022',
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_1')),
dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_3',
options=[
{'label': '2022', 'value': '2022_Year'},
{'label': '2023', 'value': '2023_Year'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
dcc.Dropdown(
id='dropdown_4',
options=[
{'label': 'January', 'value': 'plotd_2023_jan'},
{'label': 'February', 'value': 'plotd_2022_feb'},
{'label': 'March', 'value': 'plotd_2022_mar'},
{'label': 'April', 'value': 'plotd_2022_apr'},
{'label': 'May', 'value': 'plotd_2022_may'},
{'label': 'June', 'value': 'plotd_2022_jun'},
{'label': 'July', 'value': 'plotd_2022_jul'},
{'label': 'August', 'value': 'plotd_2022_aug'},
{'label': 'September', 'value': 'plotd_2022_sep'},
{'label': 'October', 'value': 'plotd_2022_oct'},
{'label': 'November', 'value': 'plotd_2022_nov'},
{'label': 'December', 'value': 'plotd_2022_dec'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_2')),
])
@app.callback(
Output('graph', 'figure'),
[Input(component_id='dropdown', component_property='value')]
)
def drop_chart(value):
if value == 'fig_2017':
fig_2017 = px.bar(final_6, x="Students", y="months", orientation='h')
return fig_2017
if value == 'fig_2018':
fig_2018 = px.bar(final_5, x="Students", y="months", orientation='h')
return fig_2018
if value == 'fig_2019':
fig_2019 = px.bar(final_4, x="Students", y="months", orientation='h')
return fig_2019
if value == 'fig_2020':
fig_2020 = px.bar(final_3, x="Students", y="months", orientation='h')
return fig_2020
if value == 'fig_2021':
fig_2021 = px.bar(final_2, x="Students", y="months", orientation='h')
return fig_2021
if value == 'fig_2022':
fig_2022 = px.bar(final_1, x="Students", y="months", orientation='h')
return fig_2022
if value == 'fig_2023':
fig_2023 = px.bar(final_7, x="Students", y="months", orientation='h')
return fig_2023
@app.callback(
Output('graph_1', 'figure'),
[Input(component_id='dropdown_1', component_property='value')]
)
def drop_chart1(value_1):
if value_1 == 'plot_2022':
plot_2022 = px.bar(intprep_2022, x="Students", y="months", orientation='h')
return plot_2022
if value_1 == 'plot_2023':
plot_2023 = px.bar(intprep_2023, x="Students", y="months", orientation='h')
return plot_2023
@app.callback(
Output('graph_2', 'figure'),
[Input(component_id='dropdown_3', component_property='value'),
Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
if (year_value == '2022_Year' and month_value == 'plotd_2022_feb'):
plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
plotd_2022_feb.update_layout(bargap=0.2,height=722)
return plotd_2022_feb
elif (year_value == '2022_Year' and month_value == 'plotd_2022_mar'):
plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
plotd_2022_mar.update_layout(bargap=0.23,height=724)
return plotd_2022_mar
elif (year_value == '2022_Year' and month_value == 'plotd_2022_apr'):
plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
plotd_2022_apr.update_layout(bargap=0.23,height=724)
return plotd_2022_apr
elif (year_value == '2022_Year' and month_value == 'plotd_2022_may'):
plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
plotd_2022_may.update_layout(bargap=0.23,height=724)
return plotd_2022_may
elif (year_value == '2022_Year' and month_value == 'plotd_2022_jun'):
plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
plotd_2022_jun.update_layout(bargap=0.23,height=724)
return plotd_2022_jun
elif (year_value == '2022_Year' and month_value == 'plotd_2022_jul'):
plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
plotd_2022_jul.update_layout(bargap=0.23,height=724)
return plotd_2022_jul
elif (year_value == '2022_Year' and month_value == 'plotd_2022_aug'):
plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
plotd_2022_aug.update_layout(bargap=0.23,height=724)
return plotd_2022_aug
elif (year_value == '2022_Year' and month_value == 'plotd_2022_sep'):
plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
plotd_2022_sep.update_layout(bargap=0.23,height=724)
return plotd_2022_sep
elif (year_value == '2022_Year' and month_value == 'plotd_2022_oct'):
plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
plotd_2022_oct.update_layout(bargap=0.23,height=724)
return plotd_2022_oct
elif (year_value == '2022_Year' and month_value == 'plotd_2022_nov'):
plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
plotd_2022_nov.update_layout(bargap=0.23,height=724)
return plotd_2022_nov
elif (year_value == '2022_Year' and month_value == 'plotd_2022_dec'):
plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
plotd_2022_dec.update_layout(bargap=0.23,height=724)
return plotd_2022_dec
elif (year_value == '2023_Year' and month_value == 'plotd_2023_jan'):
plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
plotd_2023_jan.update_layout(bargap=0.23,height=724)
return plotd_2023_jan
else:
raise PreventUpdate
if __name__ == '__main__':
app.run_server(port=1085)
I wanted to integrate graph plot to two dropdown lists. One is for years and the other one is for months. After selecting any year from year dropdown and month from months dropdown, I wanted the graph of the month from the year selected to be plotted. But I am not able to do this.
I have created the graph plots of the students joined on the days in the month.
It will be very grateful if any of you solve my doubt.
Click to open image
The graph plot of the selected month from the selected year should be displayed which shows the number of students joined on days of the selected month.
Click to open image
But I am getting this as the result. Please solve the issue .
Nothing is showing in the graph section in the web page.
Click to open image
My code-
dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_3',
options=[
{'label': '2022', 'value': '2022_Year'},
{'label': '2023', 'value': '2023_Year'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
dcc.Dropdown(
id='dropdown_4',
options=[
{'label': 'January', 'value': 'plotd_2023_jan'},
{'label': 'February', 'value': 'plotd_2022_feb'},
{'label': 'March', 'value': 'plotd_2022_mar'},
{'label': 'April', 'value': 'plotd_2022_apr'},
{'label': 'May', 'value': 'plotd_2022_may'},
{'label': 'June', 'value': 'plotd_2022_jun'},
{'label': 'July', 'value': 'plotd_2022_jul'},
{'label': 'August', 'value': 'plotd_2022_aug'},
{'label': 'September', 'value': 'plotd_2022_sep'},
{'label': 'October', 'value': 'plotd_2022_oct'},
{'label': 'November', 'value': 'plotd_2022_nov'},
{'label': 'December', 'value': 'plotd_2022_dec'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_2')),
])
@app.callback(
Output('graph_2', 'figure'),
[Input(component_id='dropdown_3', component_property='value'),
Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
if (year_value == '2022_Year' & month_value == 'plotd_2022_feb'):
plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
plotd_2022_feb.update_layout(bargap=0.2,height=722)
return plotd_2022_feb
if (year_value == '2022_Year' & month_value == 'plotd_2022_mar'):
plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
plotd_2022_mar.update_layout(bargap=0.23,height=724)
return plotd_2022_mar
if (year_value == '2022_Year' & month_value == 'plotd_2022_apr'):
plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
plotd_2022_apr.update_layout(bargap=0.23,height=724)
return plotd_2022_apr
if (year_value == '2022_Year' & month_value == 'plotd_2022_may'):
plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
plotd_2022_may.update_layout(bargap=0.23,height=724)
return plotd_2022_may
if (year_value == '2022_Year' & month_value == 'plotd_2022_jun'):
plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
plotd_2022_jun.update_layout(bargap=0.23,height=724)
return plotd_2022_jun
if (year_value == '2022_Year' & month_value == 'plotd_2022_jul'):
plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
plotd_2022_jul.update_layout(bargap=0.23,height=724)
return plotd_2022_jul
if (year_value == '2022_Year' & month_value == 'plotd_2022_aug'):
plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
plotd_2022_aug.update_layout(bargap=0.23,height=724)
return plotd_2022_aug
if (year_value == '2022_Year' & month_value == 'plotd_2022_sep'):
plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
plotd_2022_sep.update_layout(bargap=0.23,height=724)
return plotd_2022_sep
if (year_value == '2022_Year' & month_value == 'plotd_2022_oct'):
plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
plotd_2022_oct.update_layout(bargap=0.23,height=724)
return plotd_2022_oct
if (year_value == '2022_Year' & month_value == 'plotd_2022_nov'):
plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
plotd_2022_nov.update_layout(bargap=0.23,height=724)
return plotd_2022_nov
if (year_value == '2022_Year' & month_value == 'plotd_2022_dec'):
plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
plotd_2022_dec.update_layout(bargap=0.23,height=724)
return plotd_2022_dec
if (year_value == '2023_Year' & month_value == 'plotd_2023_jan'):
plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
plotd_2023_jan.update_layout(bargap=0.23,height=724)
return plotd_2023_jan
After checking your notebook I think you should change as below, instead of & you should use and and I added PreventUpdate to make graphs not update when it doesn’t have value from dropdown:
from dash.exceptions import PreventUpdate
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
dbc.Col([
html.H1('Hackveda '),
html.H2('Statistics'),
], style={'textAlign': 'center'}),
html.Div([
html.H4(children='Students Joined in Year',style={"margin-left": "26px", "margin-top": "20px"}),
dcc.Graph(
id='example-graph',
figure=fig_1
),
html.Div([
html.H4(children='Number of Students in Course',style={"margin-left": "26px"}),
dcc.Graph(id='graph2',figure=fig_2),
])
])
,
dbc.Col([html.H4('Total Interns Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown',
options=[
{'label': '2017', 'value': 'fig_2017'},
{'label': '2018', 'value': 'fig_2018'},
{'label': '2019', 'value': 'fig_2019'},
{'label': '2020', 'value': 'fig_2020'},
{'label': '2021', 'value': 'fig_2021'},
{'label': '2022', 'value': 'fig_2022'},
{'label': '2023', 'value': 'fig_2023'},
],
value='fig_2022',
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph')),
dbc.Col([html.H4('Students Enrolled In Interview Preparation'),
html.H5('Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_1',
options=[
{'label': '2022', 'value': 'plot_2022'},
{'label': '2023', 'value': 'plot_2023'},
],
value='plot_2022',
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_1')),
dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
dcc.Dropdown(
id='dropdown_3',
options=[
{'label': '2022', 'value': '2022_Year'},
{'label': '2023', 'value': '2023_Year'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
dcc.Dropdown(
id='dropdown_4',
options=[
{'label': 'January', 'value': 'plotd_2023_jan'},
{'label': 'February', 'value': 'plotd_2022_feb'},
{'label': 'March', 'value': 'plotd_2022_mar'},
{'label': 'April', 'value': 'plotd_2022_apr'},
{'label': 'May', 'value': 'plotd_2022_may'},
{'label': 'June', 'value': 'plotd_2022_jun'},
{'label': 'July', 'value': 'plotd_2022_jul'},
{'label': 'August', 'value': 'plotd_2022_aug'},
{'label': 'September', 'value': 'plotd_2022_sep'},
{'label': 'October', 'value': 'plotd_2022_oct'},
{'label': 'November', 'value': 'plotd_2022_nov'},
{'label': 'December', 'value': 'plotd_2022_dec'},
],
style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
(dcc.Graph(id='graph_2')),
])
@app.callback(
Output('graph', 'figure'),
[Input(component_id='dropdown', component_property='value')]
)
def drop_chart(value):
if value == 'fig_2017':
fig_2017 = px.bar(final_6, x="Students", y="months", orientation='h')
return fig_2017
if value == 'fig_2018':
fig_2018 = px.bar(final_5, x="Students", y="months", orientation='h')
return fig_2018
if value == 'fig_2019':
fig_2019 = px.bar(final_4, x="Students", y="months", orientation='h')
return fig_2019
if value == 'fig_2020':
fig_2020 = px.bar(final_3, x="Students", y="months", orientation='h')
return fig_2020
if value == 'fig_2021':
fig_2021 = px.bar(final_2, x="Students", y="months", orientation='h')
return fig_2021
if value == 'fig_2022':
fig_2022 = px.bar(final_1, x="Students", y="months", orientation='h')
return fig_2022
if value == 'fig_2023':
fig_2023 = px.bar(final_7, x="Students", y="months", orientation='h')
return fig_2023
@app.callback(
Output('graph_1', 'figure'),
[Input(component_id='dropdown_1', component_property='value')]
)
def drop_chart1(value_1):
if value_1 == 'plot_2022':
plot_2022 = px.bar(intprep_2022, x="Students", y="months", orientation='h')
return plot_2022
if value_1 == 'plot_2023':
plot_2023 = px.bar(intprep_2023, x="Students", y="months", orientation='h')
return plot_2023
@app.callback(
Output('graph_2', 'figure'),
[Input(component_id='dropdown_3', component_property='value'),
Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
if (year_value == '2022_Year' and month_value == 'plotd_2022_feb'):
plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
plotd_2022_feb.update_layout(bargap=0.2,height=722)
return plotd_2022_feb
elif (year_value == '2022_Year' and month_value == 'plotd_2022_mar'):
plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
plotd_2022_mar.update_layout(bargap=0.23,height=724)
return plotd_2022_mar
elif (year_value == '2022_Year' and month_value == 'plotd_2022_apr'):
plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
plotd_2022_apr.update_layout(bargap=0.23,height=724)
return plotd_2022_apr
elif (year_value == '2022_Year' and month_value == 'plotd_2022_may'):
plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
plotd_2022_may.update_layout(bargap=0.23,height=724)
return plotd_2022_may
elif (year_value == '2022_Year' and month_value == 'plotd_2022_jun'):
plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
plotd_2022_jun.update_layout(bargap=0.23,height=724)
return plotd_2022_jun
elif (year_value == '2022_Year' and month_value == 'plotd_2022_jul'):
plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
plotd_2022_jul.update_layout(bargap=0.23,height=724)
return plotd_2022_jul
elif (year_value == '2022_Year' and month_value == 'plotd_2022_aug'):
plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
plotd_2022_aug.update_layout(bargap=0.23,height=724)
return plotd_2022_aug
elif (year_value == '2022_Year' and month_value == 'plotd_2022_sep'):
plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
plotd_2022_sep.update_layout(bargap=0.23,height=724)
return plotd_2022_sep
elif (year_value == '2022_Year' and month_value == 'plotd_2022_oct'):
plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
plotd_2022_oct.update_layout(bargap=0.23,height=724)
return plotd_2022_oct
elif (year_value == '2022_Year' and month_value == 'plotd_2022_nov'):
plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
plotd_2022_nov.update_layout(bargap=0.23,height=724)
return plotd_2022_nov
elif (year_value == '2022_Year' and month_value == 'plotd_2022_dec'):
plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
plotd_2022_dec.update_layout(bargap=0.23,height=724)
return plotd_2022_dec
elif (year_value == '2023_Year' and month_value == 'plotd_2023_jan'):
plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
plotd_2023_jan.update_layout(bargap=0.23,height=724)
return plotd_2023_jan
else:
raise PreventUpdate
if __name__ == '__main__':
app.run_server(port=1085)