Problem with callback error during Dash app implementation

Question

I am trying to set up a simple Dash app that returns a value from a dataframe used as a "look-up table"; a screenshot of a sample test table is included here

Within the app, a user can enter one of many states (this is the first column in above table), and the app should return the corresponding two column entries from same row in which the state exists in this dataframe. For example: if a user selected LA, the app should return "med" and "radio"

Unfortunately, I am getting a call-back error after a user selection. My code is attached below. Can somebody please guide me on the way to resolve this? This is my first time using Dash - so appreciate any guidance!

app = dash.Dash(__name__)
server = app.server

df=pd.read_csv("test_lookup_table.csv", delimiter=',', encoding="utf-8-sig")
df.set_index('state')

app.layout = html.Div([
    html.H1('On demand look up '),
    html.H3('Select from list of states below'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in df.state],
        value='LALA'
    ),
    html.Div(id='display-value')
])


@app.callback(
    Output('dropdown','options'),
    [Input('dropdown', 'value')])


def callback_a(i):
    return df.loc[i, 1:3]

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

coralvanda · Accepted Answer · 2019-06-15 22:50:03Z

3

You did not mention the specific error, but I think I can see the problem. Your callback is outputing (Output) to the dropdown component's options prop. It sounds like you would want to output to something else, like a div or p component. You have a display-value ID for one div, so maybe that's where you want it to go? Try changing your callback like this:

@app.callback(
    Output('display-value', 'children'),
    [Input('dropdown', 'value')])
def callback_a(i):
    return df.loc[i, 1:3]

EDIT:

One problem is coming from setting the index to use the state column values. set_index returns a value, but you haven't assigned it, so nothing ends up happening. Use df = df.set_index('state') or include the inplace=True flag inside the method call.

That is causing the key error, because the df doesn't have the state values as indices, so you can't look for them. Now you can use df.loc[i] in your callback and it will be able to find the right row. You cannot use [1:3] here, though, because loc references by name, not value of the row/col, and you have no columns named with integers. You could do df.loc[i].tolist()[1:3]. However, with state as an index, you only have two values in each row (indices 0 and 1), so the :3] part is never going to get anything. You'll just get what's at index 1.

Lastly, and I should have mentioned this before, you've got the df set up as a global variable, which is generally not best practice. It would be better to use a callback to load the df in from your CSV file and add it to some component, like a dash_table.DataTable. Then you can have other callbacks pull values from that table instead of referencing a global variable.

edited Jun 15, 2019 at 22:50

answered Jun 15, 2019 at 1:17

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

veg2020 Over a year ago

Thank you @coralvanda. The above fix helped resolve the "keyerror" I was getting - but am now getting a "dash.exceptions.nolayoutexception". I tried to fix this by converting my return output to a dash_table.DataTable but was unsuccessful - and still have the same error. How can I get the desired rows from the return statement along with the column headers?

veg2020 Over a year ago

I reran the above code with the value in dcc.Dropdown = 'LA' (and not LALA as shown above) but it is generating two errors - a) options[3].label in Dropdown with ID "dropdown" is required but it was not provided and b)Callback error updating display-value.children. Any ideas what I am doing wrong here?

coralvanda Over a year ago

Updated my original answer with more details. I hope this gets it working for you!

Collectives™ on Stack Overflow

Problem with callback error during Dash app implementation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related