Px.imshow do not display in Dash

Dash Python
1

Hi,
I am working with Spyder. Here the result :

image
image1804×644 29.3 KB

Here is the code and the plot imshow do not display in Dash :

pp = dash.Dash(__name__)

app.layout = html.Div([html.Img(src=logo,
               style={'display': 'inline-block', 'margin':'0px 0px 0px 500px',
                      'height':'30%', 'width':'30%', 'textAlign': 'center'}),
  html.Br(),
  html.I('Par Maxime Le Tutour', style={'font-size':22}),
  html.Br(),
  html.H1("Analyse des offres d'emplois en 2021 de Pôle Emploi", style={'textAlign': 'center', 'font-size':45}),
  html.Br(),
  html.Div(
    children=[
    html.Div(
      children=[
      html.H2('Sélection_département'),
      html.Br(),
      dcc.Dropdown(
        id='departement_choisi',
        options=[{'label':dep, 'value':dep} for dep in liste_dep],
      style={'width':'400px', 'margin':'0 auto'})],

    style={'width':'400', 'height':'150px', 'display':'inline-block',
               'vertical-align':'top', 'border':'1px solid black', 'padding':'20px', "background-color": "#92a8d1"}),
    html.Div(
      children=[
      dcc.Graph(id='heatmap',figure = {})],
      style={'width':'700px', 'height':'650px','display':'inline-block'})
    ]),],
  style={'text-align':'left', 'display':'inline-block', 'width':'100%'})


# Create a callback for the Minor Category dropdown to update the line plot
@app.callback(
    Output(component_id='heatmap', component_property='figure'),
    Input(component_id='departement_choisi', component_property='value'))

def update_plot(dep):

    departement = df[df.NomDept == dep]

    dep_head = departement.groupby(["metier"]).agg({"met":"sum"}).sort_values(by="met", ascending = True).head()
    labels_head = dep_head.index.values.tolist()

    dep_tail = departement.groupby(["metier"]).agg({"met":"sum"}).sort_values(by="met", ascending = True).tail()
    labels_tail = dep_tail.index.values.tolist()


    fig = px.imshow(dep_tail, aspect="auto",
                color_continuous_scale="reds_r", text_auto=True, y=labels_tail)

    fig.update_xaxes(visible=False)
    fig.update_yaxes(visible=True)
    fig.update_traces(ygap = 3, )
    fig.update_layout(hovermode=False, title = dep)
    fig.add_trace(fig.data[0])
    fig.show()


    return fig


if __name__ == '__main__':
    app.run_server(debug=False)```
2

It looks like you used the wrong id in the callback, it should be departement_choisi (the id of your drop down), not Sélection_département (the id of your header). Also, I believe that you normally shouldn’t call fig.show() when you use Dash.

3

Thanks a lot for that quick answer ^^

I corrected the typo and remove the fig.show, but it is still the same…

5

Ok it works now ^^

1 Like