Highlight a data point on graph using slider

Hello,

I am making an app which plots a graph- i want to include a slider at the bottom of the graph so that when the user drags the slider, it shows the x,y coordinates for the corresponding data points

i have set the limits of the slider to go from 0 to the maximum x value

how could i use the app.Slider.Valuechangingfcn to get a smooth data highlighting?

Thank you

Answer 1

[Cris LaPierre]

My recommendation would be to create you highlight at the intial value of the slider at the same time you plot. Be sure to capture the plot object in a variable.

app.hghlt = plot(app.x(app.x==app.Slider.Value),app.y(app.x==app.Slider.Value));

The in your callback function, just update the XData and YData properties of the object. This is untested. It assumes your slider values can only be values in your x vector, that your x values are strictly increasing or decreasing, and that there are no duplicate values.

app.hghlt.XData = app.x(app.x==app.Slider.Value);
app.hghlt.YData = app.y(app.x==app.Slider.Value);

[Anon]

Hi, I'm not too sure what you mean? This is the code I have currently, and what i intend it to mean:

app.Slider.Limits = [0 max(x)]   %the slider is equal to the x-axis
hold(app.Graph,'on')
XData = app.Slider.Value %takes the slider value as the XData to be displayed
YData = y(x==XData)      %takes the y data when x==Slider as the YData to be displayed
text(app.Graph,x(x==XData),y(x==XData),'%.2f,%.2f',XData,YData)
  %tells the user the X and Y data for that particular point

However when i run the programme, i get an error message saying:

"Error using text

Too many non-property/value arguments."

[Cris LaPierre]

You are trying to use an unsupported syntax for text. It is not able to cast numeric data to strings using format codes. You could use sprintf for that if you want something specific. However, here it might be simplest to use num2str.

text(app.Graph,x(x==XData),y(x==XData),num2str([XData,YData]))

Just an additional comment. If all you want to do is display the X and Y data for a point, why not use datatip?

datatip(target,x,y)

[Anon]

The projectile that i have plotted is done using the comet function- which doesnt work with the datatip as far as i can see

app.Slider.Limits = [0 max(x)]
hold(app.Graph,'on')
XData = app.Slider.Value
YData = y(x==XData)
%X = num2str(XData)
%Y = num2str(YData)
coord = sprintf('%f,%f',XData,YData)
text(app.Graph,x(x==XData),y(x==XData),coord)

With this ^ I am only getting the coordinates for 0,0 - moving the slider seems to have no effect?

[Cris LaPierre]

Most likely reason is that the slider value does not exactly match any value in x. The "==" comparison requires an exact match.

[Anon]

oh yeah of course! is there an 'approximate' function?

[Cris LaPierre]

Not that I'm aware of. The manual way is

[~,ind] = min(abs(x-xdata));
text(app.Graph,x(ind),y(ind),coord)

[Anon]

thank you again- I'm not sure why but the slider is just being completely inactive? I've made sure not to supress the output so that i could see what values are going through it, but there are none?

[Cris LaPierre]

Based on what I can see, I don't know either. Perhaps looking at some of the examples here can help.

[Anon]

hi sorry! ive tried what i can but ive just gone down a rabbit hole with it

for the [~,ind] = min(abs(x-xdata));

i have an error saying about the arrays being different sizes

[Cris LaPierre]

It's hard to be able to tell you exactly what the problem is without seeing your code. Fortunately, you've shared that in your new question.

Now that I can see what is happening, it seems you are a little lost on how apps work. You would benefit by going through the following:

• Getting Started with App Designer page.
• doc page on developing apps.
• Create and Run a Simple App Using App Designer tutorial.

The first thing to keep in mind is variable scope. Callbacks are functions, so a variable you create in one function is not available in another callback. The way to get around this is to add these variables as properties of the app. You can then access them using app.varname. See this page for details on how to do this.

Next, you already have the XData and Ydata of your comet. They are the x and y values you passed as input to comet. What you want is a way to add a marker to the plot that corresponds to the x value selected by the slider. This requires adding a second plot to your axes that is a single point. Use the syntax h = plot(___). When you move your slider, find the closest X value, the corresponding Y value, and update the XData and YData properties of this point.

Another issue I see is your including the '\leftarrow' in your sprintf command. This is an option unique to the text function. You'll need to keep that in as part of the text input. Concatenate your formatted string to it using square brackets: ['\leftarrow' coord]

I assume you want your text location to update with the slider. As it is currently written, it will create a new text box each time. You need to create an initial text annotation using the syntax t = text(___) and the update its position property with the new X and Y values, as well as its string property with these new values.

While these changes get the app to behave as desired, it does not update the plot smoothly. Especially when using comet.

[Anon]

Thank you very much for helping me with this Cris, I've manged to get a value back for the slider value each time i move it however the slider limits are only going from 0-100 (which was the default) despite changing the limits to [0 max(x)] only a few lines before

[Anon]

and thank you very much for linking those documents, i am reading through them now :)

[Cris LaPierre]

Attach you mlapp file using the paperclip icon. There are too many inter-related issues to be able to guide you effectively this way.

[Cris LaPierre]

Ok, maybe that was a bad idea. You've got a lot going on in there. Any changes I make would just get lost. I've created a simplified app that just plots and does the slider. It is consistent with my previous comments and suggestions. Take a look at that, learn how it works and apply that to your app.

[Anon]

that’s amazing, thank you so much you’ve been a great help!

[Anon]

except it wont let me open it...

[Cris LaPierre]

Again, details are more helpful. What is the error message? What version of MATLAB are you using?

[Anon]

sorry ive just been having problem after problem today ha

Version: 9.9.0.1467703 (R2020b)

Error using simpleProjectile
Error: File: simpleProjectile.mlapp Line: 1 Column: 10
Class name and filename must match.

Error in run (line 91)
evalin('caller', strcat(script, ';'));

[Cris LaPierre]

Restart MATLAB.

[Anon]

wonderful, thank you :) this is exactly what i needed

[Anon]

thank you again for taking the time to do this i really appreciate it