# Advanced Dropdown Menus with Plotly

**URL:** <https://community.plotly.com/t/advanced-dropdown-menus-with-plotly/40922>\
**Category:** 📊 Plotly Python\
**Created:** [June 11, 2020, 8:40pm UTC](https://community.plotly.com/t/advanced-dropdown-menus-with-plotly/40922 "2020-06-11T20:40:30Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [June 15, 2020, 4:21am UTC](https://community.plotly.com/t/advanced-dropdown-menus-with-plotly/40922/2 "2020-06-15T04:21:25Z")

</div>

Hi @Waterboi,

This is the plotly.py version of the interactive plot you are interested in:

```auto
import plotly.graph_objs as go
import pandas as pd

df1 = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df2 = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')    

# Rename the lists of columns
cols1 = df1.columns
cols2 = df2.columns

fig = go.Figure()
fig.add_scatter(x=df1[cols1[0]], y=df1[cols1[1]], mode='lines')
fig.add_scatter(x=df2[cols2[0]], y=df2[cols2[1]], mode='lines', visible=False);

#The trace restyling to be performed at an option selection in the first/second dropdown menu
# is defined within buttons1/buttons2 below:

buttons1 = [dict(method = "restyle",
                 args = [{'x': [df1[cols1[0]], 'undefined'],
                          'y': [df1[cols1[k]], 'undefined'],
                          'visible':[True, False]}], 
                 label = cols1[k]) for k in range(1, len(cols1))]  

buttons2 = [dict(method = "restyle",
                 args = [{'x': ['undefined', df2[cols2[0]]],
                          'y': ['undefined', df2[cols2[k]]],
                          'visible':[False, True]}],
                 label = cols2[k]) for k in range(1, 7)]

fig.update_layout(title_text='Plot title',
                  title_x=0.4,
                  width=850,
                  height=450,
                 
                  updatemenus=[dict(active=0,
                                    buttons=buttons1,
                                    x=1.15,
                                    y=1,
                                    xanchor='left',
                                    yanchor='top'),
                              
                               dict(buttons=buttons2,
                                    x=1.15,
                                    y=0.85,
                                    xanchor='left',
                                    yanchor='top')
                              ]); 

#Add annotations for the two dropdown menus:

fig.add_annotation(
            x=1.065,
            y=1,
            xref='paper',
            yref='paper',
            showarrow=False,
            xanchor='left',
            text="df1<br>State")
fig.add_annotation(
            x=1.065,
            y=0.85,
            showarrow=False,
            xref='paper',
            yref='paper',
            xanchor='left',
            #yanchor='top',
            text="df2<br>Date");

```

The corresponding plot: [https://chart-studio.plotly.com/~empet/15696/#/](https://chart-studio.plotly.com/~empet/15696/#/).  
Details:  
The default Figure consists in two traces: the trace 0 is a scatter plot with x-values in the df1-column of index 0,  
and y-values in the df1-column 1, while trace 1 has the df2-column 0, as x-values, and column 1 in the same dataframe, as y-values.

Two each dataframe is associated a dropdown menu: the first one with n options, n=len(df1.columns)-1, and the second one with 6 options. Selecting the kth option of the first dropdown menu, the trace fig.data[0] is updated by the pair of columns, (0, k), in the dataframe, df1, and similarly when selecting an option in the second dropdown menu. More precisely, the trace fig.data[0]/fig.data[1] is restyled according to settings in the args[0] dict of the corresponding item in the list buttons1/buttons2 . (More on trace restyling here [https://chart-studio.plotly.com/~empet/15607](https://chart-studio.plotly.com/~empet/15607))

The ‘undefined’ in the position 1 or 0 of the ‘x’, ‘y’- lists means that the current state of the trace `fig.data[1]` or `fig.data[0]` is unchanged.

---

_[View the full topic](https://community.plotly.com/t/advanced-dropdown-menus-with-plotly/40922)._