In this example, we show how MATLAB’s new UIHTML capability enables you to integrate a specialized visualization or infographic into your app to complement MATLAB’s plot types. The example visualization chosen is a “population pyramid”, typically used for showing statistical bins of a population or subpopulation within different age groups.
This example leverages D3.js version 5.9.2.
MathWorks App Designer Team (2021). D3 JS Visualizations in MATLAB App Designer Apps (https://www.mathworks.com/matlabcentral/fileexchange/72866-d3-js-visualizations-in-matlab-app-designer-apps), MATLAB Central File Exchange. Retrieved .
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!Create scripts with code, output, and formatted text in a single executable document.
@Matthew Corner Thank you for reaching out and glad you are finding UIHTML useful.
Regarding the the triggering of DataChangedFcn when you set the the following in JS: htmlComponent.Data.clicked = true. This is expected, as the JS only looks at the top level object being changed and not its internals. Thank you for this feedback, I will forward this to the development team.
The lack of an a mechanism to send and receive events between MATLAB and JS is also known to us.
Enjoying playing around with uihtml so far. The possibilities are exciting. However I have run into a minor annoyance with the way that the communication between javascript and matlab works on data change. See the following code snippet for a click event in javascript.
I had expected that setting a sub element of the Data object would trigger the DataChangedFcn in matlab but that doesn't seem to be the case. Instead I must set to the top level htmlComponent.Data value.
// add click listener
comp.addEventListener("click", function() {
// doesnt trigger DataChangedFcn
htmlC.Data.Clicked = true;
// does trigger DataChangedFcn
data = htmlC.Data;
data.Clicked = true;
htmlC.Data = data;
});
(even this is a workaround for the lack of ability to add Callbacks)
Also, normrnd is part of the stats and machine learning toolbox so I had to modify this example to get it working without that dependency.
Enjoying playing around with uihtml so far. The possibilities are exciting. However I have run into a minor annoyance with the way that the communication between javascript and matlab works on data change. See the following code snippet for a click event in javascript.
I had expected that setting a sub element of the Data object would trigger the DataChangedFcn in matlab but that doesn't seem to be the case. Instead I must set to the top level htmlComponent.Data value.
// add click listener
comp.addEventListener("click", function() {
// doesnt trigger DataChangedFcn
htmlC.Data.Clicked = true;
// does trigger DataChangedFcn
data = htmlC.Data;
data.Clicked = true;
htmlC.Data = data;
});
(even this is a workaround for the lack of ability to add Callbacks)