CODEWITHSUNDEEP
python-3.xplotlyplotly-dashplotly-python
WillH
WillH

Reputation: 303

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

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)

Upvotes: 0

Views: 2021

Answers (1)

Rob Raymond
Rob Raymond

Reputation: 31166

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")

Upvotes: 1

Related Questions