Dash MATLAB Quickstart. Part III: Layout with bar graph

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 we are going to make another simple Dash App consisting of a title, a subtitle and an interactive bar graph.

If everything goes well, your App should look like this:

layoutBarPlot

Run the following code in MATLAB®:

terminate(pyenv);
clearvars; % Removes all variables from the currently active workspace.

% Title
title = uilabel('Text', 'Hello Dash',...
    'FontSize', 50, 'FontWeight', 'bold', 'FontColor', 'white');
myTitle = ui2dash(title, 'title');

subtitle = uilabel(...
    'Text', 'Dash: A web application framework for your data.',...
    'FontSize', 16, 'FontColor', 'white');
mySubtitle = ui2dash(subtitle, 'subtitle');

% Figure
fruit = categorical({'Apples', 'Oranges', 'Bananas'});
amount = [4 2 3; 1 4 7; 2 5 1];
city = {'SF'; 'Montreal'; 'Bs As'};

ax = axes();

barChart = bar(ax, fruit, amount);

xlabel(ax,'Fruit', 'FontSize', 16);
ylabel(ax,'Amount', 'FontSize', 16);
legend(ax, city);
ax.UserData = struct('theme', 'seaborn');

myPlot = ui2dash(ax, 'my-plot');

components = {myTitle, mySubtitle, myPlot};

% Run the app.
startDash(components, 8057, [], 'SOLAR');

After running the code, you will see this message in the Command Window:

Dash is running on http://127.0.0.1:8057/

  • Serving Flask app ‘main’ (lazy loading)

  • Environment: production

    WARNING: This is a development server. Do not use it in a production deployment.

    Use a production WSGI server instead.

  • Debug mode: on

Open a new web browser and visit http://127.0.0.1:8057/. You should be able to see the app running!

The title and subtitle in this example are made using uilabel. uilabel can have stylings like FontSize and FontWeight.

For the bar graph we first define our axes and then define our bar in those axes. We can also set a theme with UserData. For more details about themes for plotly graphs, see this amazing post: Amazing addtheme functionality!

At the end we use the startDash function passing components as an argument, which contains all the elements of the app.

Dash Apps are interactive. For this example, if you place your cursor over one of the bars, the corresponding information appears.

The legend placed to the right of the plot allows you to filter data. Click on Montreal to remove that data. You will end up with a plot with only the SF and Bs As data.

As you can see, making a Dash App is as easy as defining each dash element and running the app with this set of components as an argument.

You can try to change the color of one of the texts (using FontColor) and include more information (maybe add a new city?) in the bar graph to see the changes. Have fun!