Slider which controls a bar plot

Hello everyone,

i would like to get a slider which controls a bar plot.

so i got this, but instead of the gauge i would like to have a bar plot which is changing while i move the slider.

at the end i need 4 - 5 different bars which are chancing individually depending on different functions. and there is a same variable which is in each functions and this should be the input from the slider.

function sliderchanging
% Create figure window and components

fig = uifigure('Position',[100 100 350 275]);

cg = uigauge(fig,'Position',[100 100 120 120]);

cg.MajorTicks = [0:10:100];
cg.MajorTickLabels = {'0','10','20','30','40','50','60','70','80','90','100'};

sld = uislider(fig,...
               'Position',[100 75 120 3],'ValueChangingFcn',@(sld,event) sliderMoving(event,cg));
           
           
end

% Create ValueChangingFcn callback
function sliderMoving(event,cg)
cg.Value = event.Value;
end

[Adam Danz]

Could you elaborate on the goal? I don't understand how the slider should affect the bar plot.

[Karl Philip Hahne]

The slider should affect the bar graphs. For example, I move the slider from 0 to 50 and the bar goes up from 0 to 50.

The goal is to visaulize costs. I fly with an airplane a detour of 50km,100km,200km (values of the slider) and thereby additional costs arise by higher kerosene consumption, personnel costs, CO2 costs etc.(these should become the bars) I move the slider to 50 km detour, thereby the following costs arise

Answer 1

[Adam Danz]

Here's a demo. The key is to set bh (the bar handle) and initialValues (the initial y-values of the bars) prior to setting the slider callback function.

uif = uifigure(); 
uax = uiaxes(uif,'Position', [20 100 500 300]); 
initialValues = [50 100 150];
bh = bar(uax, initialValues);
grid(uax, 'on')
uis = uislider(uif,'Position',[50 50 150 3],'Value',0, 'Limits', [0,500], 'MajorTicks', 0:100:500, 'MinorTicks', []);
uis.ValueChangedFcn = @(h,~)set(bh, 'YData', initialValues + h.Value); 

[Karl Philip Hahne]

this is nice! thank you very much

[Karl Philip Hahne]

Hi Adam,

I have another question. I have problems understanding the syntax of the ValueChancedFcn and the explanation on the website doesn't help me either. Currently, the bars are all changed by the same value, because the value from the slider is added to each initial value "initialValues + h.Value". I would like to store a formula for each bar and the value of the slider is a variable in each formula.

As an example:

x - Slider value

1st bar:

a=100*(x/100)*€10

2nd bar:

b=(2*100€+4*200€)*x

3rd bar:

c=0.5€*x

Do you have an idea how I can implement this?

Thanks a lot!

[Adam Danz]

The ValuesChangedFcn is quite simple,

uis.ValueChangedFcn = @(h,~)set(bh, 'YData', initialValues + h.Value)

• bh is the handle to the bar plot.
• bh.YData is a 1x3 vector of bar heights for 3 bars
• h.Value is the slider value
• The slider value is merely added to the initial bar height value which is defined before the callback function.

To achieve what you're describing, you need to set YData to the result of your a,b,c equations.

Note that the ValueChangedFcn doesn't have to be set in 1 line as is the case in my answer. You could make it a local function,

uis.ValueChangedFcn = @updateBarsFcn

function updateBarsFcn(h,~)
     ...
end

[Karl Philip Hahne]

%Fenster erzeugen
uif = uifigure();
%Achsen erzeugen im Fenster und neu positionieren
uax = uiaxes(uif,'Position', [20 100 500 300]);
%festlegen des Maximal betrags der y-Achse
ylim(uax,[0 100]);
%Balken benennen
x = categorical({'Small','Medium','Large','Extra Large'});
%Balken sortier
x = reordercats(x,{'Small','Medium','Large','Extra Large'});
%Werte der Balken
y = [5 10 20 50];
%Balken in den erzeugten Achsen plotten mit x und y Werten
bh = bar(uax,x, y);
%erzeugt Raster im Hintergrund
grid(uax, 'on');
%erzeugt den Slider und positioniert ihn
uis = uislider(uif,'Position',[50 50 150 3]);
%erzeugt den Anfangswert des Sliders
uis.Value = 0;
%erzeugt die Limits der Skala
uis.Limits = [0 100];
%setzt die Schritte fest (0-200 in 50er Schritten)
uis.MajorTicks = (0:50:100);
%erzeugt die zwischenstriche
uis.MinorTicks = [0 25 50 75 100];
%Callback vom slider auf die Balken
%uis.ValueChangedFcn = @(h,~,~)set(bh, 'YData', y + h.Value);
uis.ValueChangedFcn = @updateBarsFcn;
function updateBarsFcn(h,~,~)
      set(bh, 'YData', y + h.Value)
 end

so, this is my current code. when i change the ValueChangeFcn in this typ. i get an error:

"Unrecognized function or variable 'bh'.

Error in trial>updateBarsFcn (line 31)

set(bh, 'YData', y + h.Value)

Error using matlab.ui.control.internal.controller.ComponentController/executeUserCallback (line 429)

Error while evaluating Slider PrivateValueChangedFcn."

may you tell me if my syntax is wrong, because i dont know what im doing wrong, i have only copied the set function

[Adam Danz]

Two problems with the callback function.

1) you need to pass the bar handle into the function.

2) the bigger problem is that you're still just adding a constant to all bar heights. You need to apply the a/b/c equations to the ydata.

It's not entirely clear how the original y values are supposed to be used in the conversions. Consider this snippet below a sketch to work from.

bh = bar(___);
uis.ValueChangedFcn = {@updateBarsFcn, bh};
function updateBarsFcn(h,~,bh)
% h is the slider handle, h.Value is the current slide value
% bh: bar handle, 1x3
    y = zeros(size(bh.YData));
    y(1) = 100 * (h.Value/100) * 10;
    y(2) = (2*100+4*200) * h.Value;
    y(3) = 0.5 * h.Value; 
    set(bh, 'YData', y)
 end

[Karl Philip Hahne]

this is really good. i think i can work with this. Thanks first!

Answer 2

[Mario Malic]

Hello,

here's an answer to a very similar question.

https://www.mathworks.com/matlabcentral/answers/733973-adding-slider-to-heatmap#answer_612875

[Karl Philip Hahne]

sorry, i dont get it. how do i implement the blar plot instead of the headmap?

im a freshman

[Mario Malic]

Just a note from the heatmap solution to get you started. Heatmap chart requires a figure or uifigure to plot, whereas bar chart requires axes or uiaxes to plot.

See the documentation for bar and do the first example to start with.

Since this is a homework task, show us what have you done so far so we can help you with it.

[Karl Philip Hahne]

so this is what i have till now.

i have the figure, axes und the slider in the same window but how do i get the bar chart in the same window as well? do i need something like bar(x, fig)??

fig = uifigure;
ax = uiaxes(fig);
x = [1 2 3 4 5]
b=bar(x)
sld = uislider(fig)