How to draw an uncertain number of sub-images in one coordinate in app designer?

I can use matlab script to draw VMD decomposition diagram, but I don't know how to draw such a diagram in one coordinate in app designer? Below is the code in my matlab script and the picture I need to draw. Thank you very much for your time.

[m,n]=size(u);

figure

subplot(m+1,1,1);

plot(DATA.data,'k');grid on;

title('Original data');

for i = 1:m

subplot(m+1,1,i+1);

plot(u(i,:),'k');

title(['Signal',num2str(i-1),':']);

end

[Benjamin Kraus]

Can you clarify what you mean by "one coordinate" in the sentence "I don't know how to draw such a diagram in one coordinate in app designer"?

Answer 1

[Benjamin Kraus]

I'm not sure what you mean by "one coordinate", but the way I would create the diagram above in App Designer would be:

1. When designing your app, drag and drop a panel into the location in your app in which you want to draw the diagram.
2. Within your code (either your startup function or any other callback of your app), create a tiledlayout with a vertical layout.
3. Add as many axes as you want to the layout using the nexttile command and plot into those axes.

For example, assuming you have a handle to your panel named app.UIPanel:

% This code is written automatically when you drag and drop a panel into your app.
app.UIPanel = uipanel;

% This code needs to be added to a callback function of your app.
tcl = tiledlayout(app.UIPanel, 'vertical');

% This code creates a number of different axes and plots into them.
m = 5;
for i = 1:m
    ax = nexttile(tcl);
    plot(ax, 1:10, sin(1:10),'k');
    title(ax, ['Signal ',num2str(i-1)]);
end

[Xiangfeng]

Thank you. I tried to write a code according to your answer, but there is no function in the axis, only the name (the code and picture are shown below). I wrote one according to my own understanding, and there is a function in the axis, but the scaling is not appropriate (the code and picture are shown below).

My mind

[Benjamin Kraus]

@Xiangfeng: I think the difference between your code and my code is that it looks like subplot is not making enough room for the titles, so you aren't seeing any titles. tiledlayout is making room for the titles, but perhaps too much room, which is why the axes are so short.

One option is to make your panel bigger, but I'll assume that isn't an option due to space constraints in your app.

There are a few things you can do to compensate, as demonstrated by the code below, which shows a few options. You can do all the options, or just some of them.

% This code is written automatically when you drag and drop a panel into your app.
app.UIPanel = uipanel;

% This code needs to be added to a callback function of your app.
tcl = tiledlayout(app.UIPanel, 'vertical');

% Option 1: Decrease the space between axes (the TileSpacing) or the space
% around the layout (the Padding).
tcl.TileSpacing = 'tight';
tcl.Padding = 'tight';

m = 5;
for i = 1:m
    ax = nexttile(tcl);
    
    % Option 2: Decrease the font size on the axes.
    ax.FontSize = 8;
    
    plot(ax, 1:10, sin(1:10),'k');
    
    % Option 3: Remove x-tick labels from all but the last axes.
    if i < m
        xticklabels(ax,[])
    end
    
    % Option 4: Decrease the font size on the title.
    title(ax, ['Signal ',num2str(i-1)],'FontSize',9);
end

[Xiangfeng]

I tried to delete the extra X -axis, but there was an error.

[Benjamin Kraus]

@Xiangfeng: As the error states, that indicates that your axes (stored in the variable ax) has been deleted.

Based on the code I can see, I suspect the issue is that your calls to subplot are deleting axes.

The subplot command will delete any axes that overlap with the axes you are trying to create. You are calling subplot in a loop, and appending new values to a vector of axes handles stored in the variable ax. You are also calling subplot twice each loop. My guess is that a later call to subplot is deleting an axes created in an earlier call to subplot, so that when you call xticklabels one of the elements in the vector has been deleted.

I suspect the first fix you want to apply is to index into ax when you call xticklabels:

xticklabels(ax(i+1), [])

[Xiangfeng]

