How to display JSON dump as a figure in a plotly dash app?

Dash Python
1

This might be a noob question, but I just started using dash and would like some help.

I have a JSON dump generated by the visualize function below (simplified):

def visualize(e):
    return ArrayVisualizer(e).html()

class ArrayVisualizer:
    def __init__(self, arr):
        ### the computation steps

    def html(self):
        return json.dumps(self.data)

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('options-dropdown', 'value')])
def update_output(selected_option):
    data = pd.read_csv('dataset.csv')
    fig = visualize(data)
    return html.Div(fig)

Since I return json.dumps(self.data), it appears as follows on the web app:

enter image description here

But its supposed to look like this:

enter image description here

I tried this:

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('options-dropdown', 'value')])
def update_output(selected_option):
    data = pd.read_csv('dataset.csv')
    fig = visualize(data)
    return dcc.Graph(
            id='plotly-graph',
            figure={
                'data': fig
            }
        )

but this return a blank figure:
enter image description here

How do I get it to render the json dump as this interactive figure?

1 Like