Chart and slider

Dash Python
1

Plotly offers a very good slider for timeseries chart (see below)
I am trying to see if I could use a callback with this slider (rather than using dcc.Slider and rebuild from scratch)
I tried to find doc but totally failed
Could someone point me in the right direction ?

Thanks

xaxis=dict(

                                rangeselector=dict(

                                                    buttons=list([

                                                        dict(count=1,

                                                            label="1m",

                                                            step="month",

                                                            stepmode="backward"),

                                                        dict(count=6,

                                                            label="6m",

                                                            step="month",

                                                            stepmode="backward"),

                                                        dict(count=1,

                                                            label="YTD",

                                                            step="year",

                                                            stepmode="todate"),

                                                        dict(count=1,

                                                            label="1y",

                                                            step="year",

                                                            stepmode="backward"),

                                                        dict(count=5,

                                                            label="5y",

                                                            step="year",

                                                            stepmode="backward"),                                        

                                                        dict(step="all")

                                                    ])

                                                ),

                                rangeslider=dict(visible=True),

                                type="date")

                    )
2

Hi @cyril_lm, moving the rangeslider triggers a relayoutData event of the dcc.Graph (see the tutorial on interactive graphing). You can listen to relayoutData and check that the content is a change of the range of the xaxis, as in the code below.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from dash.dependencies import Input, Output


app = dash.Dash(__name__)


# Load data
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)))

# Set title
fig.update_layout(
    title_text="Time series with range slider and selectors"
)

# Add range slider
fig.update_layout(
    xaxis=dict(
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
)

app.layout = html.Div([
        dcc.Graph(id='graph', figure=fig),
        html.Div(id='div')
        ])


@app.callback(
    dash.dependencies.Output('div', 'children'),
    [dash.dependencies.Input('graph', 'relayoutData')])
def display_range(fig_data):
    if fig_data is not None and 'xaxis.range' in fig_data:
        return "%s - %s " %(fig_data['xaxis.range'][0],
                            fig_data['xaxis.range'][1])
    return dash.no_update


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

thats awesome, thanks a lot !