Dash MATLAB Example: Graph with DataTable and Dropdown

Dash R, MATLAB, Julia Dash for MATLAB®
1

New to Dash MATLAB®? See:

Follow this link to see more examples and learn how to use Dash for MATLAB®!

We encorage you to ask any questions you may have about Dash for MATLAB®. We are here to help! You can also share your ideas with the community.

In this example you are going to make an app consisting of a Dropdown, a DataTable and a Graph. The components are linked to each other. The graph will show the data present in the table, while the dropdown chooses between different types of plots (Line, Scatter and Bar in this case).

The app will look like this:

graphDatatableDropdown

The dropdown can be done with a uidropdown component. For the table we use a uitable component, and the data is initialized as an array of x values between 1 and 20, and random values for the y axis. The initial graph will be an empty axes which will be updated via a callback function.

Make a new script called tableGraphApp.m with the following code:

terminate(pyenv);
clearvars;

uiFigure = uifigure('visible', 'off');

% Dropdown (bar, scatter, line, etc)
dropdown = uidropdown(uiFigure,...
    'Items', {'Line'; 'Scatter'; 'Bar'},...
    'Value', 'Scatter');
uiDropdown = ui2dash(dropdown, 'my-dropdown');
myDropdownDiv = Html('Div', {uiDropdown, 'style', struct(...
    'width', '25%', 'padding', 10)});

% Data
data = table;

a = 50;
b = 100;
N = 20;
data.x = (1:1:N)';
data.y = round((b-a).*rand(N,1) + a, 2);

% DataTable
dataTable = uitable(uiFigure, 'ColumnName', data.Properties.VariableNames,...
    'Data', data);

% Define struct which stores uitable properties like styling
dataTable.UserData = struct(...
    'editable', true,...
    'style_data', struct(...
        'width', '100px',...
        'maxWidth', '100px',...
        'minWidth', '100px',...
        'backgroundColor', 'rgb(50, 50, 50)',...
        'color', 'white'),...
    'style_cell_conditional', {{struct(...
        'if', struct('column_id', 'x'),...
        'textAlign', 'left')}},...
    'style_header', struct(...
        'fontWeight', 'bold',...
        'backgroundColor', 'rgb(30, 30, 30)'),...
    'fill_width', false,...
    'style_as_list_view', true);

myTable = ui2dash(dataTable, 'my-table');
myTableDiv = Html('Div', {myTable, 'style', struct(...
    'float', 'left', 'margin', 'auto', 'padding', 10)});

% Initial Plot
ax = axes('Tag', 'my-plot');
graph = ui2dash(ax);
myGraphDiv = Html('Div', {graph, 'style', struct(...
    'float', 'left', 'margin', 'auto', 'padding', 10)});

components = {myDropdownDiv, myTableDiv, myGraphDiv};

% Define the callbacks
args = {...
    argsOut('my-plot', 'figure'),...
    argsIn('my-table','data'),...
    argsIn('my-dropdown', 'value')};  
handle = 'updateGraph'; % Callback function

callbackDat = {args, handle};

% Run the app
startDash(components, 8057, callbackDat, 'SOLAR');

The DataTable has many defined properties. For more details, check the official documentation for DataTable.

Another thing we are doing here is to wrap the components in Html Divs. Doing this makes it easier to style the app by giving styling like padding.

For the callback we need two inputs: the data from the table, and the current value from the dropdown. The output will be the graph.

Make a new function called updateGraph.m with the following code:

function plotlyFig = updateGraph(tableData, dropdownValue)
    n = length(tableData);
    x = zeros(1,n);
    y = zeros(1,n);
    
    for i=1:n           
        if ~isnumeric(tableData{i}.x)
            x(i) = str2double(tableData{i}.x);
        else
            x(i) = tableData{i}.x;
        end
        
        if ~isnumeric(tableData{i}.y)
            y(i) = str2double(tableData{i}.y);
        else
            y(i) = tableData{i}.y;
        end
    end

    close all;
    switch dropdownValue % {'Line'; 'Scatter'; 'Bar'}
        case 'Line'
            plot(x,y, 'LineWidth', 1.5);
        case 'Scatter'
            scatter(x, y, 80, 'filled')
        case 'Bar'
            bar(y)
    end
    xlabel(gca, 'x', 'FontSize', 16);
    ylabel(gca, 'y', 'FontSize', 16);
    title(strcat(dropdownValue, ' Plot'), 'FontSize', 20);

    fig = fig2plotly(gcf, 'offline', true, 'open', false, 'Visible', false);
    addtheme(fig, 'plotly_dark');
    
    plotlyFig1 = {struct('data', {fig.('data')}, 'layout', fig.('layout'))};
    plotlyFig = char(jsonencode(plotlyFig1));
end

That’s it! You can try to add another type of plot, change the stylings, etc. You can even try to add a third column to the DataTable (z) and make 3D plots. Have fun!