# How to update multiple interactive plots with Interact.jl?

**URL:** <https://discourse.julialang.org/t/how-to-update-multiple-interactive-plots-with-interact-jl/112848>\
**Category:** General Usage\
**Tags:** question, plotting, interactivity\
**Created:** [April 11, 2024, 9:36pm UTC](https://discourse.julialang.org/t/how-to-update-multiple-interactive-plots-with-interact-jl/112848 "2024-04-11T21:36:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirklong](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kirklong/32/19433_2.png) [@kirklong](https://discourse.julialang.org/u/kirklong)\
**Post date:** [April 11, 2024, 9:36pm UTC](https://discourse.julialang.org/t/how-to-update-multiple-interactive-plots-with-interact-jl/112848/1 "2024-04-11T21:36:32Z")

</div>

I am trying to create a simple GUI to visualize a model, and turned to [Interact.jl](https://juliagizmos.github.io/Interact.jl/v0.10/). Consider the following minimal working example of a simple interactive sine wave:

```julia
function appTest(;θ0)
    f,shift,A = θ0
    f = spinbox([range(Float64(0.0),Float64(1.0))],label="f",value=f,step="any")
    shift = spinbox([range(Float64(-0.1),Float64(0.1))],label="shift",value=shift,step="any")
    A = spinbox([range(Float64(0.),Float64(1.))],label="A",value=A,step="any")
    update = button("update")
    θ = Interact.@map (&update; [f[],shift[],A[]])

    plt1(θ,t) = plot(t,θ[end].*sin.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))

    t = range(0,stop=2π,length=100)
    p1 = Interact.@map plt1(&θ,t)
    ui = vbox(hbox(f,shift,A,update),p1)
    return ui
end
w = Window(Dict("width"=>1700,"height"=>900))
ui = appTest(θ0=[0.5,0.0,1.0])
body!(w, ui);

```

This works as expected. But if I try to add a second plot following the same process as in adding the first, i.e.:

```julia
function appTest(;θ0) 
    f,shift,A = θ0
    f = spinbox([range(Float64(0.0),Float64(1.0))],label="f",value=f,step="any")
    shift = spinbox([range(Float64(-0.1),Float64(0.1))],label="shift",value=shift,step="any")
    A = spinbox([range(Float64(0.),Float64(1.))],label="A",value=A,step="any")
    update = button("update")
    θ = Interact.@map (&update; [f[],shift[],A[]])

    plt1(θ,t) = plot(t,θ[end].*sin.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))
    plt2(θ,t) = plot(t,θ[end].*cos.(2π.*θ[1].*t .+ θ[2]),label="",ylims=(-1.,1.))

    t = range(0,stop=2π,length=100)
    p1 = Interact.@map plt1(&θ,t)
    p2 = Interact.@map plt2(&θ,t)
    ui = vbox(hbox(f,shift,A,update),hbox(p1,p2))
    return ui
end

w = Window(Dict("width"=>1700,"height"=>900))
ui = appTest(θ0=[0.5,0.0,1.0])
body!(w, ui);

```

Doing this initially shows both plots in the correct layout, but anytime I try to update the parameters in the GUI it spits out an “Unexpected websocket server error” – thus I can’t ever interact with the plots, which is the point.

If I combine the plots into one larger plot first and wrap that in a function, then everything works fine, but this restricts the layout (in my real example I am envisioning a layout that looks like [[gui, plot1], [plot2, plot3]], which I don’t think can be accomplished if you combine all the plots first before laying them out?) and I don’t understand why the process works for one but not for both…any help is much appreciated, thanks!

I think this question is somewhat similar to one posed here: [Fastest plot backend for Interact + Mux - #11 by Tamas\_Papp](https://discourse.julialang.org/t/fastest-plot-backend-for-interact-mux/19349/11)

which I don’t think was ever fully resolved and hasn’t been updated in some time so I’m hoping there is some new approach I’m somehow missing.