Range slider with multiple dataframe

📊 Plotly Python
1

Hi there,

I have got a graph that is made from two dataframes (in subsequent time periods). However now I want to add a range slider but how would this work would you need two sliders?

image
image783×745 34.4 KB 


fig = go.Figure()

#add first trace    
fig.add_trace(
    go.Scatter(name='GDP', 
               x=gdp['Relating to Period'], 
               y=gdp['gdp'], mode='lines+markers', 
               line={'dash': 'solid', 'color': 'red'},
                marker={'color':'black'})
)

#add second trace  
fig.add_trace(
    go.Scatter(name='GDP Estimate', 
           x=gdp_est['Relating to Period'], 
           y=gdp_est['gdp'], mode='lines+markers', 
           line={'dash': 'dash', 'color': 'red'},
           marker={'color':'red'})
)



fig.add_trace(
    go.Scatter(
        name='bcc_expectations_standardised',
        x=gdp_est["Relating to Period"],
        y=gdp_est['bcc_expectations_standardised'],
        mode='markers',
        marker=dict(color="orange"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='bcc_output_standardised',
        x=gdp_est["Relating to Period"],
        y=gdp_est['bcc_output_standardised'],
        mode='markers',
        marker=dict(color="blue"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='cbi_balance_standardised',
        x=gdp_est["Relating to Period"],
        y=gdp_est['cbi_balance_standardised'],
        mode='markers',
        marker=dict(color="yellow"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='ioc',
        x=gdp_est["Relating to Period"],
        y=gdp_est['ioc'],
        mode='markers',
        marker=dict(color="black"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='iop',
        x=gdp_est["Relating to Period"],
        y=gdp_est['iop'],
        mode='markers',
        marker=dict(color="dark green"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='ios',
        x=gdp_est["Relating to Period"],
        y=gdp_est['ios'],
        mode='markers',
        marker=dict(color="LightSkyBlue"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='lloyds_standardised_overall_balance',
        x=gdp_est["Relating to Period"],
        y=gdp_est['lloyds_standardised_overall_balance'],
        mode='markers',
        marker=dict(color="green"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='pmi_expectations_standardised',
        x=gdp_est["Relating to Period"],
        y=gdp_est['pmi_expectations_standardised'],
        mode='markers',
        marker=dict(color="light blue"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='pmi_headline_standardised',
        x=gdp_est["Relating to Period"],
        y=gdp_est['pmi_headline_standardised'],
        mode='markers',
        marker=dict(color="brown"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='psf_corporation',
        x=gdp_est["Relating to Period"],
        y=gdp_est['psf_corporation'],
        mode='markers',
        marker=dict(color="mediumpurple"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='psf_income',
        x=gdp_est["Relating to Period"],
        y=gdp_est['psf_income'],
        mode='markers',
        marker=dict(color="olivedrab"),
        opacity=0.75,
        showlegend=True
    ))

fig.add_trace(
    go.Scatter(
        name='psf_vat',
        x=gdp_est["Relating to Period"],
        y=gdp_est['psf_vat'],
        mode='markers',
        marker=dict(color="darkgray"),
        opacity=0.75,
        showlegend=True
    ))

fig.update_layout(height=750, barmode='overlay',
margin=dict(l=20, r=20, t=20, b=70),  
#title = "GDP estimates",
font = {
'size' : 16,
'color' : corporate_colors['light-green']},
title = 'GDP Nowcast Estimate',
xaxis_title = "Quarter",
yaxis_title = "% quarter-on-quarter",
legend_title ="Please Click to Select Trace(s):",
title_y= 0.98,
#title_y= 0.98,
paper_bgcolor = 'rgba(0,0,0,0)',
plot_bgcolor = 'rgba(0,0,0,0)',
xaxis = corporate_xaxis,
yaxis = corporate_yaxis,
legend_font_family =  'sans-serif',
legend_font_color = corporate_colors['light-green'],
legend_font_size = 10)

However when I substitute the first gdp data framed to be selected by a range slider, it does not display the second trace


def update_figure(year_slider):
    
    gdp_filtered = gdp[(gdp['year and quarter']>=year_slider[0]) & (gdp['year and quarter']<=year_slider[1])]
    
    gdp_filtered = gdp_filtered.sort_values(by='year and quarter', ascending=True)
    
    print("Function Triggered")
    
    print("Year: ", year_slider)
    
    print(gdp)
    
    print(gdp_est)
    
    print(gdp_filtered)
    
    fig = go.Figure()
    
    #add first trace
    fig.add_trace(
    go.Scatter(name='GDP', 
               x=gdp_filtered['year and quarter'], 
               y=gdp_filtered['gdp'], mode='lines+markers', 
               line={'dash': 'solid', 'color': 'red'},
                marker={'color':'black'})
    )

#add second trace
...followed by the same code as above...

update_figure([2019, 2023])

image
image827×747 31.5 KB