How to show only one graph when plotly updatemenus load on Jupyter Notebook?

I have 2 graphs that I want to show using plotly’s updatemenus feature. I am able to populate and display the data using the updatemenus feature. However, when the plot loads, both the graphs are displayed initially. Is there a way to show only one graph when the plot loads initially?

I went through the documentation for updatemenus on plotly but could not find any attribute that will help me in achieving this.

trace28 = go.Bar(x=for1.head()['Name'],
                 y=for1.head()['G'],
                 name='Goals',
                 opacity=0.8
                )

trace29 = go.Bar(x=for1.head()['Name'],
                 y=for1.head()['A'],
                 name='Assists',
                 opacity=0.8
                )

trace30 = go.Bar(x=for2.head()['Name'],
                 y=for2.head()['G'],
                 name='Goals',
                 opacity=0.8
                )

trace31 = go.Bar(x=for2.head()['Name'],
                 y=for2.head()['A'],
                 name='Assists',
                 opacity=0.8
                )


updatemenus = list([dict(active=-1,
                         type='buttons',
                         buttons=list([dict(label='2011/12',
                                           method='update',
                                           args=[dict(visible=[True, True, False, False]),
                                                 dict(title='<b>Forward Stats 2011/12</b>')
                                                ]
                                          ),
                                      
                                       dict(label='2012/13',
                                           method='update',
                                           args=[{'visible':[False, False, True, True]},
                                                 {'title':'<b>Forward Stats 2012/13</b>'}
                                                ]
                                          ),
                                     ])
                       ),
                  ])

layout = go.Layout(title='<b>Forward Stats</b>',
                   xaxis=dict(title='<b><i>Player Name</b></i>'),
                   yaxis=dict(title='<b><i>Goals/Assists</b></i>'),
                   updatemenus=updatemenus,
                   showlegend=False,
                   barmode='group'
                  )

data = [trace28, trace29, trace30, trace31]
fig = go.Figure(data=data, layout=layout)
py.iplot(fig)

I want to display only trace28 and trace29 when the plot loads. Right now, all the traces are being shown when the plot loads.

Hi @ap1495,

You can set the visible property of your traces (in the go.Bar constructor) to match the first button state:

trace28 = go.Bar(x=for1.head()['Name'],
                 y=for1.head()['G'],
                 name='Goals',
                 opacity=0.8,
                 visible=True
                )

trace29 = go.Bar(x=for1.head()['Name'],
                 y=for1.head()['A'],
                 name='Assists',
                 opacity=0.8,
                 visible=True
                )

trace30 = go.Bar(x=for2.head()['Name'],
                 y=for2.head()['G'],
                 name='Goals',
                 opacity=0.8,
                 visible=False
                )

trace31 = go.Bar(x=for2.head()['Name'],
                 y=for2.head()['A'],
                 name='Assists',
                 opacity=0.8,
                 visible=False
                )
...

Hope that helps!
-Jon

1 Like

Thank you so much. This works :slight_smile:

1 Like

Thanks man, you saved my project!