Callback error updating output-graph.children when updating boxplot with values from table

Dash Python
1

I want to be able to choose values from the table and update a boxplot every time I choose a different subset of values.

For example, in my code, I would like to choose values from column ‘experi_1’. My problem is that the boxplot is not generated at all. I would really appreciate any advice and help!

Code

    from dash.dependencies import Input, Output
    from dash import Dash, dash_table, dcc, html, no_update
    from jupyter_dash import JupyterDash
    import pandas as pd
    import plotly.graph_objects as px
    import plotly.express as px
    external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
    app = JupyterDash(__name__, external_stylesheets=external_stylesheets)
    mixed_df = px.data.experiment(indexed=False)
    mixed_df['experiment_1'] = round(mixed_df['experiment_1'], 2)
    mixed_df['experiment_2'] = round(mixed_df['experiment_2'], 2)
    mixed_df['experiment_3'] = round(mixed_df['experiment_3'], 2)
    mixed_df['id'] = mixed_df.index
    mixed_df = mixed_df[['id','gender','group','experiment_1','experiment_2','experiment_3']]
    mixed_df.columns = ['id','gender','group','experi_1','experi_2','experi_3']
    columns = mixed_df.columns
    app.layout = html.Div(
        [
            html.Div(
                [
                    html.H3("Experiment Box Plot", style={"textAlign":"center"}),
                    dash_table.DataTable(
                            id="table",
                        columns=[{"name": c, "id": c} for c in columns],
                        data=mixed_df.to_dict("records"),
                        page_size=10,
                        sort_action="native",
                        row_selectable = 'multi',
                        selected_rows = [],
                    ),
                ],
                style={"margin": 50},
                className="seven columns"
            ),
            html.Div(id="output-graph", className="three columns"),
        ],
        className="row"
    )
    @app.callback(
        Output("output-graph", "children"), Input('table', "selected_rows"))

    def update_graph(selected_rows):
          if selected_rows is None:
            return no_update
          dff = mixed_df.iloc[selected_rows]
          y= dff['experi_1']      
          trace0 = go.Box(y=y)
          data=[trace0]
          return [
                dcc.Graph(figure={'data': data}, id='box-plot')
          ]  
    if __name__ == "__main__":
          app.run_server(debug=True)
2

Two things about your callback:

  1. There is no component with id=‘datatable-interactivity’.
  2. You have a mismatch between the number of inputs and function arguments in the callback.
1 Like
3

Thank you! I edited my code based on what you pointed out. It makes sense!
However, I still have the same issue - no datatable, no boxplot generated.

4

Based on your update, I have two more observations:

  1. dff is not defined (did you mean mixed_df?) in the callback function.
  2. You don’t have a column 3. Maybe you meant “experi_3”.

Please make sure to use debug=True and check the error messages. The two errors above are not related to Dash.

Hope this fixes your problem.

1 Like
6

Works now, thanks a lot!