I am building my first dash app but I have been having trouble rendering the bar graph. Basically, my app has two filters: dcc.Dropdown for the column ‘id’ and dcc.DatePickerRange for the ‘date’ column, which helps filter my data frame named time_merged_melted
.
my code looks like:
app = dash.Dash(__name__)
#--------------------------------------------------
app.layout = html.Div(children=[
add_logo(),
*make_break(2),
html.H1('Monkey Users Dashboard'),
*make_break(2),
html.Div
([
# Menu Dropdown
html.Div
([
html.H2('Filters'),
dcc.Dropdown(id='uiddd',
options=[{'label': i, 'value': i} for i in time_merged_melted.id.unique()], #list of all unique user ids
value='-12263165283090724', #initial id
multi=False, #select only one user id each time
clearable = False,
placeholder='Filter by User ID...',
style={'margin':'auto', "width":'39%', 'display':'inline-block'}),
]),
#Date Range Picker
html.Div
([
dcc.DatePickerRange(id='daterange',
min_date_allowed=time_merged['date'].min(),
max_date_allowed=time_merged['date'].max(),
start_date = time_merged['date'].min(),
end_date = time_merged['date'].max(),
clearable = False,
display_format='MMM Do, YY', #determine format of date
style={'margin':'auto', "width":'50%', 'display':'inline-block'}),
]),
], style={'margin':'auto', "width":'50%', "height":"50%", 'border':'1px solid black'}),
html.Div
(children=[
html.Div
([
dcc.Graph(id='bar_graph')
], className='six columns')
])
],style={'text-align':'center', 'width':'100%'})
#--------------------------------------------------
@app.callback(
[Output('bar_graph', 'figure')],
[Input('uiddd', 'value'),
Input('daterange', 'start_date'),
Input('daterange', 'end_date')]
)
def update_data(input_value,start_date,end_date):
#Ensure the dataframe is not overwritten
dff = time_merged_melted.copy(deep=True)
#Conditionally filter the dataframe using the input
if input_value:
dff = dff[(dff.id.str.contains(input_value)) & ( (dff.date >= start_date) & (dff.date <= end_date) )]
bar_graph = px.bar(data_frame = dff,
x='type',
y='count',
title=f'Statistics for contents learned by the user {input_value} from {start_date} to {end_date}')
#Return the figure to render
return(bar_graph)
#--------------------------------------------------
if __name__ == '__main__':
app.run_server(debug=False)
here time_merged_melted
looks like:
Can anyone indicate what problem I’m facing. Many thanks in advance