Introduction

Matlab LogoIn this Matlab GUI tutorial, you will learn how to create and use the Axes component. The Axes component allows you to display graphics, such as graphs and images on your GUI. In this tutorial, we will create two axes on the GUI and plot some simple data onto it. In addition, we will include a reset button to clear the axes and we will also add the standard toolbar to allow the user to zoom, pan, and query the plot.

GUI with two axes and toolbar

This tutorial is written for those with little or no experience creating a Matlab GUI (Graphical User Interface). If you’re new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isan’t too outdated). Let’s get started!

Create the Visual Aspect of the GUI

  1. First, open up Matlab. Go to the command window and type in guide.

    Command Window

  2. You should see the following screen appear. Choose the first option Blank GUI (Default).

    GUI options

  3. Click on axes icon and add two Axes components to the GUI figure. Next, click on pop-up menu icon and add three Pushbutton components onto the GUI figure.

  4. Double click the Axes component to bring up the Property Inspector. Change the Tag property to axes1, which should already be the default name. Additionally, make sure the other Axes component’s Tag property is named axes2.

    Modify axes tag component properties

  5. Next, let’s modify the properties of the Pushbutton components. Double click on one of the Pushbutton components. Change the String property to Plot Axes 1, and the Tag property to plotAxes1_pushbutton, as shown below.

    Modify pushbutton component properties

    Similarly, double click on the next pushbutton and change the String property to Plot Axes 2 and change the Tag property to plotAxes2_pushbutton.

    Finally, double click on the final pushbutton and change the String property to Clear Axes and change the Tag property to clearAxes_pushbutton.

  6. Here’s what your figure should look like after you add the components and modify them.

    What your GUI figure should looke like

  7. Save your GUI wherever you please with your desired filename.

Writing the Code for the GUI

Matlab automatically generates an .m file to go along with the figure that you just put together. The .m file is where we attach the appropriate code to the callback of each component. For the purposes of this tutorial, we are primarily concerned only with the callback functions. You don’t have to worry about any of the other function types.

  1. Open up the .m file that was automatically generated when you saved your GUI. In the Matlab editor, click on the Function Icon icon, which will bring up a list of the functions within the .m file. Select plot1_pushbutton_Callback.

    Function Shortcut

    Add the following code to the function:

    %selects axes1 as the current axes, so that 
%Matlab knows where to plot the data
axes(handles.axes1)
 
%creates a vector from 0 to 10, [0 1 2 3 . . . 10]
x = 0:10;
%creates a vector from 0 to 10, [0 1 2 3 . . . 10]
y = 0:10;
 
%plots the x and y data
plot(x,y);
%adds a title, x-axis description, and y-axis description
title('Axes 1');
xlabel('X data');
ylabel('Y data');
guidata(hObject, handles); %updates the handles

  2. Similarly, we want to put the following code into the plot2_pushbutton_Callback:

    %selects axes2 as the current axes, so that 
%Matlab knows where to plot the data
axes(handles.axes2)
 
%creates a vector from 0 to 10, [0 1 2 3 . . . 10]
x = 0:10;
%creates a vector  [0 1 4 9 . . . 100]
y = x.^2
 
%plots the x and y data
plot(x,y);
%adds a title, x-axis description, and y-axis description
title('Axes 2');
xlabel('X data');
ylabel('Y data');
guidata(hObject, handles); %updates the handles

  3. Next, we need to add some code to the clearPlots_pushbutton_Callback:

    %these two lines of code clears both axes
cla(handles.axes1,'reset')
cla(handles.axes2,'reset')
guidata(hObject, handles); %updates the handles

  4. And finally, we need to add the following line of code to axes_tutorial_OpeningFcn:

    set(hObject,'toolbar','figure');

    This line of code should be placed right before:

    guidata(hObject, handles);

    This line of code effectively adds the standard toolbar to the GUI, allowing the user to zoom, pan, query the plot, and more. The standard toolbar and a brief description of the icons are shown below:

    Figure Toolbar

  5. Save your m-file!

Run and Test the GUI

Now that we’ve completed both the visual and code aspects of the GUI, its time to run the GUI to make sure it works.

  1. From the m-file editor, you can click on the Save and Run Icon icon to save and run the GUI. Alternatively, from the GUIDE editor, you can click on the play button to launch the GUI. The following GUI should appear once you click the icon:

    Axes GUI

  2. Go ahead and try pressing all of the buttons to make sure they work. If everything was done correctly, you should see the following plots. Also, you can use the icons that are within the red box to test out the other functions.

    GUI verified

  3. And that’s it. Those are the basics of using the Axes component. You can explore the other options that the axes has to offer through the Property Inspector.

This is the end of the tutorial.

Source files can be downloaded here.