# Realtime plotting

**URL:** <https://discourse.julialang.org/t/realtime-plotting/15638>\
**Category:** General Usage\
**Tags:** plotting, control, plotlyjs, inspectdr\
**Created:** [September 28, 2018, 7:20pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638 "2018-09-28T19:20:41Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ufechner7](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ufechner7/32/51363_2.png) [@ufechner7](https://discourse.julialang.org/u/ufechner7)\
**Post date:** [September 28, 2018, 7:20pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/1 "2018-09-28T19:20:41Z")

</div>

Hello,  
I want to plot real-time flight control data to get a better and faster understanding of the performance of our flight controllers.  
The incoming data stream might be decoded in a C-function (because it already exists).  
But then I would like to plot one to three data streams in Julia with an update rate of about 30 Hz. Just an oscilloscope like plot.  
In addition it would be nice to select the data stream(s) in the GUI.  
Which plotting package might be the best choice?  
Uwe

---

<div class="post-metadata">

**Author:** ![e3c6](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@e3c6](https://discourse.julialang.org/u/e3c6)\
**Post date:** [September 28, 2018, 8:10pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/2 "2018-09-28T20:10:58Z")

</div>

Perhaps this could be useful:

> **[GitHub - JuliaGizmos/Interact.jl: Interactive widgets to play with your Julia...](https://github.com/JuliaGizmos/Interact.jl)**
>
> Interactive widgets to play with your Julia code. Contribute to JuliaGizmos/Interact.jl development by creating an account on GitHub.

> **[GitHub - JuliaGizmos/InteractNext.jl](https://github.com/JuliaGizmos/InteractNext.jl)**
>
> Contribute to JuliaGizmos/InteractNext.jl development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![ssfrr](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ssfrr/32/3736_2.png) [@ssfrr](https://discourse.julialang.org/u/ssfrr)\
**Post date:** [September 28, 2018, 8:18pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/3 "2018-09-28T20:18:44Z")

</div>

I think you’ll get highest performance and frame rates from Makie, but I think GR is also able to do pretty well. I believe InspectDR is designed to be quite fast, but I haven’t used it.

---

<div class="post-metadata">

**Author:** ![halleysfifthinc](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/halleysfifthinc/32/206280_2.png) [@halleysfifthinc](https://discourse.julialang.org/u/halleysfifthinc)\
**Post date:** [October 1, 2018, 4:29pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/4 "2018-10-01T16:29:26Z")

</div>

Depending on the size of the data you are plotting, PlotlyJS might also work for you. I recently used the `react!` function in PlotlyJS to in-place update an existing plot and Interact as an interface, and I was surprised at how responsive it was. It was updating at least at 30Hz.

---

<div class="post-metadata">

**Author:** ![ufechner7](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ufechner7/32/51363_2.png) [@ufechner7](https://discourse.julialang.org/u/ufechner7)\
**Post date:** [October 1, 2018, 5:26pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/5 "2018-10-01T17:26:00Z")

</div>

Thanks a lot for all your responses! I will try some of your suggestions soon. 🙂

---

<div class="post-metadata">

**Author:** ![MA\_Laforge](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ma_laforge/32/385_2.png) [@MA\_Laforge](https://discourse.julialang.org/u/MA_Laforge)\
**Post date:** [October 2, 2018, 4:15pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/6 "2018-10-02T16:15:43Z")

</div>

I was wondering how InspectDR would handle this myself… so I made a small test:

```julia
using InspectDR
using Colors

function getmeasdata(t, φ)
	sigA = sin.(t .+ φ)
	sigB = cos.(t .+ φ)
	return (sigA, sigB)
end

#Build general structure of animation plot
function buildanimplot()
	NPOINTS = 1000
	NCYCLES = 2 #To display
	RED = RGB24(1, 0, 0)
	GREEN = RGB24(0, 1, 0)
	BLUE = RGB24(0, 0, 1)

	#collect: InspectDR does not take AbstractArray:
	t = collect(range(0, stop=NCYCLES*2pi, length=NPOINTS))
	(sigA, sigB) = getmeasdata(t, 0)

	#Using Plot2D simplified "template" constructor:
	p = InspectDR.Plot2D(:lin, [:lin, :lin],
		title = "Measured Data", xlabel = "time (s)",
		ylabels = ["Amplitude (V)", "Amplitude (V)"]
	)
	p.layout[:enable_legend] = true

	wfrmA = add(p, t, sigA, id="Signal A", strip=1)
		wfrmA.line = line(color=RED, width=2)
	wfrmB = add(p, t, sigB, id="Signal B", strip=2)
		wfrmB.line = line(color=BLUE, width=2)

	gplot = display(InspectDR.GtkDisplay(), p)
	return (gplot, t, wfrmA, wfrmB)
end

#Update animated plot in "real time":
function testanimplot()
	DURATION = 5 #sec
	NSTEPS = 1000
	RADPERSEC = 2pi
	tstep = DURATION/NSTEPS
	ϕstep = RADPERSEC * tstep

	(gplot, t, wfrmA, wfrmB) = buildanimplot()

@time begin #Curious to see how long it actually takes
	for ϕ in range(0, step=ϕstep, length=NSTEPS)
		sleep(DURATION/NSTEPS)
		(sigA, sigB) = getmeasdata(t, ϕ)
		wfrmA.ds.y = sigA
		wfrmB.ds.y = sigB
		InspectDR.refresh(gplot)
	end
end

	return gplot
end

gplot = testanimplot()

```

This might make it easier to see if InspectDR is adequate for your task…

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [February 15, 2020, 4:16am UTC](https://discourse.julialang.org/t/realtime-plotting/15638/7 "2020-02-15T04:16:43Z")

</div>

How did you do it? Hints will be much appreciated.

---

<div class="post-metadata">

**Author:** ![halleysfifthinc](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/halleysfifthinc/32/206280_2.png) [@halleysfifthinc](https://discourse.julialang.org/u/halleysfifthinc)\
**Post date:** [February 19, 2020, 5:36pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/8 "2020-02-19T17:36:31Z")

</div>

The general premise is to keep your trace objects that are used in constructing the plot, update them inplace, and then call `react!` with your plot objects and your (modified) traces. Here’s an example:

```julia
using PlotlyJS

t = 1:25
x1 = sin.(t./(pi))
x2 = rand(25) .+ 2

trace1 = scatter(;x=t, y=x1)
trace2 = scatter(;x=t, y=x2)
l = Layout()

p = plot([trace1, trace2], l)

for i in 1:100
    trace1[:y] .= sin.((t .+ i) ./ pi)
    trace2[:y] .= rand(25) .+ 2
    react!(p, [trace1, trace2], l)
    
    sleep(0.1)
end

```

---

<div class="post-metadata">

**Author:** ![DoktorMike](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/doktormike/32/2736_2.png) [@DoktorMike](https://discourse.julialang.org/u/DoktorMike)\
**Post date:** [February 19, 2020, 7:37pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/9 "2020-02-19T19:37:48Z")

</div>

That’s cool.

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [February 19, 2020, 9:39pm UTC](https://discourse.julialang.org/t/realtime-plotting/15638/10 "2020-02-19T21:39:15Z")

</div>

Nice. That is pretty much what I ended up doing, except that I thought it too much work to sort through existing traces to change them up. I just [regenerated the traces](https://github.com/PetrKryslUCSD/FinEtoolsFlexBeams.jl/blob/c2b9edd4616e3c660ec0232aa91a2ef5b87231a3/examples/modal/argyr_l_frame_modal_examples.jl#L151) from scratch every time they needed to be plotted.

Now the trickier part: Make the plot respond to user input during the simulation/plotting.