SnapMode=ClosestPoint on ScatterPointSeries shows multiple points

[Neil]

Hi,

I have a scatter point series with chart track ball enabled and SnapMode set to ClosestPoint, but with multiple series added to the chart I see a point per series.

 

Each colour in above image is a separate series added from code. The chart itself is in XAML.

                    <telerik:RadCartesianChart Grid.Row="0"   BorderBrush="Transparent" Background="White"  x:Name="radChartView" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" DockPanel.Dock="Top">
                        <telerik:RadCartesianChart.Behaviors>
                            <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False" SnapMode="ClosestPoint" />
                        </telerik:RadCartesianChart.Behaviors>
                        <telerik:RadCartesianChart.TrackBallLineStyle>
                            <Style TargetType="Polyline">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </Style>
                        </telerik:RadCartesianChart.TrackBallLineStyle>

                    </telerik:RadCartesianChart>

 

I've only seen examples of SnapMode=ClosestPoint on LineSeries plots. Should this work on ScatterPointSeries?

Thanks,

Neil

[Dinko | Tech Support Engineer]

Hello Neil,

Thank you for the provided code snippet.

Our RadChartView TrackBall behavior supports ScatterSeries. Looking at the code snippet, the ShowTrackInfo property of the ChartTrackBallBehavior is set to false. This way, you are going to see only the intersection points. Is this behavior intended? Can you share if you want to achieve something different with our trackball functionality of the RadChartView?

Regards,
Dinko
Progress Telerik

[Neil]

Hi Dinko,

With SnapMode=ClosestPoint I'm expecting to only see one point highlighted on the whole chart, rather than one point per series.

Similarly when I enable the tooltip I'm expecting to see a single point's data, rather than a point per series.

Thanks,

Neil

[Dinko | Tech Support Engineer]

Hi Neil,

By default, the SnapMode functionality of the TrackBall will show the closes data points per series. To show only one point which is the closes one, you can subscribe to the TrackInfoUpdated event of the ChartTrackBallBehavior. In the event handler, you can get all closes points from the e.Context.DataPointInfos collection and the closes point from e.Context.ClosestDataPoint property. Using this you can only leave the ClosestDataPoint inside the collection. The following code demonstrates what I have in mind.

private void ChartTrackBallBehavior_TrackInfoUpdated(object sender, TrackBallInfoEventArgs e)
{
    var dataPointInfos = e.Context.DataPointInfos.ToList();
    foreach (DataPointInfo dataPointInfo in dataPointInfos)
    {
        if(dataPointInfo != e.Context.ClosestDataPoint)
        {
            e.Context.DataPointInfos.Remove(dataPointInfo);
        }
    }
}

[Neil]

Thanks Dinko - that's exactly what I was after.

[Neil]

Hi Dinko,

The solution above has worked well, but have now found a related issue. On charts where we have multiple ScatterPointSeries it works as expected, but if we add a ScatterLineSeries, e.Context.ClosestPoint always returns a point on the ScatterLineSeries no matter if points on the ScatterPointSeries are closer - is that known behaviour?

Thanks,

Neil 

[Dilyan Traykov]

Hi Neil,
Indeed, by default, when dealing with a line series with this setup, the closest point is calculated based on the distance between its X value and the X location of the mouse pointer. Unlike the point series, the Y value is not taken into account.
To overcome this, you can create your own custom logic to determine the closest point, like so:

        private void ChartTrackBallBehavior_TrackInfoUpdated(object sender, Telerik.Windows.Controls.ChartView.TrackBallInfoEventArgs e)
        {
            var dataPointInfos = e.Context.DataPointInfos.ToList();
            if (dataPointInfos.Any())
            {
                var closestDataPoint = dataPointInfos.OrderBy(x => GetDistance(x.DataPoint, e.Context.TouchLocation)).First();
                foreach (DataPointInfo dataPointInfo in dataPointInfos)
                {
                    if (dataPointInfo != closestDataPoint)
                    {
                        e.Context.DataPointInfos.Remove(dataPointInfo);
                    }
                }
            }
        }

        private object GetDistance(DataPoint dataPoint, Point touchLocation)
        {
            var center = Center(dataPoint);

            return Math.Sqrt((Math.Pow(center.X - touchLocation.X, 2) + Math.Pow(center.Y - touchLocation.Y, 2)));
        }

        private Point Center(DataPoint dataPoint)
        {
            return new Point(
                dataPoint.LayoutSlot.X + (int)(dataPoint.LayoutSlot.Width / 2),
                dataPoint.LayoutSlot.Y + (int)(dataPoint.LayoutSlot.Height / 2));
        }

Can you please give this a try and let me know if it provides the expected result?