Double slider in plotly

Question

I'm trying to implement two sliders in one fig of plotly I tried the following

# Create figure
fig = go.Figure()

# Add traces, one for each slider step
for step in np.arange(1, 5, 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=[step]*50))

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

# Create and add slider
sliders = []

for j in range(int(len(fig.data)/2)):
    steps=[]
    for i in range(int(len(fig.data)/2)):
        step = dict(
            method="update",
            args=[{"visible": [False] * (int(len(fig.data)/2))},
                  {"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.append(dict(active=0, currentvalue={"prefix": "slider: "}, pad={"t": (80 * j + 20)}, steps=steps))

fig.update_layout(sliders=sliders)



plotly.offline.plot(fig, filename=f'test.html')

The two sliders not working together, in this example, each slider has two options. But if the first one is in one position, moving the second one doesn't seem to know what the first one status is. Any suggestions?

Answer 1

You can use the dcc slider in dash. The below code shows two sliders that control two different pi charts with a function (metrics) that reads in the slide output and outputs two percentages. To make this work, replace the metrics function with a function that generates two percentages given two inputs.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
from plotly.subplots import make_subplots
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P("par 1:"),
    dcc.Slider(0, 1, 0.1,
               value=0.5,
               id='names'
    ),
    html.P("par 2:"),
    dcc.Slider(0, 1, 0.1,
               value=0.5,
               id='values'
    ),
    dcc.Graph(id="pie-chart"),
])

@app.callback(
    Output("pie-chart", "figure"), 
    [Input("names", "value"), 
     Input("values", "value")])
def generate_chart(names, values):
    fig = make_subplots(rows=1, cols=2, specs=[[{"type": "pie"}, {"type": "pie"}]])
    fig.add_trace(go.Pie(
        values=[metrics(values,names)[0], (100-(metrics(values,names)[0]))],
        domain=dict(x=[0, 0.5]),
        name="Recall"), 
        row=1, col=1)

    fig.add_trace(go.Pie(
        values=[metrics(values,names)[1], (100-(metrics(values,names)[1]))],
        domain=dict(x=[0.5, 1.0]),
        name="Precision"),
        row=1, col=2)

    return fig

app.run_server(debug=True)