Plot in app designer

I am trying to plot two graphs in the app designer. The app is supposed to accept values and use them to plot graphs using the function i attcahed to the app designer. Its not plotting anything and i think its because of the axis but i do not know how to fix it.

classdef QuartercarGUI < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                 matlab.ui.Figure
        m1kgEditFieldLabel       matlab.ui.control.Label
        m1kgEditField            matlab.ui.control.NumericEditField
        k1NmEditFieldLabel       matlab.ui.control.Label
        k1NmEditField            matlab.ui.control.NumericEditField
        b1NsmEditFieldLabel      matlab.ui.control.Label
        b1NsmEditField           matlab.ui.control.NumericEditField
        m2kgEditFieldLabel       matlab.ui.control.Label
        m2kgEditField            matlab.ui.control.NumericEditField
        k2NmEditFieldLabel       matlab.ui.control.Label
        k2NmEditField            matlab.ui.control.NumericEditField
        b2NsmEditFieldLabel      matlab.ui.control.Label
        b2NsmEditField           matlab.ui.control.NumericEditField
        WheelandSuspensionLabel  matlab.ui.control.Label
        QuarterCarLabel          matlab.ui.control.Label
        CalculateButton          matlab.ui.control.Button
        rdEditFieldLabel         matlab.ui.control.Label
        rdEditField              matlab.ui.control.EditField
        RoadProfileLabel         matlab.ui.control.Label
        rdprimeEditFieldLabel    matlab.ui.control.Label
        rdprimeEditField         matlab.ui.control.EditField
        UIAxes                   matlab.ui.control.UIAxes
        UIAxes2                  matlab.ui.control.UIAxes
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: CalculateButton
        

my callback function for my calculate button starts here

        function CalculateButtonPushed(app, event)
function quartercar
    
            m1 = app.m1kgEditField.Value;
            m2 = app.m2kgEditField.Value;
            b1 = app.b1NsmEditField.Value;
            b2 = app.b2NsmEditField.Value;
            k1 = app.k1NmEditField.Value;
            k2 = app.k2NmEditField.Value;
            rd = app.rdEditField.Value;
            rdprime = app.rdprimeEditField.Value;


%Initial Conditions 
xone0 = 0; vone0 = 0;
xtwo0 = 0; vtwo0 = 0;

IC = [xone0, vone0, xtwo0, vtwo0];

%Time Span 
t0 = 0; tf = 5;

tspan = [t0,tf];

%sdot = g(t,s) state variable
sdot = @(t,s) ...
    [s(2); 
    (-1/m1)*((k1*(s(1)-s(3))) + (b1*(s(2)-s(4))));
    s(4);
    ((k1*(s(1)-s(3)) + b1*(s(2)-s(4)) -k2*(s(3)-rd(t)) -b2*(s(4)-rdprime(t)))/m2)];

%Numerical Intergration
[time, state_values] = ode45(sdot,tspan,IC);
xone = state_values(:,1);
vone = state_values(:,2);
xtwo = state_values(:,3);
vtwo = state_values(:,4);

%Plots
plot(app.UIAxes,xone)


%plot(app.UIAxes,xtwo)


plot(app.UIAxes2,vone)

%plot(app.UIAxes2,vtwo)


end           
            
        end
    end
    

