Get click over annotation label

6 posts, 1 answers
  1. Rodrigo Cesar
    Rodrigo Cesar avatar
    13 posts
    Member since:
    Oct 2014

    Posted 23 Jul 2018 Link to this post

    How can I get a click event over an annotation label?

    And change mouse pointer like this?

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 24 Jul 2018 Link to this post

    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:

    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.  
     
    Regards,
    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.
  3. Rodrigo Cesar
    Rodrigo Cesar avatar
    13 posts
    Member since:
    Oct 2014

    Posted 24 Jul 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    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.
  4. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 25 Jul 2018 Link to this post

    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
    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.
  5. Rodrigo Cesar
    Rodrigo Cesar avatar
    13 posts
    Member since:
    Oct 2014

    Posted 25 Jul 2018 Link to this post

    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?

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3451 posts

    Posted 26 Jul 2018 Link to this post

    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
    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.
Back to Top