Is there a better way to perform multiple output with Dash by Plotly?

Oleh Rybalchenko picture Oleh Rybalchenko · Aug 23, 2017 · Viewed 10.8k times · Source

As we can see in Interactivity part of Getting started, one callback function can accept multiple inputs but always has single output.

Assume that we have two blocks separately that must be updated after input change. Of course, the simplest way is to make two callbacks with same input for each of the blocks. The problem is that request performs twice while one is enough to get all data.

@app.callback(
    dash.dependencies.Output('element_1', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_1(filter):
    return get_data(filter).el1

@app.callback(
    dash.dependencies.Output('element_2', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_2(filter):
    return get_data(filter).el2

Solution I find is to wrap these elements in single block and re-render it completely with a single request. But in this case all static content in the wrapper will be refreshed too, especially if initial elements are far from each other in DOM.

@app.callback(
    dash.dependencies.Output('wrapper', 'children'),
    [dash.dependencies.Input('filter', 'value')])
def callback_element_wrapper(filter):
    data = get_data(filter)
    return html.Div(
        children=[
            data.el1,
            # more static content
            data.el2,
        ]
    )

So maybe there are more elegant way to output in two or more elements with a single request?

Answer

Dimuthu picture Dimuthu · Jun 19, 2019

Now, Plotly Dash supporting multiple outputs in single event. This is with latest version of dash==0.38.0rc1

enter code `@app.callback([Output('output1', 'children'), Output('output2', 'children')],
          [Input('output-btn', 'n_clicks')],
          [State('output-btn', 'n_clicks_timestamp')])
def on_click(n_clicks, n_clicks_timestamp):
    if n_clicks is None:
        raise PreventUpdate

return n_clicks, n_clicks_timestamp`

Git Sample