the function ends here. Some of graphs are supposed to be functions of time but i do not know how to make the UIaxes accept the time values.

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create m1kgEditFieldLabel
            app.m1kgEditFieldLabel = uilabel(app.UIFigure);
            app.m1kgEditFieldLabel.HorizontalAlignment = 'right';
            app.m1kgEditFieldLabel.Position = [35 390 46 22];
            app.m1kgEditFieldLabel.Text = 'm1 (kg)';

            % Create m1kgEditField
            app.m1kgEditField = uieditfield(app.UIFigure, 'numeric');
            app.m1kgEditField.Position = [96 390 100 22];
            app.m1kgEditField.Value = 25;

            % Create k1NmEditFieldLabel
            app.k1NmEditFieldLabel = uilabel(app.UIFigure);
            app.k1NmEditFieldLabel.HorizontalAlignment = 'right';
            app.k1NmEditFieldLabel.Position = [30 352 51 22];
            app.k1NmEditFieldLabel.Text = 'k1 (N/m)';

            % Create k1NmEditField
            app.k1NmEditField = uieditfield(app.UIFigure, 'numeric');
            app.k1NmEditField.Position = [96 352 100 22];
            app.k1NmEditField.Value = 10;

            % Create b1NsmEditFieldLabel
            app.b1NsmEditFieldLabel = uilabel(app.UIFigure);
            app.b1NsmEditFieldLabel.HorizontalAlignment = 'right';
            app.b1NsmEditFieldLabel.Position = [23 319 58 22];
            app.b1NsmEditFieldLabel.Text = 'b1 (Ns/m)';

            % Create b1NsmEditField
            app.b1NsmEditField = uieditfield(app.UIFigure, 'numeric');
            app.b1NsmEditField.Position = [96 319 100 22];
            app.b1NsmEditField.Value = 15;

            % Create m2kgEditFieldLabel
            app.m2kgEditFieldLabel = uilabel(app.UIFigure);
            app.m2kgEditFieldLabel.HorizontalAlignment = 'right';
            app.m2kgEditFieldLabel.Position = [35 255 46 22];
            app.m2kgEditFieldLabel.Text = 'm2 (kg)';

            % Create m2kgEditField
            app.m2kgEditField = uieditfield(app.UIFigure, 'numeric');
            app.m2kgEditField.Position = [96 255 100 22];
            app.m2kgEditField.Value = 30;

            % Create k2NmEditFieldLabel
            app.k2NmEditFieldLabel = uilabel(app.UIFigure);
            app.k2NmEditFieldLabel.HorizontalAlignment = 'right';
            app.k2NmEditFieldLabel.Position = [30 220 51 22];
            app.k2NmEditFieldLabel.Text = 'k2 (N/m)';

            % Create k2NmEditField
            app.k2NmEditField = uieditfield(app.UIFigure, 'numeric');
            app.k2NmEditField.Position = [96 220 100 22];
            app.k2NmEditField.Value = 55;

            % Create b2NsmEditFieldLabel
            app.b2NsmEditFieldLabel = uilabel(app.UIFigure);
            app.b2NsmEditFieldLabel.HorizontalAlignment = 'right';
            app.b2NsmEditFieldLabel.Position = [23 187 58 22];
            app.b2NsmEditFieldLabel.Text = 'b2 (Ns/m)';

            % Create b2NsmEditField
            app.b2NsmEditField = uieditfield(app.UIFigure, 'numeric');
            app.b2NsmEditField.Position = [96 187 100 22];
            app.b2NsmEditField.Value = 12;

            % Create WheelandSuspensionLabel
            app.WheelandSuspensionLabel = uilabel(app.UIFigure);
            app.WheelandSuspensionLabel.Position = [80 284 129 22];
            app.WheelandSuspensionLabel.Text = 'Wheel and Suspension';

            % Create QuarterCarLabel
            app.QuarterCarLabel = uilabel(app.UIFigure);
            app.QuarterCarLabel.Position = [77 420 69 22];
            app.QuarterCarLabel.Text = 'Quarter Car';

            % Create CalculateButton
            app.CalculateButton = uibutton(app.UIFigure, 'push');
            app.CalculateButton.ButtonPushedFcn = createCallbackFcn(app, @CalculateButtonPushed, true);
            app.CalculateButton.Position = [95 50 100 22];
            app.CalculateButton.Text = 'Calculate';

            % Create rdEditFieldLabel
            app.rdEditFieldLabel = uilabel(app.UIFigure);
            app.rdEditFieldLabel.HorizontalAlignment = 'right';
            app.rdEditFieldLabel.Position = [56 130 25 22];
            app.rdEditFieldLabel.Text = 'rd';

            % Create rdEditField
            app.rdEditField = uieditfield(app.UIFigure, 'text');
            app.rdEditField.Position = [96 130 100 22];
            app.rdEditField.Value = '0.15*sin(time)^2';

            % Create RoadProfileLabel
            app.RoadProfileLabel = uilabel(app.UIFigure);
            app.RoadProfileLabel.Position = [110 151 71 22];
            app.RoadProfileLabel.Text = 'Road Profile';

            % Create rdprimeEditFieldLabel
            app.rdprimeEditFieldLabel = uilabel(app.UIFigure);
            app.rdprimeEditFieldLabel.HorizontalAlignment = 'right';
            app.rdprimeEditFieldLabel.Position = [32 92 46 22];
            app.rdprimeEditFieldLabel.Text = 'rdprime';

            % Create rdprimeEditField
            app.rdprimeEditField = uieditfield(app.UIFigure, 'text');
            app.rdprimeEditField.Position = [93 92 100 22];
            app.rdprimeEditField.Value = '0.15*sin(2*time)';

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, 'Displacement vs time')
            xlabel(app.UIAxes, {'time'; ''})
            ylabel(app.UIAxes, 'displacemnt')
            zlabel(app.UIAxes, 'Z')
            app.UIAxes.PlotBoxAspectRatio = [2.2027972027972 1 1];
            app.UIAxes.Position = [269 257 300 185];

            % Create UIAxes2
            app.UIAxes2 = uiaxes(app.UIFigure);
            title(app.UIAxes2, 'Velocity vs time')
            xlabel(app.UIAxes2, 'time')
            ylabel(app.UIAxes2, 'velocity')
            zlabel(app.UIAxes2, 'Z')
            app.UIAxes2.PlotBoxAspectRatio = [1.92638036809816 1 1];
            app.UIAxes2.XTick = [0 1 2 3 4 5 6];
            app.UIAxes2.XTickLabel = {'0'; '1'; '0'; '3'; '4'; '5'; '6'};
            app.UIAxes2.Position = [269 24 300 185];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = QuartercarGUI

            % Create UIFigure and 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

The app looks like this

the data type for my road profile is text. I do not know part of the problem is this

[Mario Malic]

Hi Darron,

All looks great, try this.

%Plots
plot(app.UIAxes,time, xone)
plot(app.UIAxes2, time, vone)

[Darron Muzavazi]

Hi, Mario, thanks. I made the update but still cant generate graphs.

[Mario Malic]

What are the sizes of xone, xtwo, vone, vtwo, and time? Also, show an error message if there's any.

[Darron Muzavazi]

The output for the first graph is supposed to look like this.

The size of xone is the same as vone and its the one shown below

The time span is that listed here

%Time Span 
t0 = 0; tf = 5;
tspan = [t0,tf];

[Mario Malic]

Well, what about time that returns ode45?

I don't have experience in solving ODE's numerically. I can't get this to solve so I can't help with it. However, size of xone,and others should have the same size as time does.

[Darron Muzavazi]

They are the same size as the xone etc. If i run the code separately as a function on its own, it generates the graphs so the size is the same for that time as well. Thanks.

[Mario Malic]

Okay, then attach the app file please.

[Darron Muzavazi]

Ive attached them below

Answer 1

[Mario Malic]

Everything was ok, I messed up with the reversing x and y on the comment above. Actually there was a line displayed in the plot, input arguments (x,y) were reversed, and Y limits were manual, therefore, it couldn't be displayed properly.

[Darron Muzavazi]

Thanks for the help