Use a plotly dropdown to select 'Time Column' and plot 'Column 2' vs 'Column 1' respecting the selected Time

Question

Good evening,

I need to know if it is possible to use a dropdown button with plotly library and do what i mentioned in the title.

I generated these data in order to show you how my dataframe is :

+----------+----------+-----------+
|   Time   | Column1  |  Column2  |
+----------+----------+-----------+
| 06:48:37 | -0,61447 | 0,0050662 |
| 06:48:37 | -0,30723 | 0,0045917 |
| 06:48:37 | 0        | 0,0043276 |
| 06:48:37 | 0,30723  | 0,0041332 |
| 06:48:37 | 0,61447  | 0,003965  |
| 06:48:37 | 0,9217   | 0,0038135 |
| 06:48:37 | 1,2289   | 0,0036676 |
| 06:48:37 | 1,5362   | 0,0035346 |
| 06:48:37 | 1,8434   | 0,0034031 |
| 06:48:37 | 2,1506   | 0,0032813 |
| 06:59:37 | -0,61739 | 0,0058201 |
| 06:59:37 | -0,3087  | 0,0053155 |
| 06:59:37 | 0        | 0,0050203 |
| 06:59:37 | 0,3087   | 0,0047872 |
| 06:59:37 | 0,61739  | 0,0045921 |
| 06:59:37 | 0,92609  | 0,0044152 |
| 06:59:37 | 1,2348   | 0,0042553 |
| 06:59:37 | 1,5435   | 0,004102  |
| 06:59:37 | 1,8522   | 0,0039532 |
| 06:59:37 | 2,1609   | 0,0038114 |
| 07:14:37 | -0,61799 | 0,0069837 |
| 07:14:37 | -0,309   | 0,0064459 |
| 07:14:37 | 0        | 0,0061361 |
| 07:14:37 | 0,309    | 0,0058983 |
| 07:14:37 | 0,61799  | 0,0056855 |
| 07:14:37 | 0,92699  | 0,0054978 |
| 07:14:37 | 1,236    | 0,0053299 |
| 07:14:37 | 1,545    | 0,0051582 |
| 07:14:37 | 1,854    | 0,0049979 |
| 07:14:37 | 2,163    | 0,0048426 |
+----------+----------+-----------+

Here is the link for the subject : https://plotly.com/python/dropdowns/

PS1 : I know how to create a dataframe that stock one 'Time' (for this exemple it would be a dataframe containing 06:49:37 and 06:59:37 and 07:14:37 so that i don't get many times in the dropdown list when i click on it. I don't know if it's an idea that you can use but i have that as a starting point.

PS2 : I already used plotly library but i really don't know how to start coding this problem

Answer 1

You can try this:

from plotly import graph_objs as go
import pandas as pd

data = {'Time':['06:48:37', '06:48:37', '06:48:37',
                '06:59:37', '06:59:37', '06:59:37', 
                '07:14:37', '07:14:37', '07:14:37'],
        'Column1':[1, 2, 3, 4, 5, 6,7,8, 9],
        'Column2':[1, 2, 1, 2, 1, 2,1, 2, 1],
        'Column3':[3, 4, 5, 6, 7, 8,9,10, 11],
        'Column4':[1, 2, 1, 2, 1, 2, 1, 2,1]}
  
df = pd.DataFrame(data)

lst=[]
lst2 = []

for i,time in enumerate(df['Time'].unique()):
    lst.append(
        go.Scatter(name=time,  # convert to str if Time column is not str
        x=df.loc[df['Time']==time,'Column1'],
        y=df.loc[df['Time']==time,'Column2'],
        mode='lines'
                )
        )
    lst.append(
        go.Scatter(name=time,  # convert to str if Time column is not str
        x=df.loc[df['Time']==time,'Column3'],
        y=df.loc[df['Time']==time,'Column4'],
        mode='lines'
                )
        )
    
    lst3 = [False]*len(df['Time'].unique()) * 2   # 2 is number of plots per timestamp
    
    lst3[i*2:(i+1)*2]=[True,True]
    
    lst2.append(dict(label=time,
                    method="update",
                     args=[{"visible": lst3}]))
    
plot = go.Figure(data=lst,
                 layout=dict(updatemenus=[dict(active=0, buttons=lst2)],
                             showlegend=False) 
                )
  
plot.show()