Updating PlotlyJS plots in-place with new data

General Usage
, ,
1

I am working with Plotly Dash to create a website, however some of the animation features of PlotlyJS do not seem to work completely. Right now I am having trouble with displaying the play button and a slider on the Dash webpage.

So my idea was to create my own PlotlyJS plot, and manually animate the figure with a Dash button and slider. I just was not sure of the best way to actually update a PlotlyJS plot in-place.

For example, I have some code below to create a figure, plot it, and then update some of the data in the plot, and then replot that figure. But I am worried that this replotting will be expensive to compute and give a laggy feel to the animation. Does anyone know of a better way to do something like this? Note that I checked the Plotly Dash documentation but the Julia docs are still moderately incomplete, so no luck there.

Here is a simple demo.

using PlotlyJS

N=200
xs1 = LinRange(0, 35, N)
ys1 = sin.(xs1)
ys2 = cos.(xs1)

trace1 = scatter(;x = xs1,  
                y = ys1,
                mode="lines",
                line_width=1.5,
                line_color="RoyalBlue")
    
trace2 = scatter(;x = xs1,  
                y = ys2,
                mode="lines",
                line_width=1.5)

p = Plot([trace1, trace2])

Now I can update the first trace in the plot with:

p.data[1].y .= 1.0
plot(p)

This will update the data in that plot and the the plot(p) call will repaint the plot.

I was wondering if there is a way to do this same code, but in-place instead of re-painting the plot. I would like to be able to smootly loop over my simulation, get the new data vector, and then nicely update the first plot trace with each iteration. Again, the idea is to avoid any kinda laggy look from having to constantly replot the figure.

Any suggestions would be welcome.

2

I haven’t worked with Dash specifically, but for the PlotlyJS side of things, this page lists the in-place modifying and updating functions that might do what you are wanting.

1 Like
3

@halleysfifthinc thanks for the reference. Yeah, I ended up using the react!() function to update my plot in place. I actually was hoping to write up a complete example or MWE, so that other users might benefit too. But you are correct that there is an in-place api that avoids repainting the entire plot.