To build a data visualization app using MATLAB App Designer

To build a data visualization app using MATLAB App Designer, follow these steps:

Step 1: Launch App Designer

Open MATLAB and type appdesigner in the command window. Create a new app using the “Blank App” template.

Step 2: Design the User Interface

1. Add UI Components:
   • Axes: For displaying plots (named UIAxes by default).
   • Buttons:
     • “Load Data” button (LoadDataButton).
     • “Plot Data” button (PlotDataButton).
   • Drop-Down Menus:
     • X-axis selector (XDropDown).
     • Y-axis selector (YDropDown).
     • Plot type selector (PlotTypeDropDown).
   • Labels: For clarity.
2. Arrange Components:
   • Drag and position components as shown below:
     Copy

     [Load Data Button]  [X: DropDown]  [Y: DropDown]  [Plot Type: DropDown]  [Plot Data Button]
     [UIAxes]

Step 3: Define App Properties

In the Code View, add properties to store data:

properties (Access = private)
    Data table           % Store loaded data
    Variables cell       % Column names from data
end

Step 4: Implement Callbacks

A. Load Data Button Callback

function LoadDataButtonPushed(app, event)
    % Open file dialog
    [filename, pathname] = uigetfile('*.csv');
    if filename == 0
        return; % User canceled
    end
    % Read CSV data
    app.Data = readtable(fullfile(pathname, filename));
    % Extract variable names
    app.Variables = app.Data.Properties.VariableNames;
    % Update dropdowns
    app.XDropDown.Items = app.Variables;
    app.YDropDown.Items = app.Variables;
end

B. Plot Data Button Callback

function PlotDataButtonPushed(app, event)
    % Check if data is loaded
    if isempty(app.Data)
        uialert(app.UIFigure, 'Load data first!', 'Error');
        return;
    end
    % Get selected options
    xVar = app.XDropDown.Value;
    yVar = app.YDropDown.Value;
    plotType = app.PlotTypeDropDown.Value;
    % Generate plot
    cla(app.UIAxes);
    switch plotType
        case 'Line'
            plot(app.UIAxes, app.Data.(xVar), app.Data.(yVar));
        case 'Scatter'
            scatter(app.UIAxes, app.Data.(xVar), app.Data.(yVar));
        case 'Bar'
            bar(app.UIAxes, app.Data.(xVar), app.Data.(yVar));
    end
    xlabel(app.UIAxes, xVar);
    ylabel(app.UIAxes, yVar);
end

Step 5: Configure Drop-Down Menus

• Set PlotTypeDropDown items to {'Line', 'Scatter', 'Bar'} in the Design View.

Step 6: Test the App

1. Run the App: Click “Run” (green arrow) in App Designer.
2. Load Data: Click “Load Data” and select a CSV file (example below).
3. Select Variables: Choose X/Y variables and plot type.
4. Plot: Click “Plot Data”.

Example CSV Data (sample.csv):

Time,Voltage
0,1.2
1,3.4
2,5.6
3,7.8

Key Considerations:

1. Error Handling: Add checks for non-numeric data or empty selections.
2. Enhancements:
   • Add 3D plots or histograms.
   • Include data filtering/preprocessing.
   • Export plots as images.

Final Code Structure:

• App Designer File: Save as DataVizApp.mlapp.
• CSV Data: Ensure columns are numeric for plotting.

This app provides a basic framework for data visualization, which you can extend based on specific needs