Updating uidropdown items from table variables when button is pressed to plot a graph

Hi, I've gotten stuck trying to make a uifigure to plot a graph with uidropdown value changes.

The button runs a script that outputs a table with nested tables into the workspace. E.g., the table, tbl, has two variables(columns), component_A and component_B, and under each of them they have a 3-column table with variables X_disp, Y_disp, Z_disp (These table variables vary depending on the data set).

After the button is pressed, I want Drop Down 1a and 2a to contain the items component_A and component_B. Then once those are populated by the user, I want Drop Down 1b and 2b to contain the items X_disp, Y_disp, Z_disp.

Therefore, if Drop Down 1a has value component_A, Drop Down 1b has X_disp, Drop Down 2a has value component_B, Drop Down 2b has value Y_disp, the axes outputs

plot(tbl.component_A.X_disp, tbl.component_B.Y_disp)

Hopefully that made sense, is there a way to do this, or is this a bad idea/there is a better way to implement this using a structure array rather than a table?

Any help is greatly appreciated.

Answer 1

[Avni Agrawal]

Hi,

I understand that you want to update a graph whenever the value of a dropdown changes. To achieve this, I've included a 'buttonPushed'callback function to initialize the dropdown items. Here's the code for the 'buttonPushed'callback function:

% Button pushed function: Button
function ButtonPushed(app, event)
    app.DropDown1a.Items = {'component_A', 'component_B'};
    app.DropDown2a.Items = {'component_A', 'component_B'};
    app.DropDown1b.Items = {'X_disp', 'Y_disp', 'Z_disp'};
    app.DropDown2b.Items = {'X_disp', 'Y_disp', 'Z_disp'};
end

Next, I've created a function ‘updatePlot’ to check if all four dropdowns have values and update the plot accordingly. Here's the function:

methods (Access = public)
    
    function results = updatePlot(app)
        app.nestedTable = table(app.T1, app.T2, 'VariableNames', {'component_A', 'component_B'});
        % if all four dropdown have some value then only plot:
        if all([app.DropDown1a.Value, app.DropDown1b.Value, app.DropDown2a.Value, app.DropDown2b.Value])
            results = plot(app.UIAxes, app.nestedTable{:, app.DropDown1a.Value}{:,app.DropDown1b.Value}, app.nestedTable{:, app.DropDown2a.Value}{:,app.DropDown2b.Value}, '');
            xlabel(app.UIAxes, app.DropDown1b.Value);
            ylabel(app.UIAxes, app.DropDown2b.Value);

        end
    end
end

To update the plot whenever the value changes in the dropdown, you can add the value changed callback i.e ‘DropDown1aValueChanged’ for each dropdown and call ‘app.updatePlot()’inside it.

% Value changed function: DropDown1a
        function DropDown1aValueChanged(app, event)
            app.updatePlot();
        end

        % Value changed function: DropDown2a
        function DropDown2aValueChanged(app, event)
            app.updatePlot();            
        end

        % Value changed function: DropDown1b
        function DropDown1bValueChanged(app, event)
            app.updatePlot();
        end

        % Value changed function: DropDown2b
        function DropDown2bValueChanged(app, event)
            app.updatePlot();            
        end

Please run the attached file and check the results.

I hope this helps.