How to update a app designer UIAxes plot in real time

248 views (last 30 days)
I'm trying to use app designer to plot data that's being acquired in real time. When I've done this type of thing in the past, I used set('Xdata') and set('Ydata') to update just the data that was being displayed without fully redrawing the plot, so the update was faster and smoother.
As far as I can figure, there's no equivalent for UIAxes. All of the examples I have found use the format plot(UIAxes, datax, datay). Are there any recommendations on how to do this?

Answers (3)

Camile van der Heijden
Camile van der Heijden on 22 Feb 2018
I'm facing a similar problem, but I've come a long way since. You could create a line object in the UIAxes, then update it's XData and YData properties. However, Appdesigner (or specifically UIFigure) employs a HTML/Javascript layer which is less efficient than the standard matlab figure. This is giving me quite a headache and I'm currently working with matlab support to find ways around this.
Another thing that may or may not suit your application is using the 'animatedline' object/function. It is specifically created to improve plotting animation efficiency.
Without example code it is of course hard to provide a specific solution, but I hope this helps you. Feel free to ask clarification.
Camile van der Heijden
Camile van der Heijden on 27 Feb 2018
Hi Jeffrey,
I just realized I didn't actually answer your question. You can either create a (primitive) line object in the UIAxes of your choice and update it through 'myUIAxes.XData = newXData;' and 'myUIAxes.YData = newYData;'
or using the 'set' function, as you used to do with normal figures. Another option is creating an animated line object (again in the UIAxes specified by you) and using 'addpoints' function to add new points to your graph. You could even use the 'MaximumNumPoints' property to delete old data past a certain maximum amount of data points. You also might want to look at the link at the bottom of my post.
In my case, I was using a timer set to fire about 20 times/sec and going from plot to 'lines' updated through XData and YData markedly improved performance. Just not enough unfortunately. Some pointers I got from ML support:
Animations by repeatedly setting XData, YData properties of objects suffer from efficiency issues in all settings but are more pronounced in web graphics/appdesigner settings.
Here are some issues
1) Setting new XData (and other data) effectively forces us to send data to the rendering system. With graphics in a 'figure', this meant having to load the data to the GPU every time. This is an expensive operation.
2) For appdesigner apps, this is worse because there is an HTTP/JavaScript layer involved. This layer is probably a bottleneck and inhibits efficient use of GPU when XData/YData is changing. Using hgtransform/animatedline/axes limits to animate objects will still continue to use GPU efficiently.
In the future we hope to build better animation API to allow efficient use of GPU for changing XData/YData situations.
Graphics performance documentation page has a lot more information related to this.
Hope this helps!

Sign in to comment.

Daniel de Almeida Cardoso Soares
Edited: Daniel de Almeida Cardoso Soares on 8 Jun 2020
In my case, I have solved this problem adding the function drawnow.
Every time this function runs, all of the graphics/tables are updated.
  1 Comment
Eric Sargent
Eric Sargent on 9 Dec 2020
This may work in this given instance, but I wouldn't recommend using drawnow as a general solution to this. Please see the anwer below about using a timer as a more robust solution.

Sign in to comment.

Eric Sargent
Eric Sargent on 9 Dec 2020
You can also try using a timer to plot the data at a given interval.
An example can be found here:


Find more on Develop Apps Using App Designer in Help Center and File Exchange

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!