Get chart coordinates for mouse position

3 posts, 1 answers
  1. Peter Van Dender
    Peter Van Dender avatar
    8 posts
    Member since:
    Jun 2009

    Posted 29 Apr 2011 Link to this post

    Hi,

    I have to create a Silverlight client, and one of the key requirements is to show the exact X and Y chart-coordinates of the cursor when it's hovering above a chart.

    I searched the forum for this, but only found answers saying this isn't possible yet. (like in thread http://www.telerik.com/community/forums/silverlight/chart/coordinates-within-radchart.aspx)

    Is this still the case in version 2011 Q1?

    I tried using this code, but the chartarea also includes the drawing space for the axis and labels, so the calculation is incorrect.

    I think the problem would be solved if the plotarea was accessible, so I could get the position relative to it.
    Like so: var position = e.GetPosition(ChartArea.PlotArea);

    private void OnChartMouseMove(object sender, MouseEventArgs e)
            {
                var position = e.GetPosition(ChartArea);
      
                var pctY = 1 - (position.Y / ChartArea.ActualHeight);
                var pctX = position.X / ChartArea.ActualWidth;
      
                var x = ChartArea.AxisX.MinValue * (1 - pctX) + ChartArea.AxisX.MaxValue * pctX;
                var y = ChartArea.AxisY.MinValue * (1 - pctY) + ChartArea.AxisY.MaxValue * pctY;
      
                X.Text = x.ToString("f2");
                Y.Text = y.ToString("f2");
            }

     


    kind regards,

    Peter
  2. Answer
    Missing user
    Missing user avatar

    Posted 04 May 2011 Link to this post

    Hi Peter,

    You can get the PlotArea in the ChartArea.Loaded event by the extension method ChildrenOfType<ClipPanel>(). In order to use this extension, you need to include namespace reference to Telerik.Windows.Controls. After that you can attach MouseEnter and MouseLeave handlers to the PlotArea. For example:
    private void ChartArea_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        Panel plotArea =
            this.radChart.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault() as Panel;
        if (plotArea != null)
        {
            plotArea.MouseEnter += content_MouseEnter;
            plotArea.MouseLeave += content_MouseLeave;
        }
    }

    In the Mouse events you can get the physical coordinates of the mouse according to the PlotArea. You can also convert these physical units to data units by the Axis exposed method ConvertPhysicalUnitsToData(physicalUnit). For example:
    public void content_MouseEnter(object sender, MouseEventArgs e)
    {
        Panel plotArea = sender as Panel;
        if (plotArea != null)
        {
            Point physicalPosition = e.GetPosition(plotArea);
     
            ChartArea chartArea = this.radChart.DefaultView.ChartArea;
            double x = chartArea.AxisX.ConvertPhysicalUnitsToData(physicalPosition.X);
            double y = chartArea.AxisY.ConvertPhysicalUnitsToData(physicalPosition.Y);
        }
    }

    I hope this helps.

    Regards,
    Polina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Peter Van Dender
    Peter Van Dender avatar
    8 posts
    Member since:
    Jun 2009

    Posted 22 Jun 2011 Link to this post

    Hi Polina,

    Finally had some time to test this (I was working on another project for a while), and it works fine.
    Thanks!

    Kind regards,

    Peter
Back to Top