Update bar chart UIAxes from EditField value without deleting older plot

Hi. I am building an app where whenever I enter value in EditField it automatically plot a bar chart in UIAxes.

I manage to do that. However, I would like to continously update the bar chart wehenever new value enter into the EditField without deleting the older plot (bar chart).

Appreciate your help on this matter.

[Cris LaPierre]

Does it add a new bar to the chart every time the user enters another number in the edit field? Does it just adjust the height of a single bar?

[FEH]

Yes. It supposely add a new bar to the chart. So basically with the code below, I managed to plot the first group of bar. Then, I will enter new value in EditField which then will calculate the allowable weight and actual weight and plot in the chart next to the first group.

This is the code I write for a single bar.

X = categorical({'Allowable Weight';'Actual Weight'});

X = reordercats(X,{'Allowable Weight','Actual Weight'});

Y = [app.TotalAllowableWeighttonEditField.Value;app.ActualTotalWeighttonEditField.Value];

bar(app.UIAxes,X, Y,'grouped','FaceColor','flat')

[Cris LaPierre]

So the first time adds the purple bars, and the second time adds the maroon ones?

Is the image from your app? If so, that was created using bar3, but the sample code you shared uses bar. It would be helpful if you could share your actual code.

[FEH]

Sorry. The image is output if done in Excel. If I run the code above, this is the output

This is for one set of value enter in EditField. I have a CALCULATE button to calculate both outputs and concurently plot the bar chart.

[Cris LaPierre]

MATLAB automatically adjusts the width of the bars as the number of bars increases. Does that matter? Do you know how many bars will be in each group a priori?

[FEH]

Doesn't matter with the width. Actually there will be 2 bars in each group (1 is allowable and another 1 is actual). And these 2 bars are grouped by their locations. If you see the bar chart from Excel I shared previous post, the purple is allowable and the red is actual for location 17 to 72 (I have additional questions on this on how can I display it like in Excel). Following next is another group bar chart for another location. And this will be continue depends on how many locations user enter.

[Walter Roberson]

Use hold on ? Or on App Designer

hold(app.HANDLE_OF_AXES, 'on')

[FEH]

@Walter Roberson I have tried previously, but its not working. It still plotting new bar without maintaining the older bar chart.

[Walter Roberson]

I suggest you test again.

ax = gca;   %but use app.HANDLE_OF_AXES in your real code
bar(ax, 1, 5)
hold(ax, 'on')
bar(ax, 2, 3)
bar(ax, 3, -1)
bar(ax, 4, 2)
hold(ax, 'off')

[Simon Chan]

What is the content you entered in EditField? And could you show the callback of the CALCULATE button?

[FEH]

my code is something like this; The content is a numeric and for frame is text.

function CalculateButtonPushed(app, event)

FrameNo = app.FrameEditField.Value;

ActualTotalWeight = app.ActualTotalWeightEdittField.Value;

TotalAllowableWeight = [(0.7*ActualTotalWeight)/200+(0.3*ActualTotalWeight)/120];

app.AllowableWeightEditField.Value = TotalAllowableWeight;

X = categorical({'Allowable Weight';'Actual Weight'});

X = reordercats(X,{'Allowable Weight','Actual Weight'});

Y = [app.TotalAllowableWeighttonEditField.Value;app.ActualTotalWeighttonEditField.Value];

hold(app.UIAxes, 'on')

bar(app.UIAxes,X, Y,'grouped','FaceColor','flat');

hold(app.UIAxes, 'off')

end

[FEH]

@Walter Roberson I understand. But the X and Y value of the bar chart is coming from EditField. The problem is whenever I enter new set of X and Y value, the code rewrite the whole plot.

[Simon Chan]

The following may be a workaround for you, noticed that someone may have a better solution.

When you define the UIAxes, set its user data to an empty array

set(app.UIAxes,'UserData',[]);

When you enter a new EditField, the UserData will be updated.

In this case, it simply overwrite the previous plot with a new plot and hence no need to use hold on and hold off.

However, if you use the same axis for a completely new plot, you need to set the UserData of the UIAxes to [] somewhere otherwise the old data will not be clear.

Y = [app.TotalAllowableWeighttonEditField.Value;app.ActualTotalWeighttonEditField.Value];
app.UIAxes.UserData = [app.UIAxes.UserData;Y'];
bar(app.UIAxes,X, app.UIAxes.UserData,'grouped','FaceColor','flat');

[FEH]

@Simon Chan Its working!!! Thank you so much!

But do you have any idea how can I make the Xlabel following the new frame no enter in the edit field?

E.g. first set of EditField, the frame no editfield is 0 to 17. Next frame is 17 to 72.

Answer 1

[Cris LaPierre]

The way I would approach this in App Designer is to indeed recreate the entire plot each time. I would create an app property to capture the edit field values. Everytime a new value gets added to the edit field, it gets appended to this array.

Then when you plot the data in the bar graph, plot all the values, not just the new ones. The important thing is that your X values indicate the group(s) correctly. The first time, your X value is 1, the second time it is [1 2], etc. You can update the xticklabels to be what you want, but you haven't shared how you determine what they are, so for now, I use group number.

    properties (Access = private)
        Y
    end


    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: PlotButton
        function PlotButtonPushed(app, event)
            app.Y = [app.Y; app.TotalAllowableWeighttonEditField.Value, app.ActualTotalWeighttonEditField.Value];
            bar(app.UIAxes,1:size(app.Y,1), app.Y,'grouped','FaceColor','flat');
            legend(app.UIAxes,"Allowance","Actual")
        end
    end

You can add bar height labels by following this example: https://www.mathworks.com/help/matlab/ref/bar.html#mw_735ee38d-9d9f-40cd-b02a-8266af7184d9

[FEH]

@Cris LaPierre I have tried the code and its work!

As for the Xticklabel, it is actually an input from editfield (text) call Frame (example Frame 17 to 25, Frame 25 to 30 and etc.). Do you have any idea how I can plot the xticklabel following different text?

[Cris LaPierre]

Take a similar approach. Create a property X, and each time you plot, append the new label to X.

Then add the following after the legend command

xticklabels(app.UIAxes,app.X)

[FEH]

Thank you so much @Cris LaPierre. I managed to get all output that I need with you great help!

[FEH]

Dear @Cris LaPierre, sorry to ask again.

I have write a code as you said.

app.Y = [app.Y; app.TotalAllowableWeighttonEditField.Value, app.ActualTotalWeighttonEditField.Value];

app.X = [app.X; app.FrameEditField.Value];

bar(app.UIAxes, app.Y,'grouped','FaceColor','flat');

legend(app.UIAxes,"Allowance","Actual")

xticklabels(app.UIAxes,app.X)

However, when I try to plot the bar more than 3 times, the error "Dimensions of arrays being concatenated are not consistent" appear at line app.X = [app.X; app.FrameEditField.Value];.

[Cris LaPierre]

That error has to do with your input values. Please share what each edit field value is when you get this error.

I suspect that is because your X values are char arrays. They need to be strings to avoid this error. Update this line of code to the following:

app.X = [app.X; string(app.LabelEditField.Value)];