Indicator chart disappears when dropdown value changes

Moo · February 17, 2022, 6:01pm

Hi!
I am using an indicator chart and a callback in my webapp. I would like the chart figure to change when the user selects from a drop down adn a date picker. The code I use (below) makes the indicator figure disappear once a dropdown value is selected (or even once the page is refreshed without selection).
Does anyone know what am I doing wrong here? I’m quite new to dash and to python in general.

pop_chgrate = cbank_df[cbank_df["created_at_yearmonth"]==
                       cbank_df["created_at_yearmonth"].sort_values(ascending = False).unique()[1]]["popularity_changerate"].agg("median")
pop_chgrate = round(pop_chgrate,2)

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

app.layout =  html.Div(children=
                       [html.Span('Popularity', style={'font-size':'19px','color':'#212121',
                                                       'display':'flex','justify-content':'center',
                                                       'padding':'15px 0px 0px 0px'}),

                        html.Br(),
                        html.Br(),
                        dcc.Graph(id='pop_chgrate',figure=fig, style={"height": 50, "width": 100, 'display':'inline-block'}),
                        html.Span('in likes and retweets vs last month',style={'font-size':'18px', 
                                                                                 'padding':'35px 10px 0px 10px',
                                                                                 'font-style':'italic'})
                       ],
                       style={'width':'230px','height':'268px','border':'1px solid lightgrey', 'borderRadius':'15px',
                              'borderWidth':'1px','box-shadow': '2px 2px 2px lightgrey','display':'inline-block',
                              'margin':'10px 0px 0px 42px'}
                      )
@app.callback(
                Output(component_id = 'pop_chgrate',component_property='figure'),
                Input(component_id ='date_picker', component_property='start_date'),
                Input(component_id ='date_picker', component_property='end_date'),
                Input(component_id ='bank_dropdown' , component_property='value')
             )
def update_most_pop_lang_pie(start_date,end_date,bank_name):
    pop_chgrate_copy = cbank_df.copy(deep=True)
 
    if start_date is not None:
        st_date_string = start_date
        bank_st_date_string = start_date
    else:
        st_date_string = tweets_df['created_at'].apply(str).str.slice(0,10).min()
        bank_st_date_string = tweets_df[tweets_df['author_name']==bank_name]['created_at'].apply(str).str.slice(0,10).min()
   
    if end_date is not None:
        e_date_string = end_date
        bank_e_date_string = end_date
    else:
        e_date_string = tweets_df['created_at'].apply(str).str.slice(0,10).max()
        bank_e_date_string = tweets_df[tweets_df['author_name']==bank_name]['created_at'].apply(str).str.slice(0,10).max()   
    
    
    if bank_name:
        pop_chgrate_copy = cbank_df.copy(deep=True)
        pop_chgrate = pop_chgrate_copy[(pop_chgrate_copy['author_name']==bank_name) & 
                                              (pop_chgrate_copy['created_at_yearmonth']>= bank_st_date_string[0:7]) &
                                              (pop_chgrate_copy['created_at_yearmonth']<= bank_e_date_string[0:7])]["popularity_changerate"].agg("median")
        pop_chgrate = round(pop_chgrate,2)


    else:
        pop_chgrate_copy = cbank_df.copy(deep=True)
        pop_chgrate = pop_chgrate_copy[pop_chgrate_copy['created_at_yearmonth']==
                                             pop_chgrate_copy['created_at_yearmonth'].sort_values(ascending = False).unique()[1]]["popularity_changerate"].agg("median")
        pop_chgrate = round(pop_chgrate,2)
        
 
    fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )

    return fig

and this is how the output looks like

jlfsjunior · February 17, 2022, 7:09pm

Hi,

It is a bit hard to say what exactly is wrong without a reproducible example, but it helps you debugging to insert a print(pop_chgrate) just before the figure is created in the end of the callback. I suspect that you have a nan or None value for po_chgrate.

Moo · February 17, 2022, 7:39pm

Hi @jlfsjunior ,
Thanks for your reply.

I tried to print but for some reason, nothing get printed (not even a static message)

Here is a reproducible example

import dataiku

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import pandas as pd
from dash_table import DataTable
from dash_table.Format import Format, Group
from datetime import date
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from dash_iconify import DashIconify

bank_dropdown_df = ['A','B','C']

pop_chgrate = 1.12

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

