Cannot render barplot in my dashapp

Dash Python
1

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:

image
image945×847 54.7 KB

Can anyone indicate what problem I’m facing. Many thanks in advance

2

Hi @huyDA
Without access to the data, it’s hard to replicate your code and try to find the issue. My recommendation is to add print statements inside the callback function. That will allow you to understand what dff you have and why it’s not plottable.
For example, try this:

def update_data(input_value,start_date,end_date):
    #Ensure the dataframe is not overwritten
    dff = time_merged_melted.copy(deep=True)
    print(dff.head())

    #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) )]
    print("Second dff")
    print(dff.head())
    print(dff.type)
3

Hi Adam,

Thanks for spending your precious time replying my question. I’ve just tried adding bar_graph.show() to my def function and the bar graph shows well but it still does not render in my dash app on local host. Then, doing as you said above, I received the error like this:

Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'NoneType'>:
    None

So, what should I do with dff to solve the problem? Perhaps the data type of dff does not meet the requirement of dash app, does it?

4

the problem was solved totally. It was there:

@app.callback(
    [Output('bar_graph', 'figure')],
    [Input('uiddd', 'value'),
     Input('daterange', 'start_date'),
     Input('daterange', 'end_date')]

square brackets was not needed here!

1 Like