Update plot with restyle method -> Get the current selected slider value

πŸ“Š Plotly Python
1

Hello,

I have created multiple traces and a slider where each point in slider is pertaining to a trace.

I have used the restyle method as illustrated in an example and am able to successfully update the trace.
However, I have some annotations and shapes within the layout method that don’t get updated. I am not sure if there is a callback that gives me the current selected slider value that I can use to update the annotation and shape.

Please help

2

Hi @plotly.lover (great name :-)!), welcome to the forum! I adapted:

See the example below!

import plotly.graph_objects as go
import numpy as np

# Create figure
fig = go.Figure()

# Add traces, one for each slider step
for step in np.arange(0, 5, 0.1):
    fig.add_trace(
        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))))

# Make 10th trace visible
fig.data[10].visible = True

# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[{"visible":[False] * len(fig.data)}, # update for traces
               {"title":str(i)} # update for layout 
             ],
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)

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

fig.update_layout(
    sliders=sliders
)

fig.show()
3

Hi Emmanuelle,

Thanks :slight_smile:

May be your example got truncated as I don’t see your adaptation for the buttons aspect as you noted in your reply. I only see the slider addition for which the code is the same as the first tutorial in your reply.

Thanks!

4

Hi @plotly.lover no there is a slight change compared to the initial example, it corresponds to these lines (using update instead of restyle)

step = dict(
        method="update",
        args=[{"visible":[False] * len(fig.data)}, # update for traces
               {"title":str(i)} # update for layout 
             ],
    )
5

Thanks @Emmanuelle, I was able to get the annotations to work with this approach.
However, I am having some issues with updating shapes when listing them within the args list. Here is an example:

{"shapes":
             [
                 dict(
                    # Line Horizontal
                    type="line",
                    x0=0,
                    y0=np.arange(10, 23, 1)[i],
                    x1=60,
                    y1=np.arange(10, 23, 1)[i],
                    xref="x",
                    yref="y",
                    line = dict(
                        color="LightSeaGreen",
                        width=4,
                        dash="dashdot",
                    )
                 )
             ]
            },
6

Hi @Emmanuelle, Appreciate your feedback on this.

7

@Emmanuelle Following your example, I am trying to add annotations to be updated with slider. It shows the initial annotations correctly however it does not update with sliding the step. My code is attached below and let me know if I did anything wrong. As annotations is in the layout and I have used similar specification as title, but it does not work. Thanks for any feedback in advance.

import plotly.graph_objects as go
import numpy as np

# Create figure
fig = go.Figure()
annotations_dict=[]
# Add traces, one for each slider step
for step in np.arange(0, 2, 0.1):
    x_vec=np.arange(0, 1, 0.1)
    y_vec=np.sin(step * np.arange(0, 1, 0.1))
    fig.add_trace(
        go.Scatter(
            visible=False,
            line=dict(color="#00CED1", width=6),
            name="𝜈 = " + str(step),
            x=x_vec,
            y=y_vec))
    annotations=[]
    for n in range(len(y_vec)):
        record = go.layout.Annotation(
            text=str("{:0.2f}".format(y_vec[n])),
            y=y_vec[n],
            x=x_vec[n],
            yref="y1",
            xref="x1",
            font=dict(color='#484848', size=12),
            showarrow=False,
        ) 
        annotations.append(record)
        # print(record)
    annotations_dict.append(annotations)

# Make 10th trace visible
fig.data[10].visible = True

fig.update_layout(
    title="Frequency: Step-"+str(10),
    annotations=annotations_dict[10],
)

# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[
            {"visible": [False] * len(fig.data)}, # update for traces
            {"title": "Frequency: Step-"+str(i)},
            {"annotations": annotations_dict[i]},
            # {"annotations": [False] * len(annotations_dict)}, # update for layout 
        ],
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    # step["args"][2]["annotations"][i] = True # Toggle i'th annotation to "visible"
    steps.append(step)

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

fig.update_layout(
    sliders=sliders
)

fig.show()