Plotly two subplots controlled by one slider

📊 Plotly Python
1

Hey Guys,

Can you have a quick check at what I am doing wrong here. I am attempting two have two subplots controlled by the same slider with data from two different dataframes. I am just trying to change the df row value with the slider but can’t seem to get this working. I have had a look at some of the other questions about this topic and cant seem to get it working.

Any help will be much appreciated. Thanks


import plotly
import plotly.graph_objects as go
import numpy as np
import pandas as pd
import plotly.express as px
from plotly.subplots import make_subplots
import chart_studio.plotly as py


df = pd.DataFrame({'A':[100, 120, 100, 105, 110], 
                'B':[130, 120, 100, 105, 110],
                'C':[110, 110, 140, 115, 120],
                'D':[140, 120, 160, 120, 130],                   
                'E':[150, 130, 100, 105, 150]})
df2 = pd.DataFrame({'A':[140, 150, 110, 115, 120], 
                'B':[150, 120, 100, 105, 110],
                'C':[120, 120, 110, 115, 120],
                'D':[170, 140, 120, 125, 150],                   
                'E':[140, 180, 115, 115, 140]})


fig = make_subplots(rows=2, cols=1,shared_xaxes=True)

# Add traces, one for each slider step
for step in range(len(df.index)):
    fig.append_trace(
        go.Scatter(
            visible=False,
            line=dict(color="#00CED1", width=2),
            name="Time = " + str(step),
            x=df.columns[0:],
            y=df.loc[step]),row=1, col=1)
    
#for step in range(len(df2.index)):# Tried this does not work
    fig.append_trace(
        go.Scatter(
            visible=False,
            line=dict(color="red", width=2),
            name="Time = " + str(step),
            x=df2.columns[0:],
            y=df2.loc[step]),row=2, col=1)


#fig.data[1].visible = True


# Create and add slider
steps = []
for i in range(len(df.index)):
    step = dict(method="restyle",
        args=["visible", [False] * len(fig.data)],
    )
    step["args"][1][i] = True
    #step["args"][1][i+1] = True # This shows them both but still not correct(Showing wrong traces 1,2)
 
    steps.append(step)

sliders = [dict(
    active=0,
    currentvalue={"prefix": "Time:  "},
    pad={"t": 50},
    steps=steps
)]

fig.update_yaxes(title_text="Temperature", range=[-160, 260],nticks=30, row=1, col=1)
fig.update_yaxes(title_text="Pressure", range=[-169, 260],nticks=30, row=2, col=1)
fig.update_layout(sliders=sliders, title="Time Series - Interactive", template ="plotly_white")

fig.update_layout(width=800,height=600,)
fig.show()
2

@birkett0011 Replace the line after
steps =[]
with:

for i in range(len(fig.data)):

because index goes from 0 to 4, while data from 0 to 9, and you want to plot the trace (data) corresponding to each row in df1, respectively, df2.

1 Like
3

Hey mate thanks for your response.

Do you have any idea on how to make it show both plots at the right index at the same time.

Currently it alternates between showing them. Shows the top one then next step displays the bottom one and so on.

I am looking for them to both be displayed at the same time at the same index all controlled by the slider.

Thanks

4

@birkett0011 To display simultaneously the traces from the two subplots, at each step, you should define the steps as follows:

steps = []

for i in range(0, len(fig.data), 2):
    step = dict(
        method="restyle",
        args=["visible", [False] * len(fig.data)],
    )
    step["args"][1][i:i+2] = [True, True]
    steps.append(step)
5

Awesome, Thanks again

1 Like