Rodrigo Cesar
Top achievements
Rank 1
Rank 1
Rodrigo Cesar
asked on 23 Jul 2018, 08:13 PM
How can I get a click event over an annotation label?
And change mouse pointer like this?
5 Answers, 1 is accepted
0
Hello, Rodrigo Cesar,
Detecting when an annotation is clicked is not directly supported by RadChartView. However, you can easily achieve it by calculating the vertical axis value by the mouse position. Here is demonstrated a sample code snippet how to detect when an annotation is clicked:
Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.
I hope this information helps. If you have any additional questions, please let me know.
Regards,
Dess
Progress Telerik
Detecting when an annotation is clicked is not directly supported by RadChartView. However, you can easily achieve it by calculating the vertical axis value by the mouse position. Here is demonstrated a sample code snippet how to detect when an annotation is clicked:
public RadForm1(){ InitializeComponent(); BarSeries barSeries = new BarSeries("Performance", "RepresentativeName"); barSeries.Name = "Q1"; barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley")); barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White")); barSeries.DataPoints.Add(new CategoricalDataPoint(143, "Smith")); barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones")); barSeries.DataPoints.Add(new CategoricalDataPoint(118, "Marshall")); this.radChartView1.Series.Add(barSeries); BarSeries barSeries2 = new BarSeries("Performance", "RepresentativeName"); barSeries2.Name = "Q2"; barSeries2.DataPoints.Add(new CategoricalDataPoint(153, "Harley")); barSeries2.DataPoints.Add(new CategoricalDataPoint(141, "White")); barSeries2.DataPoints.Add(new CategoricalDataPoint(130, "Smith")); barSeries2.DataPoints.Add(new CategoricalDataPoint(88, "Jones")); barSeries2.DataPoints.Add(new CategoricalDataPoint(109, "Marshall")); this.radChartView1.Series.Add(barSeries2); CartesianGridLineAnnotation annotation1 = new CartesianGridLineAnnotation(); annotation1.Axis = this.radChartView1.Axes[1] as CartesianAxis; annotation1.Value = 175; annotation1.Label = "My label"; annotation1.BorderColor = Color.Red; annotation1.BorderDashStyle = DashStyle.Solid; annotation1.BorderWidth = 5; this.radChartView1.Annotations.Add(annotation1); this.radChartView1.MouseDown += radChartView1_MouseDown;}private void radChartView1_MouseDown(object sender, MouseEventArgs e){ Point pt = this.radChartView1.ChartElement.Wrapper.PointFromControl(e.Location); object val = GetVerticalAxisValueFromMouse(e); CartesianGridLineAnnotation annotation1 = this.radChartView1.Annotations[0] as CartesianGridLineAnnotation; if (annotation1 != null) { int annotationValue = (int)annotation1.Value; double delta = 1; Console.WriteLine(val); if (annotationValue==(double)val || annotationValue <= (double)val + delta && annotationValue >= (double)val - delta) { RadMessageBox.Show("Annotation is clicked"); } }}private object GetVerticalAxisValueFromMouse(MouseEventArgs e){ LinearAxis axis = radChartView1.Axes[1] as LinearAxis; IChartView view = (IChartView)axis.View; double delta = axis.ActualRange.Maximum - axis.ActualRange.Minimum; double totalHeight = axis.Model.LayoutSlot.Height; double ratio = 1 - (e.Location.Y - this.radChartView1.Area.View.Viewport.Y - view.PlotOriginY - axis.Model.LayoutSlot.Y) / (totalHeight * view.ZoomHeight); double value = axis.ActualRange.Minimum + delta * ratio; return value;}Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.
I hope this information helps. If you have any additional questions, please let me know.
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Rodrigo Cesar
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2018, 02:59 PM
This code validates click over the annotation line. But I need the click over the annotation label because my annotation line will not be visible.
0
Accepted
Hello, Rodrigo Cesar,
As it was previously explained, this functionality is not supported out of the box and a custom solution was provided to detect the relevant value from the vertical axis considering the mouse location. Since you don't use the annotation line, there is no appropriate event for handling clicking the annotation label. Note that by design annotations are not supposed to handle any user interaction. They are just for indicating some values in the chart.
You can use a simple RadLabel control which exposes Click event required for your custom scenario.
I hope this information helps.
Regards,
Dess
Progress Telerik
As it was previously explained, this functionality is not supported out of the box and a custom solution was provided to detect the relevant value from the vertical axis considering the mouse location. Since you don't use the annotation line, there is no appropriate event for handling clicking the annotation label. Note that by design annotations are not supposed to handle any user interaction. They are just for indicating some values in the chart.
You can use a simple RadLabel control which exposes Click event required for your custom scenario.
I hope this information helps.
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Rodrigo Cesar
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2018, 01:53 PM
Ok. A label will work to me.
But how can I know the minimum and maximum display limits of a DateTimeContinuousAxis when it is zoomed?
0
Hello, Rodrigo Cesar,
Please have a look at the following forum thread and the suggested solution by Hristo how to take into consideration the zoom factor: https://www.telerik.com/forums/obtaining-the-cartesian-grid-line-annotation-value-exact-based-in-mouse-position
It may be suitable for your case. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.
I hope this information helps. If you have any additional questions, please let me know.
Regards,
Dess
Progress Telerik
Please have a look at the following forum thread and the suggested solution by Hristo how to take into consideration the zoom factor: https://www.telerik.com/forums/obtaining-the-cartesian-grid-line-annotation-value-exact-based-in-mouse-position
It may be suitable for your case. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way which suits your requirement best.
I hope this information helps. If you have any additional questions, please let me know.
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.