Is it possible to get a Date Range Slider (not a dcc.RangeSlider!) like in a plotly Time Series Plot?

Dash Python
1

Hi,

I have a time series plot, to which I want to add interactive range selection. My ideal solution would be a range slide like in the plotly Time Series Documentation at the very end:

dash
dash996×491 38 KB

Is that possible?

Thanks in advance

2

Welcome back @enq
You can definitely add a rangeslider that allows user to choose between dates. Dash has great documentation on this here. Just put dates on the rangeslider and filter your data in the callback decorator, according to the value chosen on the rangeslider.

3

Hi @adamschroeder,
thanks for your reply.

I am familiar with the Range slider from the Dash Core Components. My question is whether i can include that particular range slider as shown above, i.e a preview of the whole graph on which i can select the range

4

@enq I’m not sure I fully understand. You would like to have the rangeslide just like in the picture above within your Dash app? If so, that’s possible. I would insert this line of code into your function before you return the output:

    fig.update_layout(xaxis_rangeslider_visible=True)

Whichever plot you chose, this would include that particular range slider you’re talking about, right below the plot. For a more complete example of how I did it with a scatter plot, using Dash, see below:

df = pd.read_csv("suicide_rates.csv")
app = dash.Dash(__name__)

#---------------------------------------------------------------
app.layout = html.Div([
 
     [........]

])
#---------------------------------------------------------------
@app.callback(
    Output('the_graph','figure'),
    [Input('the_year','value')] #whichever dash component you'd like to use. I think I used dropdown.
)

def update_graph(years_chosen):
    # filter df rows according to years chosen
    dff=df[.....]
  
    scatterplot = px.scatter(
        data_frame=dff,
        x="suicides/100k pop",
        y="gdp_per_capita ($)",
        hover_data=['country'],
        text="country",
    )

    #INCLUDE THE RANGESLIDER THAT @ENQ POSTED IN THEIR FIRST POST ON PLOTLY FORUM
    scatterplot.update_layout(xaxis_rangeslider_visible=True)

    return (scatterplot)

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