# Update PlotlyJS plot in Dash with async data

**URL:** https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298
**Category:** General Usage
**Tags:** plotlyjs, dash
**Created:** [August 12, 2021, 9:11pm UTC](https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298 "2021-08-12T21:11:52Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)
#### Post date: [August 12, 2021, 9:11pm UTC](https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298/1 "2021-08-12T21:11:52Z")

</div>

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

```julia
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?

---

<div class="post-metadata">

### Author: ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)
#### Post date: [August 27, 2021, 6:41am UTC](https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298/2 "2021-08-27T06:41:52Z")

</div>

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.

```julia
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](https://dash-julia.plotly.com/dash-core-components) but it is available at the REPL help `help?> dcc_interval`.

---

<div class="post-metadata">

### Author: ![cepel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/cepel/32/30275_2.png) [@cepel](https://discourse.julialang.org/u/cepel)
#### Post date: [October 17, 2021, 7:42pm UTC](https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298/3 "2021-10-17T19:42:23Z")

</div>

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](https://global.discourse-cdn.com/julialang/original/3X/7/d/7db2f1fc3333c285d1702ce766ed55d06638bf6d.png)

---

<div class="post-metadata">

### Author: ![mzaffalon](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mzaffalon/32/214168_2.png) [@mzaffalon](https://discourse.julialang.org/u/mzaffalon)
#### Post date: [October 19, 2021, 8:13pm UTC](https://discourse.julialang.org/t/update-plotlyjs-plot-in-dash-with-async-data/66298/4 "2021-10-19T20:13:59Z")

</div>

@cepel: thank you for the update.

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