Dash Slider Range Doesn't Work ( Datatype or Callback Issue?)

Dash Python
1

04%20PM
Screen Shot 2019-08-19 at 12.57.04 PM.png1432×703 32.1 KB

Hi,

I have been trying to connect six callbacks to this graph in the above picture (Region and Equipment have hierarchies that lead to the bottom dropdown) and believe I have isolated the problem to the slider below.

html.Div([dcc.RangeSlider(
            id='my-range-slider',
            min=2010,
            max=2017,
            step=None,
            marks={2010:'2010',
                   2011:'2011',
                   2012:'2012',
                   2013:'2013',
                   2014:'2014',
                   2015:'2015',
                   2016:'2016',
                   2017:'2017'})
                ], style={'textAlign': 'right','width':'87%'})

], style=tab_style, selected_style=tab_selected_style),

I think I may not be understanding the slider component as I can’t tell if the problem is the datatype with the dates in my spreadsheet (currently they are numbers/integers) or if its the way my callback is designed. The code for my callbacks is seen below (Measure and Time Frame are different columns I am selecting from rather than selecting values from a column) :

@app.callback(
dash.dependencies.Output('linear','figure'),
[dash.dependencies.Input('country','value'),
dash.dependencies.Input('Equipment_Sub_Category','value'),
dash.dependencies.Input('brand','value'),
dash.dependencies.Input('my-range-slider','values'),
dash.dependencies.Input('Time','value'),
dash.dependencies.Input('Measure','value')
])

def update_graph(country_name,category_name,brand_name,year_name,time_name,measure_name):
    Total1=Total[Total['Country_Name'] == country_name]
    Total2=Total1[Total1['Equipment_Category'] ==category_name]
    Total3=Total2[Total2['Manufacturer_Name'] ==brand_name]
    Total4=Total3[Total3['Year'] ==year_name]
    x=Total4[time_name]
    y=Total4[measure_name]
    trace1=go.Bar(x=x,y=y,marker=dict(
        color='rgb(0,191,255)', # code for sky blue 0,191,255
        line=dict(
            color='rgb(8,48,107)',
            width=1.5,
        )),opacity=0.6,name='Units')
    layout=go.Layout(xaxis={'title': 'Time Frame'},
                             title= 'Shipment',
                             hovermode='closest',
                             margin={"t": 25, "l": 25, "r": 25},
                             height=225)
    return {'data':[trace1],
            'layout':[layout]}

I was wondering if there was something I am missing, as I can’t tell why the graph ( and actually the layout won’t show up).

A sample of my data can be seen below:

38%20PM
Screen Shot 2019-08-19 at 1.08.38 PM.png1377×85 20.4 KB

2

You are using the wrong attribute of the slider in your Input.
You need to get the ‘value’ attribute, not the ‘values’ attribute.

Edit: Nvm, I just see it is a range slider, not a Slider.
This still leads to the same issue though I think.
Can you print year_name?
Because if it is a range slider, it should be a list of two values, while you do not tell your filter what value the Year name should equal to.

Total4=Total3[Total3['Year'] ==year_name]

You are saying that the value in Year needs to be equal to a list like [2010, 2013] which of course it isn’t.
You should therefore either just use a slider instead of rangeslider, or use the range slider in a away, that all the data, where any of the numbers contained in the range are accepted.

3

Thanks! Ya, its a range slider and year_name becomes a list of two values. I was hoping to use the range slider in a way where if two values are accepted [ie 2010,2012], All the corresponding x and y values, after filtering, for 2010,2011, and 2012 would be shown in the graph like you said. Thats why I figured keeping the datatype to numbers for the dates would be the best solution. Would you have any ideas on how to structure

4

First you would need to get all the values in between:

columns=list(range(year_name[0], year_name[1]+1, 1))

Then you can create a new dataframe for each of those values the following:

Total4=pd.DataFrame()
for i in Total3.columns:
    if i in columns:
        Total4[i]=Total3[i]

In addition I would suggest to set the step parameter of your slider to 1 instead of None.
Otherwise you could get values like 2010.342 or anything in between if you do click anywhere else than on the marks, which would result in an error again.