Thank you. It works, but the distance between the picture and the picture is too large. Is there any way to make them tightly arranged and make the maximum coordinates of the X -axis equal to the number of array?

Answer 2

[Image Analyst]

Perhaps you want stackedplot.

help stackedplot

 stackedplot  Stacked plot
    STACKEDPLOT(T) plots the contents of a table or timetable in a stacked
    plot. A stacked plot consists of multiple axes stacked vertically,
    sharing the same x-axis. Each table variable is plotted in a separate y-axis.
    If T is a table, each variable is plotted against the row indices. If T
    is a timetable, each variable is plotted against the row times. STACKEDPLOT
    plots all numeric, logical, categorical, datetime, and duration variables,
    and ignores all other variables.
 
    STACKEDPLOT(T1,...,TN) OR STACKEDPLOT({T1,...,TN}) plots the contents of
    multiple tables or timetables in a stacked plot. If T1, ..., TN are tables,
    each variable is plotted against the row indices. If T1, ..., TN are
    timetables, each variable is plotted against the row times.
 
    STACKEDPLOT(T,VARS) specifies which table or timetable variables to plot.
    VARS can be a string array, a cell array of character vectors, an integer
    vector, or a logical vector. VARS can also be a cell array of string arrays
    or a nested cell array of character vectors, where all variables in a cell
    are plotted in the same axes. For example, {"A", ["B" "C"]} plots variable
    A in the first axes, and variables B and C in the second axes.
 
    STACKEDPLOT(T1,...,TN,VARS) specifies which table or timetable variables to
    plot. VARS can be a string array or a cell array of character vectors. VARS
    can also be a cell array of string arrays or a nested cell array of
    character vectors, where all variables in a cell are plotted in the same
    axes.
 
    STACKEDPLOT(X,Y), where X is a vector and Y a matrix, plots each column
    in Y against X.
 
    STACKEDPLOT(Y) plots each column in Y against its row indices.
 
    STACKEDPLOT(__,LINESPEC) sets the line style, marker symbol, and color.
 
    STACKEDPLOT(__,'XVariable',XVAR) specifies the table variable to use as the
    X variable. This syntax is valid only when plotting one or more tables, and
    not when plotting one or more timetables. When plotting multiple tables,
    XVAR can also be a string array or cell array of character vectors
    specifying the X variable for each table.
 
    STACKEDPLOT(__,'CombineMatchingNames',false) plots variables from different
    inputs but with the same names in different axes. This syntax only affects
    the chart when the inputs are multiple tables or multiple timetables.
 
    STACKEDPLOT(__,NAME,VALUE) specifies additional options for the stacked
    plot using one or more name-value pair arguments. Specify the options
    after all the other input arguments.
 
    STACKEDPLOT(PARENT,__) creates the stacked plot in the figure, panel, or
    tab specified by PARENT.
 
    s = STACKEDPLOT(__) also returns a StackedLineChart object. Use s to
    inspect and adjust properties of the stacked plot.
 
    Example - Plot a timetable
    --------------------------
    Time = datetime(["2015-12-18 08:03:05";"2015-12-18 10:03:17";"2015-12-18 12:03:13"]);
    Temp = [37.3;39.1;42.3];
    Pressure = [30.1;30.03;29.9];
    WindSpeed = [13.4;6.5;7.3];
    TT = timetable(Time,Temp,Pressure,WindSpeed);
    stackedplot(TT);
 
    Example - Plot multiple timetables
    ----------------------------------
    x = linspace(0,2*pi,15)';
    y1 = sin(x);
    y2 = cos(2*x);
    TT1 = timetable(hours(x),y1,y2);
 
    x = linspace(pi,2.5*pi,30)';
    y1 = cos(x);
    y3 = sin(2*x);
    TT2 = timetable(hours(x),y1,y3);
 
    stackedplot(TT1,TT2);
 
 
    See also heatmap, bubblechart, plot, stairs, scatter.

    Documentation for stackedplot
       doc stackedplot