Return a graph to a div from a callback

Dash Python
1

I am trying to use a callback to update a bunch of graphs. Each graph is created from a function, and there is complex data manipulation before the graph is output. I want to use the same functions from a callback and return the graph to the div.

2

Hi @andrew_bennett I am actually doing something similar, and my current solution works but is sub-optimal. In my app.layout, I have included the following:

app.layout = html.Div(children=[
dcc.Loading(id='loading-icon',
                    children=[html.Div(children=[html.Div(id='graphs')], className='row')],
                   type='circle',
    )
)

Then in my callback:

@app.callback(
    Output('loading-icon','children'),
    [Input('col-names','value')]
)
def update_graphs_displayed(col_names):
    graphs = []
    if col_names != ['No columns found']:
        for col_name in col_names:
            graphs.append(generate_graph(col_name))
        return graphs

This works, but the problem for me is that the entire internal Div tag has to re-render every times the list of graphs changes. I am looking for a solution which would help both of us.

Instead of rendering all of the graphs at once, is it possible to load one graph at a time and render it on to the screen, then the next graph and so on?

3

Thanks for the response! I actually figured out a solution for my own issue. I referenced the id tag of the graph elements then recreated the graphs then passed the figure from each new graph back to the original graph object.