Edit this page

TrackBall

Along with tooltip and pan/zoom behaviors, RadChartView provides a trackball behavior through the ChartTrackballBehavior class. This behavior can display a vertical line across the chart plot area and it can display little visual indicators (circles by default) at points where the trackball line crosses the visualization of a series object. For example, when the trackball line crosses a line series line segment, a small circle is drawn highlighting the value of the series at this point.

Rad Chart View-chart behaviors trackball

The trackball behavior can also display a small popup, similar to the tooltip, in order to provide more detailed information about the closest points to the trackball line's cross section, as can be seen in the screenshot above.

The ChartTrackballBehavior exposes three properties and an event. These properties are ShowTrackInfo, ShowIntersectionPoints, SnapMode and the event is called TrackInfoUpdated. ShowTrackInfo and ShowIntersectionPoints enable and disable the popup and the intersection circles respectively. Note that the intersection points can be visually modified by the ChartSeries TrackBallTemplate property and can therefore have an arbitrary visualization. The track info can also be specified as a different template using the ChartSeries' TrackInfoTemplate property. The code example below shows how to modify the trackball and track info template. You can modify the color of the trackball line using the RadChartView's TrackBallLineStyle property. It is of type Style and it must target the PolyLine class because the trackball behavior uses a PolyLine internally.

Specifying a custom TrackBallTemplate

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"
                                             ShowTrackInfo="False"/>
    </telerik:RadCartesianChart.Behaviors>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis/>
    </telerik:RadCartesianChart.VerticalAxis>

    <telerik:ScatterLineSeries>
        <telerik:ScatterLineSeries.TrackBallTemplate>
            <DataTemplate>
                <Rectangle Width="20"
                           Height="20"
                           Fill="Violet"
                           RenderTransformOrigin="0.5,0.5">
                    <Rectangle.RenderTransform>
                        <RotateTransform Angle="45"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </DataTemplate>
        </telerik:ScatterLineSeries.TrackBallTemplate>

        <telerik:ScatterDataPoint XValue="5"
                                             YValue="5"/>
        <telerik:ScatterDataPoint XValue="15"
                                             YValue="5"/>
        <telerik:ScatterDataPoint XValue="20"
                                             YValue="5"/>
    </telerik:ScatterLineSeries>
</telerik:RadCartesianChart>

Rad Chart View-chart behaviors trackball

Specifying a custom TrackBallInfoTemplate

<telerik:ScatterLineSeries>
    <telerik:ScatterLineSeries.TrackBallInfoTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=DisplayHeader}" Foreground="Blue" FontWeight="Bold"/>
                <TextBlock Text="{Binding Path=DisplayContent}" Foreground="Blue" Margin="4,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </telerik:ScatterLineSeries.TrackBallInfoTemplate>
</telerik:ScatterLineSeries>

SnapMode

The SnapMode property of ChartTrackballBehavior determines how the trackball line will be snapped to the chart's data points. Valid property values are None, ClosestPoint and AllClosestPoints with None disabling snapping, ClosestPoint snapping to the closest point of all data points in the chart, and AllClosestPoints snapping to the closest point from each series object in the chart. That is, AllClosestPoints snaps to multiple data points at once. A few screenshots will best describe the different values of SnapMode:

SnapMode: None

SnapMode: ClosestPoint

SnapMode: AllClosestPoints

TrackInfoUpdated

ChartTrackballBehavior provides a TrackInfoUpdated event that fires as the users drag their finger across the chart plot area. On every drag event, TrackInfoUpdated's event arguments provide information related to the current position of the trackball, which is the same ChartDataContext that is provided for the tooltip. The event arguments provide the closest data point for each series in the chart as well as the absolute closest data point. Another property of the event arguments is the Header property (of type object), which allows users to directly specify a header for the track info popup. The following example shows how to use TrackInfoUpdated event:

