Update PlotlyJS plot in Dash with async data

General Usage
,
1

I would like to update a PlotlyJS plot inside Dash with data that is generated asynchronously. A MnWE (minimal not-working example) is here:

using Dash, DashHtmlComponents, DashCoreComponents, PlotlyBase

app = dash()

plt = Plot(scatter(; y = randn(10)))

function data_producer(pl)
    while true
        extendtraces!(pl, Dict(:y => [[randn()]]))
        sleep(1)
    end
end

# generate the data asynchronously
@async data_producer(plt)

app.layout = html_div() do
    dcc_graph(id = "figure", figure = plt)
end

run_server(app, "127.0.0.1", 8050, debug = true)

How can I trigger the redrawing of the plot?

2

The missing element was generating the event with dcc_interval. Here is the complete script that updates the plot every two seconds while data is produced at a rate of a new data point per second.

using Dash, DashHtmlComponents, DashCoreComponents, PlotlyBase

plt = Plot(scatter(; y = randn(10)))

function data_producer(pl)
    while true
        extendtraces!(pl, Dict(:y => [[randn()]]))
        sleep(1)
    end
end

# generate the data asynchronously
@async data_producer(plt)


app = dash()

app.layout = html_div() do
    dcc_graph(id="theplot", figure=plt),
    dcc_interval(id="plot-updater", interval=2000)
end

callback!(app,
          Output("theplot", "figure"),
          [Input("plot-updater", "n_intervals")]) do n
    plt
end

run_server(app, "127.0.0.1", 8050, debug=true)

dcc_interval is currently missing from the Julia documentation but it is available at the REPL help help?> dcc_interval.

3

Hey @mzaffalon

While working on VSCode, I can see the “dcc_interval” component in Dash Julia. Let me know if you are still having a problem, so I can develop a tiny example.

image
image818×303 19.2 KB

4

@cepel: thank you for the update.

I stopped working with Dash as it was not the solution I needed for my problem.