app.layout =  html.Div(children=
                       [html.Div(children=
                                 [
                                    html.Span('Select Bank', style={'font-size':'19px','color':'#212121',
                                                                                 'font-style':'bold','textAlign':'right',
                                                                                 'padding':'30px 0px 15px 50px'
                                                                                 #'padding':'30px 0px 15px 230px'
                                                                                }),
                                    html.Br(),
                                    dcc.Dropdown(id='bank_dropdown',
                                                options=[{'label':bank,'value':bank} for bank in bank_dropdown_df],
                                                style={'width':'290px','margin':'12px 0px 15px 20px', 'textAlign':'left'}),
                                    html.Br(),
                                    html.Span('Select Date', style={'font-size':'19px','color':'#212121',
                                                                     'font-style':'bold','textAlign':'left'}),
                                                                     
                                     dcc.DatePickerRange(
                                                         id='date_picker',
                                                         initial_visible_month=datetime.datetime.now(),
                                                         display_format='Y-MM-DD',
                                                         min_date_allowed ='2021-01-01',
                                                         max_date_allowed = '2022-01-31',
                                                         clearable=True,
                                                         style={'padding':'20px 0px 15px 20px' #'padding':'20px 0px 15px 30px'
                                                               }),
                                    html.Br()
                                 ]),
                        html.Div(children=
                                 [
                                    html.Span('Popularity', style={'font-size':'19px','color':'#212121',
                                                                   'justify-content':'center',
                                                                   'padding':'15px 0px 0px 0px'}),
                                    html.Br(),
                                    html.Br(),
                                    dcc.Graph(id='pop_chgrate',figure=fig, style={"height": 50, "width": 100}),
                                    html.Span('in likes and retweets vs last month',style={'font-size':'18px', 
                                                                                             'padding':'35px 10px 0px 10px',
                                                                                             'font-style':'italic'})
                                   ],
                                   style={'width':'230px','height':'268px','border':'1px solid lightgrey', 'borderRadius':'15px',
                                          'borderWidth':'1px','box-shadow': '2px 2px 2px lightgrey',
                                          'margin':'10px 0px 0px 42px'}
                                          )
                       ])
@app.callback(
                Output(component_id = 'pop_chgrate',component_property='figure'),
                Input(component_id ='date_picker', component_property='start_date'),
                Input(component_id ='date_picker', component_property='end_date'),
                Input(component_id ='bank_dropdown' , component_property='value')
             )
def update_most_pop_lang_pie(start_date,end_date,bank_name):
    
    if start_date is not None:
        st_date_string = start_date
        bank_st_date_string = start_date
    else:
        st_date_string = '2021-01-01'
        bank_st_date_string = '2021-01-01'
   
    if end_date is not None:
        e_date_string = end_date
        bank_e_date_string = end_date
    else:
        e_date_string = '2022-01-31'
        bank_e_date_string ='2022-01-31'
    
    if bank_name:
        pop_chgrate = 1.17


    else:
        pop_chgrate = -1.17
        
    print(pop_chgrate)
    fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )

    return fig

Hope it helps

jlfsjunior · February 17, 2022, 8:03pm

Are you running the app in debug mode? No errors raised?

Moo · February 17, 2022, 8:08pm

I don’t know how to run in debug mode. I’m running it from Dataiku Dash.

Yes, no errors but the indicator doesn’t appear. The indicator appears only when I disable (comment) the callback

Moo · February 17, 2022, 8:11pm

With the callback

import dataiku

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import pandas as pd
from dash_table import DataTable
from dash_table.Format import Format, Group
from datetime import date
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from dash_iconify import DashIconify

bank_dropdown_df = ['A','B','C']

pop_chgrate = -1.17

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=-1.17,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

