appdesigner's ui axes update is extremely slow and laggy

I would like to show real-time streaming of 4 signals coming in at 60Hz via ui axes through using appdesigner. I have used both plot and animatedline functions, and they are both extremely slow and laggy when the plot update is applied to the ui axes. On the other hand, the same animatedline applied on new axes, not to the ui axes, is properly showing the incoming data stream like actual real-time signals without much delay or lag. Is there a way to efficiently show data streaming without such delay on the ui axes?

Code 1 below is the sample appdesigner code where animatedline is applied to the ui axes, hence the data stream on the GUI doesn't look real-time at all.

% Code 1 - Extremely slow and laggy
classdef App1 < matlab.apps.AppBase

      % Properties that correspond to app components
      properties (Access = public)
          UIFigure     matlab.ui.Figure
          UIAxes1      matlab.ui.control.UIAxes
          UIAxes2      matlab.ui.control.UIAxes
          UIAxes3      matlab.ui.control.UIAxes
          UIAxes4      matlab.ui.control.UIAxes
          StartButton  matlab.ui.control.StateButton
      end

      methods (Access = private)

          % Value changed function: StartButton
          function StartButtonValueChanged(app, event)
              value = app.StartButton.Value;

              % Generate fake data streams
              dataStream1 = rand(6000, 1);
              dataStream2 = rand(6000, 1);
              dataStream3 = rand(6000, 1);
              dataStream4 = rand(6000, 1);

              % Set up animated lines
              line1 = animatedline(app.UIAxes1, 'MaximumNumPoints', 60);
              line2 = animatedline(app.UIAxes2, 'MaximumNumPoints', 60);
              line3 = animatedline(app.UIAxes3, 'MaximumNumPoints', 60);
              line4 = animatedline(app.UIAxes4, 'MaximumNumPoints', 60);

              for i = 1:6000
                  % Set data
                  currentTime = i;

                  addpoints(line1, i, dataStream1(i));
                  addpoints(line2, i, dataStream2(i));
                  addpoints(line3, i, dataStream3(i));
                  addpoints(line4, i, dataStream4(i));

                  drawnow;
              end
          end
      end

      % App initialization and construction
      methods (Access = private)

          % Create UIFigure and components
          function createComponents(app)

              % Create UIFigure
              app.UIFigure = uifigure;
              app.UIFigure.Position = [100 100 860 739];
              app.UIFigure.Name = 'UI Figure';
              setAutoResize(app, app.UIFigure, true)

              % Create UIAxes1
              app.UIAxes1 = uiaxes(app.UIFigure);
              title(app.UIAxes1, 'Signal 1');
              xlabel(app.UIAxes1, 'X');
              ylabel(app.UIAxes1, 'Y');
              app.UIAxes1.Position = [113 553 635 158];

              % Create UIAxes2
              app.UIAxes2 = uiaxes(app.UIFigure);
              title(app.UIAxes2, 'Signal 2');
              xlabel(app.UIAxes2, 'X');
              ylabel(app.UIAxes2, 'Y');
              app.UIAxes2.Position = [113 394 635 158];

              % Create UIAxes3
              app.UIAxes3 = uiaxes(app.UIFigure);
              title(app.UIAxes3, 'Signal 3');
              xlabel(app.UIAxes3, 'X');
              ylabel(app.UIAxes3, 'Y');
              app.UIAxes3.Position = [113 235 635 158];

              % Create UIAxes4
              app.UIAxes4 = uiaxes(app.UIFigure);
              title(app.UIAxes4, 'Signal 4');
              xlabel(app.UIAxes4, 'X');
              ylabel(app.UIAxes4, 'Y');
              app.UIAxes4.Position = [113 76 635 158];

              % Create StartButton
              app.StartButton = uibutton(app.UIFigure, 'state');
              app.StartButton.ValueChangedFcn = createCallbackFcn(app, @StartButtonValueChanged, true);
              app.StartButton.Text = 'Start';
              app.StartButton.FontSize = 20;
              app.StartButton.Position = [381 22 100 33];
          end
      end

      methods (Access = public)

          % Construct app
          function app = App1()

              % Create and configure components
              createComponents(app)

              % Register the app with App Designer
              registerApp(app, app.UIFigure)

              if nargout == 0
                  clear app
              end
          end

          % Code that executes before app deletion
          function delete(app)

              % Delete UIFigure when app is deleted
              delete(app.UIFigure)
          end
      end
  end

Code 2 below is the sample appdesigner code where animatedline is not applied to the ui axes, and the animatedline update looks real-time.

