Telerik UI for Windows Phone by Progress

Trackball Behavior

Along with tooltip and pan/zoom behaviors, RadChart provides a trackball behavior through the ChartTrackballBehavior class. This behavior can display a vertical line across the chart plot area and also to 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. A screenshot should best explain this:

radchart-features-trackball

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

The ChartTrackballBehavior exposes three properties and an event. These are ShowTrackInfo, ShowIntersectionPoints, SnapMode and the event is called TrackInfoUpdated. ShowTrackInfo and ShowIntersectionPoints enable and disable the popup and the intersection circles respectively. It is important to note that the intersection points can be visually modified by ChartSeries' TrackBallTemplate property and can therefore have an arbitrary visualization. The track info can also be specified as a different template and this can be done with ChartSeries' TrackInfoTemplate property. Below is an example of how to modify the track ball and track info templates. The color of the track ball line can be modified via RadChart'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

CopyXAML
<telerikChart:RadCartesianChart>
  <telerikChart:RadCartesianChart.Behaviors>
    <telerikChart:ChartTrackBallBehavior ShowIntersectionPoints="True" ShowTrackInfo="False" />
  </telerikChart:RadCartesianChart.Behaviors>
  <telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:LinearAxis />
  </telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:LinearAxis />
  </telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:ScatterLineSeries>
    <telerikChart:ScatterLineSeries.TrackBallTemplate>
      <DataTemplate>
        <Rectangle Width="20" Height="20" Fill="{StaticResource PhoneForegroundBrush}" RenderTransformOrigin="0.5,0.5">
          <Rectangle.RenderTransform>
            <RotateTransform Angle="45" />
          </Rectangle.RenderTransform>
        </Rectangle>
      </DataTemplate>
    </telerikChart:ScatterLineSeries.TrackBallTemplate>
    <telerikChartEngine:ScatterDataPoint XValue="5" YValue="5" />
    <telerikChartEngine:ScatterDataPoint XValue="15" YValue="5" />
    <telerikChartEngine:ScatterDataPoint XValue="20" YValue="5" />
  </telerikChart:ScatterLineSeries>
</telerikChart:RadCartesianChart>

radchart-features-trackballtemplate

Specifying a custom TrackBallInfoTemplate

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

Snap Mode

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, it snaps to multiple data points at once. Again, a few screenshots will best describe the different values of SnapMode:

SnapMode: None

radchart-features-trackballsnapnone

SnapMode: ClosestPoint

radchart-features-trackballsnapclosest

SnapMode: AllClosestPoints

radchart-features-trackballall

TrackInfoUpdated

ChartTrackballBehavior provides a TrackInfoUpdated event which 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. Here is an example usage of the TrackInfoUpdatedEvent:

CopyXAML
<telerikChart:RadCartesianChart>
  <telerikChart:RadCartesianChart.TrackBallInfoStyle>
    <Style TargetType="telerikChartSpecialized:TrackBallInfoControl">
      <Setter Property="HeaderTemplate">
        <Setter.Value>
          <DataTemplate>
            <TextBlock Text="{Binding}" FontSize="23" Foreground="{StaticResource PhoneBackgroundBrush}" />
          </DataTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </telerikChart:RadCartesianChart.TrackBallInfoStyle>
  <telerikChart:RadCartesianChart.Behaviors>
    <telerikChart:ChartTrackBallBehavior ShowTrackInfo="True" ShowIntersectionPoints="True" TrackInfoUpdated="ChartTrackBallBehavior_TrackInfoUpdated" />
  </telerikChart:RadCartesianChart.Behaviors>
  <telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:LinearAxis />
  </telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:CategoricalAxis />
  </telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:SplineSeries>
    <telerikChartEngine:CategoricalDataPoint Value="0.2" />
    <telerikChartEngine:CategoricalDataPoint Value="0.4" />
    <telerikChartEngine:CategoricalDataPoint Value="0.5" />
    <telerikChartEngine:CategoricalDataPoint Value="1.4" />
    <telerikChartEngine:CategoricalDataPoint Value="1.0" />
    <telerikChartEngine:CategoricalDataPoint Value="1.3" />
  </telerikChart:SplineSeries>
  <telerikChart:LineSeries>
    <telerikChartEngine:CategoricalDataPoint Value="0.1" />
    <telerikChartEngine:CategoricalDataPoint Value="0.3" />
    <telerikChartEngine:CategoricalDataPoint Value="0.3" />
    <telerikChartEngine:CategoricalDataPoint Value="0.4" />
    <telerikChartEngine:CategoricalDataPoint Value="0.2" />
    <telerikChartEngine:CategoricalDataPoint Value="0.3" />
  </telerikChart:LineSeries>
</telerikChart:RadCartesianChart>
CopyC#
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";
}
CopyVB.NET
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