RangeSlider callback

Dash Python
1

Hi guys. Is there a means of applying a RangeSlider call back to the whole dataset after filtering , so that it affects all the graphs and other time series component of your dashboard rather than applying it to each single graph. I want to be able to apply the start and end month to my whole dashboard.

dcc.RangeSlider(
id=“range-slider”,
min=1,
max=12,
step=3,
value=[3, 7],
marks={
1: “January”,
2: “February”,
3: “March”,
4: “April”,
5: “May”,
6: “June”,
7: “July”,
8: “August”,
9: “September”,
10: “October”,
11: “November”,
12: “December”,
}

which component do i need to pass my callback on and how do i script the callback.Any help?

2

At a high level, you can have the range slider callback output your filtered data set to a hidden Div or dcc.Store. You can then have the callbacks that handle your graphs trigger on the change to this dataset.

1 Like
3

I did something similar but for some reasons i cant get the callback to do any actions when i use my rangeSlider.

Here is my code:

Defining filter:

def filter_dataframe(month_slider):
    dff=df[(df.index>dt.datetime(month_slider[0]))
    &(df.index<dt.datetime(month_slider[1]))]
    return dff

layout:

 `dcc.Store(id='filtered_data')`

dcc.RangeSlider(
                    id="range-slider",
                    min=1,
                    max=12,
                    step=3,
                    value=[3, 7],
                    marks={
                        1: "January",
                        2: "february",
                        3: "March",
                        4: "April",
                        5: "May",
                        6: "June",
                        7: "July",
                        8: "August",
                        9: "September",
                        10: "October",
                        11: "November",
                        12: "December",
                    }

callback:

@app.callback(Output('filtered_data','data'),
[Input('range_slider','value')])
def update_dataframe(range_slider):
    df=filter_dataframe(range_slider)
    return df
4

It took me a hot second but your callback has range_slider but your range slider was created with id=range-slider…dash vs underscore.

5

Thanks for the correction @flyingcujo. That still is not the issue with the code. Cant get it to filter my dataframe on my graphs when i use the rangeSlider.

6

where is df defined? Is this a global variable? For debugging, can you provide a sample df?

7

Hi @flyingcujo. I defined my df out of the app.layout, pivoted it to get the my pivots,defined all my traces for my graphs and then just called them within the app.layout. Should the call back for my dcc.Store be called first , or do i need to define and create all my pivots and traces within the app.layout??

8

I only have layout code in my layout.py file, just to keep it separate from my callbacks. As long as all your componts are defined prior to invoking app.server, it really doesn’t matter where you callbacks, layout, etc are located.

Per the FAQ:

All your callbacks must be defined before your Dash app’s server starts running, which is to say, before you call app.run_server(debug=True)

Regarding the calling order of your callbacks, it all depends on whether or not you have components “chained”, i.e. user pressing component 1 when then triggers callback A, whose outtput triggers callback B, etc.