How to return a datatable updated by 2 dropdowns as inputs in Plotly Python

Dash Python
1

As titled, i am creating a plotly dashboard with a data-table only. There will be 2 drop-downs as inputs, and the data-table will update according to the drown-downs. How do I set the layout and callbacks?

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output, State

df = pd.read_csv(https://elartedm.com/wp-content/uploads/2020/03/data_hk.csv, header=0, encoding = 'utf8')

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

dropdown = html.Div([html.Label('district'),
             dcc.Dropdown(id='dropdown_d',
                          options=[{'label': i, 'value': i} for i in df["district"].unique()], value='äø­č„æ區 Central &'),
             html.Label('address'),
             dcc.Dropdown(id='dropdown_a',
                          options=[{'label': i, 'value': i} for i in df["address"].unique()], value='ē¬¬äŗŒč”—143č™Ÿęµ·ę˜‡å¤§å»ˆ2åŗ§')])

final_table = html.Div([dash_table.DataTable(id="final_table")])

app.layout = html.Div([dropdown, final_table])

@app.callback(Output('final_table', 'data'),
          [Input('dropdown_d', 'value'),
           ])

def update_table(selected_value):
    df = pd.read_csv(https://elartedm.com/wp-content/uploads/2020/03/data_hk.csv, header=0, encoding = 'utf8')
    df_updated = df[df["district"] == selected_value]
    columns = [{'name': i, 'id': i} for i in df_updated.columns]
    data = df.to_dict('records')
    return columns, data

if __name__ == "__main__":
    app.run_server(debug=True, port=8055)

This is the farthest i can get. The code above is only trying to update the data-table from 1 dropdown value, but my goal is to update by 2 dropdown values.

any help is very much appreciated.
in case the data file is needed, here is the link to the data.

2

Add your other dropdown to the Input as shown below. Also note you need to pass in another arg to your update_table.

@app.callback(Output('final_table', 'data'),
          [Input('dropdown_d', 'value'),
           Input('dropdown_a', 'value'])
def update_table( selected_value, val_for_dropdown_a):
3

You can Input both dropdown value, and pass both arg to update_table.

@app.callback(
    Output('final_table', 'data'),
    [Input('dropdown_d', 'value'),
     Input('dropdown_a', 'value'),]
)
def update_table(dropdown_d, dropdown_a):
    ... other code...
4

Thank you guys for the answers, I will try it out when I m with my mac.

But allow me one more question before that, is
Output(ā€˜final_tableā€™, ā€˜dataā€™) correct? Because the entire piece of code wasnā€™t working, and I saw some may use Output(ā€˜final_tableā€™, ā€˜childrenā€™) here.

5

Since your function as writen is returning data and columns, your Output should be:

@app.callback(
  [Output('final_table', 'data'),
  Output('final_table', 'columns')],   
  [Input('dropdown_d', 'value'),
  Input('dropdown_a', 'value'])
def update_table( selected_value, val_for_dropdown_a):
  ... your code...
  return data, columns

But if your columns are not changing, you can just return the data. It all depends on what you want/need to update.

6

yes, it solved my problem, thank you all!

1 Like