Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Plotly Dash table shows up in Jupyter Notebook but not in dash app

I have the following create table function, and it works accordingly in Jupyter Notebook, however when I call it out in the Dash app nothing renders.

def create_table(dataframe):
    fig = go.Figure(data=[go.Table(
    # header=dict(values=['A Scores', 'B Scores'],
    #             line_color='darkslategray',
    #             fill_color='lightskyblue',
    #             align='left'),
    cells=dict(values=[dataframe.columns.values.tolist(), # 1st column
                       df_cohort_3.iloc[0:1].values.tolist()[0]  # 2nd column
                      ],
               line_color='darkslategray',
               fill_color='lightcyan',
               align='left'))
                        ])
    #fig.update_layout(width=500, height=600)
    return fig.show()

Here is my Dash logic:

app = dash.Dash()

app.layout = html.Div(style={'backgroundColor': colors['background']},
children=[

    #Title
    html.Div(html.H1(children="My Dashboard "))

    #Generate Dash table

    ,create_table(df_1)


    ,

                    ])

if __name__ == '__main__':
    app.run_server(debug=False, port=3005)

Any suggestions?

Hi @Unixmad, you need to change two things in the example

  • the create_table function should return the fig object, not fig.show() which calls the default renderer to display the figure
  • the plotly figure fig should be the figure argument of a dcc.Graph object, as in https://dash.plot.ly/interactive-graphing

So I changed the function to “return fig”

I then went to the app portion and changed it to :

    ,dcc.Graph(
        id='COHORT1',
        figure={
            'data': [ create_table(df_1)
            ],
            'layout': {
                'clickmode': 'event+select'
            }
        }
    )

Not sure I’m inputting the data correctly… sorry also new to python :slight_smile:

it should be figure=create_table(df_1) (we should document this more :-))

1 Like