Main Content

Display Graphics in App Designer

Displaying graphics in App Designer requires a different workflow than you typically use at the MATLAB® command line. Once you understand this workflow and a few special cases, you will know how to call the functions you need for displaying almost any type of plot.

Call Graphics Functions

Many of the graphics functions in MATLAB (and MATLAB toolboxes) have an argument for specifying the target axes or parent object. This argument is optional in most contexts, but when you call these functions in App Designer, you must specify that argument. The reason is that, in most contexts, MATLAB defaults to using the gcf or gca functions to get the target object for an operation. However, the HandleVisibility property of App Designer figures is set to 'off' by default. This means that gcf does not return an App Designer figure, and gca does not return any axes within an App Designer figure. As a result, omitting the argument for a target axes or parent object can produce unexpected results.

This code shows how to specify the target axes when plotting two lines. The first argument passed to plot and hold is app.UIAxes, which is the default name for the App Designer axes.

plot(app.UIAxes,[1 2 3 4],'-r');
hold(app.UIAxes);
plot(app.UIAxes,[10 9 4 7],'--b');

Similarly, you can specify the target figure by specifying the first argument as app.UIFigure. For example, this code creates an arrow annotation in the App Designer figure.

x = [0.3 0.5];
y = [0.6 0.5];
annotation(app.UIFigure,'arrow',x,y)

Some functions (such as imshow and triplot) use a name-value pair argument to specify the target object. For example, this code shows how to call the imshow function in App Designer.

imshow('peppers.png','Parent',app.UIAxes);
Whether you specify the target object as the first argument or a name-value pair argument depends on the function. See the documentation for the specific function you want to use to determine the appropriate arguments.

The ginput and gtext functions do not have an argument for specifying the target figure. As a result, you must set the HandleVisibility property of the App Designer figure to 'callback' or 'on' before calling these functions. After you call these functions, you can set the HandleVisibility property back to 'off'. For example, this code shows how to define a callback that allows you to identify the coordinates of two points using the ginput function.

function pushButtonCallback(app,event) 
    app.UIFigure.HandleVisibility = 'callback';
    ginput(2)
    app.UIFigure.HandleVisibility = 'off';
end

Some functions do not support automatic resize behavior, including pareto, plotmatrix, and subplot. Before using these functions, set the AutoResizeChildren property of the parent container to 'off'.

app.UIFigure.AutoResizeChildren = 'off';
pareto(app.UIAxes,[10 20 40 40])

Display Plots Using Other Types of Axes

You can create most 2-D and 3-D plots using the App Designer axes (a uiaxes object). Starting in R2018b, you can create additional plots, such as those listed in the following table. Most of these plots require a different type of parent object and additional lines of code in your app. All of them use normalized position units by default.

FunctionsCoding Details
polarplot
polarhistogram
polarscatter
compass

Create the polar axes by calling the polaraxes function. Specify the parent container as the first input argument (for example, app.Panel). Then call the plotting function with the polar axes as the first argument. For example:

theta = 0:0.01:2*pi;
rho = sin(2*theta).*cos(2*theta);
pax = polaraxes(app.Panel);
polarplot(pax,theta,rho)

Or, create a compass plot in a similar way:

M = randn(20,20);
Z = eig(M);
app.Axes = axes(app.Panel);
compass(app.Axes,Z)

subplot

Follow these steps:

  1. Set the AutoResizeChildren property of the parent container to 'off'. Subplots do not support automatic resize behavior. You can set this property in the App Designer Inspector tab of the Component Browser or in your code.

  2. Specify the parent container using the 'Parent' name-value pair argument when you call subplot. Also, specify an output argument to store the axes.

  3. Call the plotting function with the axes as the first input argument.

For example:

app.UIFigure.AutoResizeChildren = 'off';
ax1 = subplot(1,2,1,'Parent',app.UIFigure);
ax2 = subplot(1,2,2,'Parent',app.UIFigure);
plot(ax1,[1 2 3 4])
plot(ax2,[10 9 4 7])

tiledlayout

Create a tiled chart layout in a panel and create axes in it using the nexttile function. Return the axes object from the nexttile function and use it to specify the axes for your charts or plots.

t = tiledlayout(app.Panel,2,1);
[X,Y,Z] = peaks(20)

% Tile 1
ax1 = nexttile(t);
surf(ax1,X,Y,Z)

% Tile 2
ax2 = nexttile(t);
contour(ax2,X,Y,Z)

geobubble
heatmap
parallelplot
scatterhistogram
stackedplot
wordcloud

Specify the parent container when calling these functions (for example, app.UIFigure) .

For example:

h = heatmap(app.UIFigure,rand(10));

geoplot
geoscatter
geodensityplot

Create the geographic axes by calling the geoaxes function. Specify the parent container as the first input argument (for example, app.UIFigure). Then, call the plotting function with the axes as the first input argument. For example:

latSeattle = 47 + 37/60;
lonSeattle = -(122 + 20/60);
gx = geoaxes(app.UIFigure);
geoplot(gx,latSeattle,lonSeattle)

Unsupported Functionality

As of R2020b, some graphics functionality is not supported in App Designer. This table lists the functionality that is relevant to most app building workflows.

CategoryNot Supported
Animation
Retrieving and Saving Data

Instead of the saveas function, use the exportapp function to save the content of an app window. To save plots in an app, use the exportgraphics or copygraphics functions.

Figures created programmatically with uifigure do support the save, load, savefig, and openfig functions.

Utilities

Instead of the print function, use the exportapp function to save the content of an app window. To save plots in an app, use the exportgraphics or copygraphics functions.

Functions not Recommended
Properties
  • Components objects like Table, Menu, Panel, Tab, TabGroup, and ButtonGroup support different properties in App Designer than in apps created with the figure function. For a list of components supported in App Designer and links to their properties pages, see App Building Components.

See Also

|

Related Topics