% Code 2
classdef App1 < matlab.apps.AppBase

      % Properties that correspond to app components
      properties (Access = public)
          UIFigure     matlab.ui.Figure
          UIAxes1      matlab.ui.control.UIAxes
          UIAxes2      matlab.ui.control.UIAxes
          UIAxes3      matlab.ui.control.UIAxes
          UIAxes4      matlab.ui.control.UIAxes
          StartButton  matlab.ui.control.StateButton
      end

      methods (Access = private)

          % Value changed function: StartButton
          function StartButtonValueChanged(app, event)
              value = app.StartButton.Value;

              % Generate fake data streams
              dataStream1 = rand(6000, 1);
              dataStream2 = rand(6000, 1);
              dataStream3 = rand(6000, 1);
              dataStream4 = rand(6000, 1);

              figure1 = subplot(4,1,1);
              figure2 = subplot(4,1,2);
              figure3 = subplot(4,1,3);
              figure4 = subplot(4,1,4);

              % Set up animated lines
              line1 = animatedline(figure1, 'MaximumNumPoints', 60);
              line2 = animatedline(figure2, 'MaximumNumPoints', 60);
              line3 = animatedline(figure3, 'MaximumNumPoints', 60);
              line4 = animatedline(figure4, 'MaximumNumPoints', 60);

              for i = 1:6000
                  % Set data
                  currentTime = i;

                  addpoints(line1, i, dataStream1(i));
                  addpoints(line2, i, dataStream2(i));
                  addpoints(line3, i, dataStream3(i));
                  addpoints(line4, i, dataStream4(i));

                  drawnow;
              end
          end
      end

      % App initialization and construction
      methods (Access = private)

          % Create UIFigure and components
          function createComponents(app)

              % Create UIFigure
              app.UIFigure = uifigure;
              app.UIFigure.Position = [100 100 860 739];
              app.UIFigure.Name = 'UI Figure';
              setAutoResize(app, app.UIFigure, true)

              % Create UIAxes1
              app.UIAxes1 = uiaxes(app.UIFigure);
              title(app.UIAxes1, 'Signal 1');
              xlabel(app.UIAxes1, 'X');
              ylabel(app.UIAxes1, 'Y');
              app.UIAxes1.Position = [113 553 635 158];

              % Create UIAxes2
              app.UIAxes2 = uiaxes(app.UIFigure);
              title(app.UIAxes2, 'Signal 2');
              xlabel(app.UIAxes2, 'X');
              ylabel(app.UIAxes2, 'Y');
              app.UIAxes2.Position = [113 394 635 158];

              % Create UIAxes3
              app.UIAxes3 = uiaxes(app.UIFigure);
              title(app.UIAxes3, 'Signal 3');
              xlabel(app.UIAxes3, 'X');
              ylabel(app.UIAxes3, 'Y');
              app.UIAxes3.Position = [113 235 635 158];

              % Create UIAxes4
              app.UIAxes4 = uiaxes(app.UIFigure);
              title(app.UIAxes4, 'Signal 4');
              xlabel(app.UIAxes4, 'X');
              ylabel(app.UIAxes4, 'Y');
              app.UIAxes4.Position = [113 76 635 158];

              % Create StartButton
              app.StartButton = uibutton(app.UIFigure, 'state');
              app.StartButton.ValueChangedFcn = createCallbackFcn(app, @StartButtonValueChanged, true);
              app.StartButton.Text = 'Start';
              app.StartButton.FontSize = 20;
              app.StartButton.Position = [381 22 100 33];
          end
      end

      methods (Access = public)

          % Construct app
          function app = App1()

              % Create and configure components
              createComponents(app)

              % Register the app with App Designer
              registerApp(app, app.UIFigure)

              if nargout == 0
                  clear app
              end
          end

          % Code that executes before app deletion
          function delete(app)

              % Delete UIFigure when app is deleted
              delete(app.UIFigure)
          end
      end
  end

Answer 1

[jared ross]

When I had this problem with a project I had the app call a function that updated the graph and everything else in a while loop and it was a lot faster.

This is an example of how I called the function with a plot in the app

 Function_Name (app.UIAxes,app.StopButton);

Function Example

function Function_Name (axes,stop)
       values = 0;
       t = 0;

         while ( (value < 10)&&(stop.Value ~= 1) )

              % Get values to graph

              % Graph
              plot(axes, value, t);
              axis(axes,...); % Can be used to adjust max and min while plotting live data
              drawnow;
         end
end