<telerik:RadCartesianChart>
   <telerik:RadCartesianChart.TrackBallInfoStyle>
      <Style TargetType="telerik:TrackBallInfoControl">
         <Setter Property="HeaderTemplate">
            <Setter.Value>
               <DataTemplate>
                  <TextBlock Text="{Binding}" 
                             FontSize="23"
                             Foreground="Green"/>
               </DataTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </telerik:RadCartesianChart.TrackBallInfoStyle>

   <telerik:RadCartesianChart.Behaviors>
      <telerik:ChartTrackBallBehavior ShowTrackInfo="True"
                                           ShowIntersectionPoints="True"
                                           TrackInfoUpdated="ChartTrackBallBehavior_TrackInfoUpdated"/>
   </telerik:RadCartesianChart.Behaviors>

   <telerik:RadCartesianChart.VerticalAxis>
      <telerik:LinearAxis/>
   </telerik:RadCartesianChart.VerticalAxis>

   <telerik:RadCartesianChart.HorizontalAxis>
      <telerik:CategoricalAxis/>
   </telerik:RadCartesianChart.HorizontalAxis>

   <telerik:SplineSeries>
    <telerik:SplineSeries.DataPoints>
        <telerik:CategoricalDataPoint Value="0.2" />
        <telerik:CategoricalDataPoint Value="0.4" />
        <telerik:CategoricalDataPoint Value="0.5" />
        <telerik:CategoricalDataPoint Value="1.4" />
        <telerik:CategoricalDataPoint Value="1.0" />
        <telerik:CategoricalDataPoint Value="1.3" />
    </telerik:SplineSeries.DataPoints>
   </telerik:SplineSeries>

   <telerik:LineSeries>
    <telerik:LineSeries.DataPoints>
        <telerik:CategoricalDataPoint Value="0.1"/>
        <telerik:CategoricalDataPoint Value="0.3"/>
        <telerik:CategoricalDataPoint Value="0.3"/>
        <telerik:CategoricalDataPoint Value="0.4"/>
        <telerik:CategoricalDataPoint Value="0.2"/>
        <telerik:CategoricalDataPoint Value="0.3"/>
    </telerik:LineSeries.DataPoints>
   </telerik:LineSeries>
</telerik:RadCartesianChart>

private void ChartTrackBallBehavior_TrackInfoUpdated(object sender, TrackBallInfoEventArgs e)
{
    foreach (DataPointInfo info in e.Context.DataPointInfos)
    {
        info.DisplayHeader = "Custom data point header";
    }

    e.Header = "Sample header";
}
Private Sub ChartTrackBallBehavior_TrackInfoUpdated(ByVal sender As Object, ByVal e As TrackBallInfoEventArgs)
   For Each info As DataPointInfo In e.Context.DataPointInfos
      info.DisplayHeader = "Custom data point header"
   Next

   e.Header = "Sample header"
End Sub

Rad Charting Kit-chart behaviors trackballinfoupdated

Update the TrackBall position

ChartTrackBallBehavior exposes the Position property that can be used to manually change the position of the trackball. The property accepts a value of type Sytem.Windows.Point. Setting the Position will display and snap the trackball to the data points that are plotted closest to the set position. The position is defined in pixels relative to the chart.

For example, if the chart is 500px wide and 300px high, and the Position property is set to new Point(250, 150) the trackball will be placed at the data points plotted closest to the 250th horizontal and 150th vertical pixels of the chart.

trackballBehavior.Position = new Point(250, 150);
trackballBehavior.Position = New Point(250, 150)

This behavior also provides the PositionChanging event, which is called on each change of the Position property. The event arguments expose a couple of helpful properties:

  • PreviousPosition: Gets the previous position of the trackball.
  • NewPosition: Gets or sets the new position of the trackball.

The PositionChanging event will be called only if the old and the new positions are different.

You can find a runnable project that demonstrates manipulating the position of the trackball in the TrackBallSyncedCharts
SDK example.