Graph not showing in Dashboard

Dash Python
1

Hey guys,
I am having issue which the graph that is not showing in Dashboard.
There are two graphs in my dashboard, out of which first one (Map) takes input from user as dropdown and second one (bar graph) takes one more input from user as year in slider form but second graph is not showing up and there is no error in terminal.

Code:

app = dash.Dash(__name__)


app.layout = html.Div([
    html.Div([
        html.Label(['Demo Dash !'] , style = {'text-align':'center' , 'font-size':'100%' , 'color':'black' , 'font-weight':'bold'}),
        html.Hr(),
        dcc.Dropdown(
            id = 'demo-dropdown',
            options = [{'label':str(item) , 'value':str(item) } for item in sorted(df_copy['country_txt'].unique())],
            placeholder='Select a country...',
            style={"width": "50%"},
            value = "United States",
            optionHeight = 25,
            searchable= True,
            search_value= '',
            clearable =True
            )]),
    html.Div([dcc.Graph(id = 'id-graph1', config = {'scrollZoom' : True} , style = {'width':'50%'}),  
             dcc.Graph(id = 'id-graph2' , style = {'width': '50%'})],
             #style = {'width':'50%', 'position':'absolute'}
            ),
    html.Div([ html.Pre('Filter by Year'),
            dcc.Slider(
                        id = 'the_year',
                        min= df_copy['year'].min(),
                        max= df_copy['year'].max(),
                        step= 1,
                        dots = True,
                        marks={item: str(item) for item in df_copy['year'].unique().tolist()[::3]},
                        value= df_copy['year'].min(),
                        
                        
                        #vertical = True
                    )  
       
            ], style = {'width':'70%'})
         ])


@app.callback(
     Output('id-graph1', 'figure'),
    [Input('demo-dropdown', 'value')])
def update_output(value):
    df_sub = df_copy.loc[df_copy['country_txt'] == value]
    random.seed(1)
    #print(df_sub.head())
    #create graph
    
    location =[(go.Scattermapbox(lon = df_sub['longitude'], 
                                 lat = df_sub['latitude'] , 
                                 mode = 'markers',
                                 marker=dict(size=5 , allowoverlap = False , opacity = 0.5),
                                 hoverinfo= 'lat+lon+text' ,
                                 opacity= 0.4 ,
                                 hovertext= df_sub['casualities_median'],
                                 
                                 customdata = df_sub['region_txt'],
                                 
                                 )) ]
    

    # return graph
    return {'data': location , 
            'layout': go.Layout(uirevision = 'foo' ,
                                hovermode = 'closest' ,
                                hoverdistance = 2 ,
                               
                                mapbox =dict(accesstoken = mapbox_access_token , 
                                             style = 'open-street-map',
                                             center = dict(lat = random.choice(df_sub['latitude'].tolist()) , lon = random.choice(df_sub['longitude'].tolist())),
                                             zoom = 3
                                           ) 
                               )
           }
@app.callback(Output('id-graph2','figure'),
             [Input('the-year','value'),
              Input('demo-dropdown','value')])    
def new_graph(year_value , drop_value):
    
    dff = df_copy.loc[df_copy['country_txt'] == drop_value].loc[df_copy['year'] == year_value]
    
    print(dff.head())
    
    fig = px.bar(dff['weapon_type'].value_counts()[:10])
    
    return fig
    
if __name__ == '__main__':
    app.run_server(debug = False)

Screenshot of Dashboard:
Upper half of dashboard

upper half of Dashboard
upper half of Dashboard1920×1080 111 KB

lower half of Dashboard:
lower half of Dashboard
lower half of Dashboard1310×926 5.5 KB

2

@chriddyp @irr3 @adamschroeder I think this community is inactive here. People are not getting responses here.

3

looks like that to me as well mostly. Plotly cannot give much support apart from buying into enterprise. So the open source version is community support.

4

Can you help me catch the issue from above code?

5

no sorry, still at beginner level here

6

Hi @matsujju
Right above/before you create the fig = px.bar(…) Try:

primt(dff['weapon_type'].value_counts()[:10])

What do you get?
Is that Sonny that can go in a bar chart?

You also have an unwanted space between id and comma here:

dcc.Graph(id = 'id-graph2' , style = {'width': '50%'})
7

Nothing is printing which is odd as there is also no error and I have also fix that space in id. And if I use this code of bar graph normally it is working.
Screenshot of terminal:

Untitled
Untitled1488×572 11.1 KB

And yes we can use value_counts in bar graph. Here:

Untitled
Untitled1254×569 27.2 KB

8

I also face with this kind of no printout. Then, when I add “fig.show()” statement just before the return of the second figure, it solved my issue but actually, I do not know why is this happening. One possible root cause is one of the inputs taken in function later than another. However, I did not check it yet.

9

I think you have defined the slider with id “the_year” and in the callback you are using “the-year”…