data display in app designer

I am trying to display data similar to something as showing in the pic.

initially I was thinking to use a table with the 3 colums as shown but then comes the issue of displaying the compliance and risk level as like a bar graph. How would I display the bar graph in the table or is there some other way to get this done.

Answer 1

[Ishu]

Hi William,

To plot bar graph in App Designer you can make use of UIAxes along with UITable.

You can either plot the selected row from the UITable in the bar graph or you can plot all the rows from UITable.

1) Plotting the selected row.

Use "CellSelectionCallback" of the UITable to plot a bar graph when row is selected.

You can add the following code in "CellSelectionCallback"

function UITableCellSelection(app, event)
    indices = event.Indices;
    if ~isempty(indices)
        selectedRow = indices(1);
        
        compliance = app.UITable.Data{selectedRow, 2};
        risk = app.UITable.Data{selectedRow, 3};
                
        % Plot bar graph
        bar(app.UIAxes, [compliance, risk]);
        app.UIAxes.XTickLabel = {'Compliance', 'Risk'};
    end
end

2) Plotting all rows.

Use "StartupFcn" callback of application to call a function that will plot the bar graph.

Refer to the example code below to plot al rows of UITable.

% In your app's StartupFcn or initialization code
function startupFcn(app)
    % Sample data for the UITable
    data = {
        'Patient 1', 20, 30;
        'Patient 2', 35, 45;
        'Patient 3', 50, 60;
    };
    
    app.UITable.Data = data;
    
    % Plot all rows in a bar chart
    plotAllRowsBarChart(app, data);
end

% Function to plot all rows in a bar chart
function plotAllRowsBarChart(app, data)
    % Extract numeric data
    numData = cell2mat(data(:, 2:end));
    
    
    bar(app.UIAxes, numData);
    
    app.UIAxes.XTickLabel = data(:, 1);
end