Slider change chart data and chart title

📊 Plotly Python
1

Hi Guys,
I’m just getting started with plotly and trying to get the hang of the sliders.

Wondering if someone could show me an example of how we would modify the code in the sliders example (here) so that we add a title that updates along with the slider selections (step 0, step 1, etc)?

Thanks!

JR

2

Hi @jr123,

Here’s an updated example with some explanation comments inline.

from plotly.offline import init_notebook_mode, iplot
import plotly.graph_objs as go
import numpy as np

# initialize notebook for offline plotting 
init_notebook_mode()

# Set initial slider/title index
start_index = 10

# Build all traces with visible=False
data = [go.Scatter(
        visible = False,
        line=dict(color='#00CED1', width=6),
        name = '𝜈 = '+str(step),
        x = np.arange(0,10,0.01),
        y = np.sin(step*np.arange(0,10,0.01)))
        for step in np.arange(0,5,0.1)]

# Make initial trace visible
data[start_index]['visible'] = True

# Build slider steps
steps = []
for i in range(len(data)):
    step = dict(
        # Update method allows us to update both trace and layout properties
        method = 'update',  
        args = [
            # Make the ith trace visible
            {'visible': [t == i for t in range(len(data))]},
            
            # Set the title for the ith trace
            {'title.text': 'Step %d' % i}],
    )
    steps.append(step)

# Build sliders
sliders = [go.layout.Slider(
    active = 10,
    currentvalue = {"prefix": "Frequency: "},
    pad = {"t": 50},
    steps = steps
)]

layout = go.Layout(
    sliders=sliders,
    title={'text': 'Step %d' % start_index}
)

fig = go.Figure(data=data, layout=layout)

iplot(fig)

slider_title
slider_title.gif718×584 436 KB

Hope that helps!
-Jon

1 Like
3

Hi Jon,
This indeed helps. I’m trying to extend your example to include dynamically updating an annotation as well. The annotation initializes to the start value, but does not change as the slider is changed. Can you tell me where I’m going wrong here? I added code to the args in the slider build and reference the annotations in the layout.
Thanks for any help!
Bill

import plotly
import plotly.graph_objs as go
import numpy as np

Set initial slider/title index

start_index = 10

Build all traces with visible=False

data = [go.Scatter(
visible = False,
line=dict(color=’#00CED1’, width=6),
name = '𝜈 = '+str(step),
x = np.arange(0,10,0.01),
y = np.sin(step*np.arange(0,10,0.01)))
for step in np.arange(0,5,0.1)]

Make initial trace visible

data[start_index][‘visible’] = True

Build slider steps

steps = []
for i in range(len(data)):
step = dict(
# Update method allows us to update both trace and layout properties
method = ‘update’,
args = [
# Make the ith trace visible
{‘visible’: [t == i for t in range(len(data))]},

        # Set the title for the ith trace
        {'title.text': 'Step %d' % i},
        {'annotations.text' : 'External %d' % i}
        
        ],
)
steps.append(step)

Build sliders

sliders = [go.layout.Slider(
active = 10,
currentvalue = {“prefix”: "Frequency: "},
pad = {“t”: 50},
steps = steps
)]

layout = go.Layout(
sliders=sliders,
title={‘text’: ‘Step %d’ % start_index},
annotations=[dict(
x=0,
y=0,
text = ‘External %d’ % start_index,
)]
)
fig = go.Figure(data=data, layout=layout)

plotly.offline.plot(fig, filename=‘test.html’)

4

Use {‘annotations[0].text’ : ‘External %d’ % i} to replace {‘annotations.text’ : ‘External %d’ % i} should work

5

I have a question, If I want to add one baseline to the same plots that didn’t change via slider. Is it possible to do it using this code template?