Search code examples
plotlydropdownplotly-dash

Select dropdown value instead of slider value to filter rows in Dataframe


Using dash from plotly, I want to filter a dataframe in my function by two columns using the value from the slider in one column and the value in the dropdown in another column. How do you distinguish between the two "value" variables within the script to filter the dataframe?

Here is what I have so far

app.layout = html.Div([
dcc.Graph(id='chart-with-slider'),
dcc.Dropdown(id='dropdown', options=[
    {'label':i, 'value': i} for i in df['Name'].unique()
], 
    value=value[0],
    multi=False,
    clearable=False,
    placeholder='Choose Drug'),
dcc.RangeSlider(
    id='quarter-slider',
    min=numdate[0],
    max=numdate[-1],
    value=[numdate[0], numdate[-1]],
    marks={numd:date.strftime('%b%Y') for numd,date in zip(numdate, df['Quarter'].dt.date.unique())},
    step=None
)

])

@app.callback(
Output('chart-with-slider', 'figure'),
Output('table-container', 'children'),
Input('dropdown', 'value'),
Input('quarter-slider', 'value'))

def update_figure(value, dropdown.value):

global df

dfPats = df.loc[(df['fQtr'] == value[0]) & df['Name'] == dropdown.value[0], 
['PatientNum']]'''

As you can see I tried the below,but as I suspected, there is no such syntax.

dropdown.value[0] 

Updated Script causing Output error on Output('table-container', 'children') is below:

    dcc.Graph(id='chart-with-slider'),
    dcc.Dropdown(id='dropdown', options=[
    {'label':i, 'value': i} for i in df['NDCName'].unique()
], 
    multi=False,
    clearable=False,
    placeholder='Choose Drug'),
    html.Div(id='table-container'),
    dcc.RangeSlider(
        id='quarter-slider',
        min=numdate[0],
        max=numdate[-1],
        value=[numdate[0], numdate[-1]],
        marks={numd:date.strftime('%m%Y') for numd,date in zip(numdate, df['Quarter'].dt.date.unique())},
        step=None
    )
])

@app.callback(
    Output('chart-with-slider', 'figure'),
    Output('table_container', 'children'),
    Input('dropdown', 'value'),
    Input('quarter-slider', 'value'))

def update_figure(dropdown_value, slider_value):```

Solution

  • Inputs (and states) correspond to arguments in your callback functions based on the number and order of inputs and/or states.

    The name of a parameter doesn't have to correspond with the property or id it maps to. It can be whatever you want as long as it follows Python syntax rules for parameters.

    You can't have a . in a parameter name (ex: dropdown.value). That is invalid syntax.

    You could instead do something like this:

    @app.callback(
        Output("chart-with-slider", "figure"),
        Output("table-container", "children"),
        Input("dropdown", "value"),
        Input("quarter-slider", "value"),
    )
    def update_figure(dropdown_value, slider_value):
        # Do something...
    

    First input corresponds with first function parameter, second input corresponds with second function parameter, etc...