app.layout =  html.Div(children=
                       [html.H1(id='a',children=[f'{pop_chgrate}']),
                        html.Div(children=
                                 [
                                    html.Span('Select Bank', style={'font-size':'19px','color':'#212121',
                                                                                 'font-style':'bold','textAlign':'right',
                                                                                 'padding':'30px 0px 15px 50px'
                                                                                 #'padding':'30px 0px 15px 230px'
                                                                                }),
                                    html.Br(),
                                    dcc.Dropdown(id='bank_dropdown',
                                                options=[{'label':bank,'value':bank} for bank in bank_dropdown_df],
                                                style={'width':'290px','margin':'12px 0px 15px 20px', 'textAlign':'left'}),
                                    html.Br(),
                                    html.Span('Select Date', style={'font-size':'19px','color':'#212121',
                                                                     'font-style':'bold','textAlign':'left'}),
                                                                     
                                     dcc.DatePickerRange(
                                                         id='date_picker',
                                                         initial_visible_month=datetime.datetime.now(),
                                                         display_format='Y-MM-DD',
                                                         min_date_allowed ='2021-01-01',
                                                         max_date_allowed = '2022-01-31',
                                                         clearable=True,
                                                         style={'padding':'20px 0px 15px 20px' #'padding':'20px 0px 15px 30px'
                                                               }),
                                    html.Br()
                                 ]),
                        html.Div(children=
                                 [
                                    html.Span('Popularity', style={'font-size':'19px','color':'#212121',
                                                                   'justify-content':'center',
                                                                   'padding':'15px 0px 0px 0px'}),
                                    html.Br(),
                                    html.Br(),
                                    dcc.Graph(id='pop_chgrate',figure=fig, style={"height": 50, "width": 100}),
                                    html.Span('in likes and retweets vs last month',style={'font-size':'18px', 
                                                                                             'padding':'35px 10px 0px 10px',
                                                                                             'font-style':'italic'})
                                   ],
                                   style={'width':'230px','height':'268px','border':'1px solid lightgrey', 'borderRadius':'15px',
                                          'borderWidth':'1px','box-shadow': '2px 2px 2px lightgrey',
                                          'margin':'10px 0px 0px 42px'}
                                          )
                       ])
@app.callback(
                Output(component_id = 'pop_chgrate',component_property='figure'),
                Output(component_id = 'a',component_property='children'),
                Input(component_id ='date_picker', component_property='start_date'),
                Input(component_id ='date_picker', component_property='end_date'),
                Input(component_id ='bank_dropdown' , component_property='value')
             )
def update_most_pop_lang_pie(start_date,end_date,bank_name):
    
    if start_date is not None:
        st_date_string = start_date
        bank_st_date_string = start_date
    else:
        st_date_string = '2021-01-01'
        bank_st_date_string = '2021-01-01'
   
    if end_date is not None:
        e_date_string = end_date
        bank_e_date_string = end_date
    else:
        e_date_string = '2022-01-31'
        bank_e_date_string ='2022-01-31'
    
    if bank_name:
        
        pop_chgrate = 1.17


    else:
        pop_chgrate = -1.17
        
    print(pop_chgrate)
    fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )

    return fig,f'{pop_chgrate}'

And without the callback

import dataiku

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import pandas as pd
from dash_table import DataTable
from dash_table.Format import Format, Group
from datetime import date
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from dash_iconify import DashIconify

bank_dropdown_df = ['A','B','C']

pop_chgrate = -1.17

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=-1.17,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

app.layout =  html.Div(children=
                       [html.H1(id='a',children=[f'{pop_chgrate}']),
                        html.Div(children=
                                 [
                                    html.Span('Select Bank', style={'font-size':'19px','color':'#212121',
                                                                                 'font-style':'bold','textAlign':'right',
                                                                                 'padding':'30px 0px 15px 50px'
                                                                                 #'padding':'30px 0px 15px 230px'
                                                                                }),
                                    html.Br(),
                                    dcc.Dropdown(id='bank_dropdown',
                                                options=[{'label':bank,'value':bank} for bank in bank_dropdown_df],
                                                style={'width':'290px','margin':'12px 0px 15px 20px', 'textAlign':'left'}),
                                    html.Br(),
                                    html.Span('Select Date', style={'font-size':'19px','color':'#212121',
                                                                     'font-style':'bold','textAlign':'left'}),
                                                                     
                                     dcc.DatePickerRange(
                                                         id='date_picker',
                                                         initial_visible_month=datetime.datetime.now(),
                                                         display_format='Y-MM-DD',
                                                         min_date_allowed ='2021-01-01',
                                                         max_date_allowed = '2022-01-31',
                                                         clearable=True,
                                                         style={'padding':'20px 0px 15px 20px' #'padding':'20px 0px 15px 30px'
                                                               }),
                                    html.Br()
                                 ]),
                        html.Div(children=
                                 [
                                    html.Span('Popularity', style={'font-size':'19px','color':'#212121',
                                                                   'justify-content':'center',
                                                                   'padding':'15px 0px 0px 0px'}),
                                    html.Br(),
                                    html.Br(),
                                    dcc.Graph(id='pop_chgrate',figure=fig, style={"height": 50, "width": 100}),
                                    html.Span('in likes and retweets vs last month',style={'font-size':'18px', 
                                                                                             'padding':'35px 10px 0px 10px',
                                                                                             'font-style':'italic'})
                                   ],
                                   style={'width':'230px','height':'268px','border':'1px solid lightgrey', 'borderRadius':'15px',
                                          'borderWidth':'1px','box-shadow': '2px 2px 2px lightgrey',
                                          'margin':'10px 0px 0px 42px'}
                                          )
                       ])

