Plotly Dash How to get user input via slider to update values in plot

Question

I have an output variable (REC2) that is inversely dependent on a number of fixed factors and an input variable (REC1). My oiginal code took the fixed factors and REC1 (hard coded in) and calculated REC2. This part works as I would like.

I then plagiarised from the Ploty Dash website and came up with the following code. The plot displays correctly but the slider doesn't. I think it's the 'marks' line but I don't know how to set it up. I'd like it to go from 0 to -2000 in steps of 50.

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


Dep=363                 #Water depth (m)
Speed = 2.2             #Ship's speed (m/s)
ASV=1.5                 #Speed of sound in water (m/s)
SPI=6.25                #Distance between sample stations (m)
SB=0-((Dep*2)/ASV)      #Sound travel time to seabed (milliseconds) - negative to denote below time zero
IET=(SPI/Speed)         #Inter Event Time (s) time to travel SPI

Rmin=0
Rmax=-2000


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='3DHR Slider',
        min=Rmax,
        max=Rmin,
        value=(Rmax-Rmin)/2,
        marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(-20000,0)},
        step=200
    )
])


@app.callback(
    Output('graph-with-slider', 'figure'),
    Input('3DHR Slider', 'value'))
def update_figure(REC1):
    REC2= ((0-IET)*1000)-REC1  #UHRS record length - Function of above

    fig = go.Figure()
    fig.add_trace(go.Scatter(
        x=[0, 1,1, 0],
        y=[0, 0, REC2, REC2],
        fill='tonexty', # fill area between trace0 and trace1
        mode='lines', line_color='indigo',name="UHRS"))
    fig.add_trace(go.Scatter(
        x=[0, 1,1, 0],
        y=[0, 0, REC1, REC1],
        fill='tonexty', # fill area between trace0 and trace1
        mode='lines', line_color='blue',name="3DHR"))
    
    fig.add_trace(go.Scatter(x=[0,1],y=[SB,SB],name="Seabed"))

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

Rob Raymond · Accepted Answer · 2021-05-22 09:33:26Z

1

I've updated to work in a jupyter environment.

you are creating a mark for every value between -2000 and 0. These then overlap and you get a black line that are the markers
changed dict comprehension to create marks every 200
changed Slider step to be 50 as you note

import dash
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go


Dep=363                 #Water depth (m)
Speed = 2.2             #Ship's speed (m/s)
ASV=1.5                 #Speed of sound in water (m/s)
SPI=6.25                #Distance between sample stations (m)
SB=0-((Dep*2)/ASV)      #Sound travel time to seabed (milliseconds) - negative to denote below time zero
IET=(SPI/Speed)         #Inter Event Time (s) time to travel SPI

Rmin=0
Rmax=-2000


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
#     dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='3DHR Slider',
        min=Rmax,
        max=Rmin,
        value=(Rmax-Rmin)/2,
        marks={i: f"DHR {i}" for i in range(-20000,0, 200)},
        step=50
    ),
    html.Div(id="sliderVal")
])

@app.callback(
    Output("sliderVal", "children"),
    Input('3DHR Slider', "value")
)
def useSlider(dhrSlider):
    return dhrSlider

app.run_server(mode="inline")

answered May 22, 2021 at 9:33

Rob Raymond

31.5k3 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WillH Over a year ago

I don't have Jupyter_Dash installed (maybe I should) but I've transposed the relevant 'marks' part into mine and now I get more or less what I wanted - I certainly get Marks every 200 and steps every 50. Each Mark is labelled DHR1, is there a way to label them with the relevant number, e.g. -2000, -1800 etc?

Rob Raymond Over a year ago

simple case of adjusting the f-string f"DHR {I}". your sample code had it as Label n

Collectives™ on Stack Overflow

Plotly Dash How to get user input via slider to update values in plot

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related