Dropdown not displaying in default layout when dcc.Graph figure is {}

sohilpatel · February 8, 2021, 10:06am

def default_layout():
return html.Div(
children=[
html.H1(
children=“Analytical solution”,
className=“header-title”
),

               html.P(
                        children="dashboard",
                        className="header-description"
                     ),
               
               
               html.Div(
                          
                          children="what would you like to do?",
                          className="menu-title"
                        ),
            
               dcc.Dropdown(
                                id="Feature-dropdown",
                                options=[
                                            {"label":"description",
                                             "value":"description"},
                                            {"label":"affected element",
                                             "value":"affected element"},
                                            {"label":"created time",
                                             "value":"creation"},
                                            {"label":"Resolution time",
                                             "value":"resolution time"}
                                        ],
                                clearable=True,
                                placeholder="Select a plot",
                                className='dropdown',
                                disabled=False,
                                multi=False,
                                searchable=True,
                                persistence=False
                                
    
                            ),
                dcc.Graph(id="graph",figure={})
                         
            ]
    
                )

sohilpatel · February 8, 2021, 10:08am

Based on options in dropdown i want to create different plots…There should be no plot on default layout

sohilpatel · February 8, 2021, 2:14pm

any suggestions pls?

AnnMarieW · February 8, 2021, 3:25pm

Hi @sohilpatel and welcome to the Dash community

Could you please say more about what you are trying to do?

I expect that this layout returns an empty graph. If you want no graph at all, you can wrap the graph in a html.Div and add style={display:none} Then update the style property in a callback if the user selected something from the dropdown

If the dropdown is not displaying you may have an error message on the page.

If you post a comlete minimal example that demonstrates the problem, then it will be easier to help.

sohilpatel · February 8, 2021, 4:24pm

thanks for the suggestion .wraping the graph in html.Div element and setting ‘display’:‘none’ solved the problemof empty graph coming up on default window.
what do i set the display to when a dropdown is selected in call back function.

AnnMarieW · February 8, 2021, 4:27pm

Glad it worked!
You could try updating the style property in the callback with {‘display’: ‘block’}

sohilpatel · February 8, 2021, 4:28pm

@app_inc.callback(

    Output(component_id='common-graph', component_property='figure'),

    Input(component_id='Featuredropdown', component_property='value')

                 )

def basic_plot_output(Featuredropdown):

    if Featuredropdown == 'short_description':

        out_fig= trigram_word_frequency(df)

        return out_fig

AnnMarieW · February 8, 2021, 4:58pm

Hi @sohilpatel

Here are a few things to check:

the callback should be @app.callback not @app_inc.callback

Be sure that the component_id names match exactly with the id’s in the layout. For example in your callback you have
Input(component_id='Featuredropdown'.... but the id in the layout is 'Feature-dropdown'

Instead of wrapping the dcc.Graph in a html.Div as I first recommended, it might be simpler to just use the style property in the dcc.Graph.

Your callback could look something like this:

@app.callback(
    Output(component_id='common-graph', component_property='figure'),
    Output(component_id='common-graph', component_property='style'),        
    Input(component_id='Feature-dropdown', component_property='value')
)
def basic_plot_output(Featuredropdown):    
    style = {'display': 'none'} if Featuredropdown is None else {'display': 'block'}
    out_fig = {}
    if Featuredropdown == 'short_description':
        out_fig = fig
    return out_fig, style

sohilpatel · February 8, 2021, 5:07pm

def trigram_word_frequency(df_in):

print("This function is being called")

'''visualize tri gram frequency or combination of 3 words which has the highest occurence '''

word_vectorizer = CountVectorizer(ngram_range=(3,3), analyzer="word")

sparse_matrix = word_vectorizer.fit_transform(df_in['short_description'])

frequencies = sum(sparse_matrix).toarray()[0]

tri_grams_df = pd.DataFrame(frequencies, index=word_vectorizer.get_feature_names(), columns=['frequency'])

tri_grams_df.reset_index(inplace=True)

tri_grams_df.columns = ['short description', 'Frequency']

tri_grams_df=tri_grams_df.sort_values(ascending=False, by='Frequency').head(20)

fig = go.Figure(

        data=[go.Bar(x=tri_grams_df['Frequency'], y=tri_grams_df['short description'], orientation='h',

                     marker={'color': [ '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98', '#FF7F50', '#6495ED', '#FFD700', '#EE82EE', '#98FB98']},offset=0)],

        layout=go.Layout(

            yaxis_title="Incident Short description",

            height=600,

            width=1200,

            xaxis_title="Frequency of words in short description"

        )

    )

fig.update_layout(

    title={'text': '<b>Trigram for top 20 three words</b>', 'x': 0.5 ,'y': 0.90, 'xanchor': 'center', 'yanchor': 'top'},

    font=dict(

    family="Courier New, monospace",

    size=12

    )

)

    

return fig

def default_layout():

return html.Div([

               html.H1(

                        "Analytical solution to provide Insight into Incidents",

                        className="header-title"

                      ),

              

               html.P(

                        "Incident Analyzer -",

                        className="header-description"

                     ),

                                  

               html.Div(

                          

                          "what would you like to do?",

                           className="menu-title"

                        ),

                                       

               html.Div(

                   [

                       dcc.Dropdown(

                                id="Featuredropdown",

                                options=[

                                            {"label":"Short description vs closure code",

                                             "value":"short_description"},

                                            {"label":"Affected CI vs suspected CI",

                                             "value":"affected_ci"},

                                            {"label":"Incident created time",

                                             "value":"incident_creation"},

                                            {"label":"Resolution time vs closure code",

                                             "value":"resolution_time"}

                                        ],

                                clearable=True,

                                placeholder="Select a plot",

                                className='dropdown',

                                disabled=False,

                                multi=False,

                                searchable=True,

                                persistence=False

                                        

                            )

                   ]

                        ),

               html.Div(

                            dcc.Graph(id="common-graph"),

                            #style={'display':'none'}

                        )

]

                )

app_inc = dash.Dash(name)

app_inc.layout = default_layout()

@app_inc.callback(

    Output(component_id='common-graph', component_property='figure'),

    Output(component_id='common-graph', component_property='style'),

    Input(component_id='Featuredropdown', component_property='value'))

def basic_plot_output(Featuredropdown):

    style = {'display':'none'} if Featuredropdown is None else {'display': 'block'}

    out_fig={}

    if Featuredropdown == 'short_description':

        out_fig= trigram_word_frequency(df)

        return out_fig,style

app_inc.run_server()

sohilpatel · February 8, 2021, 5:09pm

after making changes my dropdown is lost and i see empty graph on deafult layout

sohilpatel · February 8, 2021, 5:22pm

moving this outside if condition return out_fig,style and trying works for display

sohilpatel · February 8, 2021, 6:08pm

finally thanks,i got the graph displayed when clicked dropdown but my drop down becomes invisible after the graph is populated

Topic		Replies	Views
Graph won't update Dash Python	1	5421	June 15, 2020
Conditional Dash layout graph item Dash Python	2	3267	August 25, 2019
What am I doing wrong? (different plots using dropdown) Dash Python	4	272	September 6, 2020
My chart shows empty Dash Python question	2	465	October 7, 2022
Checklist not displaying graph Dash Python question	21	511	March 28, 2023

Dropdown not displaying in default layout when dcc.Graph figure is {}

Related Topics