Moo · February 17, 2022, 8:23pm

I just figured it out!
I should add the below in the callback

 fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

here is the solution

import dataiku

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import pandas as pd
from dash_table import DataTable
from dash_table.Format import Format, Group
from datetime import date
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
from dash_iconify import DashIconify

bank_dropdown_df = ['A','B','C']

pop_chgrate = -1.17

fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=-1.17,
                delta={"reference": 1, "relative": True},
                           )
              )
fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

app.layout =  html.Div(children=
                       [html.H1(id='a',children=[f'{pop_chgrate}']),
                        html.Div(children=
                                 [
                                    html.Span('Select Bank', style={'font-size':'19px','color':'#212121',
                                                                                 'font-style':'bold','textAlign':'right',
                                                                                 'padding':'30px 0px 15px 50px'
                                                                                 #'padding':'30px 0px 15px 230px'
                                                                                }),
                                    html.Br(),
                                    dcc.Dropdown(id='bank_dropdown',
                                                options=[{'label':bank,'value':bank} for bank in bank_dropdown_df],
                                                style={'width':'290px','margin':'12px 0px 15px 20px', 'textAlign':'left'}),
                                    html.Br(),
                                    html.Span('Select Date', style={'font-size':'19px','color':'#212121',
                                                                     'font-style':'bold','textAlign':'left'}),
                                                                     
                                     dcc.DatePickerRange(
                                                         id='date_picker',
                                                         initial_visible_month=datetime.datetime.now(),
                                                         display_format='Y-MM-DD',
                                                         min_date_allowed ='2021-01-01',
                                                         max_date_allowed = '2022-01-31',
                                                         clearable=True,
                                                         style={'padding':'20px 0px 15px 20px' #'padding':'20px 0px 15px 30px'
                                                               }),
                                    html.Br()
                                 ]),
                        html.Div(children=
                                 [
                                    html.Span('Popularity', style={'font-size':'19px','color':'#212121',
                                                                   'justify-content':'center',
                                                                   'padding':'15px 0px 0px 0px'}),
                                    html.Br(),
                                    html.Br(),
                                    dcc.Graph(id='pop_chgrate',figure=fig, style={"height": 50, "width": 100}),
                                    html.Span('in likes and retweets vs last month',style={'font-size':'18px', 
                                                                                             'padding':'35px 10px 0px 10px',
                                                                                             'font-style':'italic'})
                                   ],
                                   style={'width':'230px','height':'268px','border':'1px solid lightgrey', 'borderRadius':'15px',
                                          'borderWidth':'1px','box-shadow': '2px 2px 2px lightgrey',
                                          'margin':'10px 0px 0px 42px'}
                                          )
                       ])
@app.callback(
                Output(component_id = 'pop_chgrate',component_property='figure'),
                Output(component_id = 'a',component_property='children'),
                Input(component_id ='date_picker', component_property='start_date'),
                Input(component_id ='date_picker', component_property='end_date'),
                Input(component_id ='bank_dropdown' , component_property='value')
             )
def update_most_pop_lang_pie(start_date,end_date,bank_name):
    
    if start_date is not None:
        st_date_string = start_date
        bank_st_date_string = start_date
    else:
        st_date_string = '2021-01-01'
        bank_st_date_string = '2021-01-01'
   
    if end_date is not None:
        e_date_string = end_date
        bank_e_date_string = end_date
    else:
        e_date_string = '2022-01-31'
        bank_e_date_string ='2022-01-31'
    
    if bank_name:
        
        pop_chgrate = 1.17


    else:
        pop_chgrate = -1.17
        
    print(pop_chgrate)
    fig = go.Figure(
              go.Indicator(
                mode="delta",
                value=pop_chgrate,
                delta={"reference": 1, "relative": True},
                           )
              )
    fig.update_layout(
                margin=dict(l=0, r=0, t=0, b=0)
                )

    return fig,f'{pop_chgrate}'

Moo · February 17, 2022, 8:29pm

@jlfsjunior Thanks a lot!

Topic		Replies	Views
Assigning indicator graph to dropdown Dash Python question	5	381	August 15, 2022
Confused with callback for dropdown linked to graph output Dash Python	10	1053	June 7, 2020
Dropdown is not working - when selected does not update the figure Dash Python	0	415	June 18, 2019
Graph won't update Dash Python	1	5322	June 15, 2020
Real-Time Candlestick Chart disappearing on Live Update, after adding indicators to my chart: Dashapp Dash Python	1	1238	December 7, 2021

Indicator chart disappears when dropdown value changes

Related Topics