Search code examples
pythonlayoutformattingplotlyslider

Switch Active Slider with Button – Plotly Python


I have been trying to show and hide plotly sliders with button presses. I have looked at the documentation and have been able to do this manually but can't seem to find the right syntax for the button args.

Here is a sample code that generates 1 visible slider and a second "hidden" slider. The goal is to press the second button to both

  1. reveal the second slider and
  2. hide the first slider
# 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)},
              {"title": "Slider switched to step: " + str(i)}],  # layout attribute
    )
    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,
    visible = True,
),
    dict(
    active = 20,
        currentvalue = {'prefix': 'Second'},
        pad = {'t':50},
        steps = steps,
        visible = False,
)]
all_false = [False]* len(fig.data)
first = all_false.copy()
first[10] = True
sec = all_false.copy()
sec[20] = True
fig.update_layout(
    sliders=sliders,
    updatemenus = [
        dict(
        type = 'buttons',
        buttons = [
            dict(
                label = 'Show first slider',
                method = 'update',
                args = [
                    {'visible': first},
                    {'title': "First Slider", 'xaxis': {'title': 'First X axis'}, 'yaxis': {'title': 'First Y Axis'}},
                    {'sliders': {'visible':{'currentvalue: {'visible': [True,False]}}},
                ]
            ),
            dict(
                label = 'Show Second Slider',
                method = 'update',
                args = [
                    {'visible': sec},
                    {'title': 'Second Slider','xaxis': {'label': 'Second X Axis'}, 'yaxis': {'title': 'Second Y Axis'}},
                    {'sliders':{'currentvalue': {'visible': [False,True]}}}
                ]
            )
        ]
        )
    ]
)

fig.show()

This code is unable to hide sliders or show currently hidden sliders.


Solution

  • Update, I was able to solve this problem by using the following code inside of the "fig.update_layout" function: Basically, if you are updating "layout" variables, they should all go in the same group of arguments for "args." Otherwise, plotly seems to ignore them.

    fig.update_layout(
        updatemenus = [
            dict(
                type = 'buttons',
                buttons = [
                    dict(
                        label = 'Show first slider',
                        method = 'update',
                        args = [
                            {'visible': first},
                            {'title': "First Slider", 'xaxis': {'title': 'First X axis'}, 'yaxis': {'title': 'First Y Axis'}, 'sliders': sliders,},
                               
                        ],
                        args2 = [
                            {'sldiers':sliders}
                        ]
                    ),
                    dict(
                        label = 'Show Second Slider',
                        method = 'update',
                        args = [
                            {'visible': sec},
                            {'title': 'Second Slider','xaxis': {'title': 'Second X Axis'}, 'yaxis': {'title': 'Second Y Axis'}, 'sliders':sliders_2},
                            {'sliders':sliders_2},
                        ],
                        execute = True
                    ),
                ]
            ),
           
        ]
    )