Chart: TrackBallInfo doesn't update

[Jan]

Hello Developers,

I have simple scenario. Three charts with Zoom and Pan behavior and Track Ball behavior. When i zoom(or pan) in one chart then zoom(or pan) is bind to another charts. 

I have to display datas for one day. I am using DateTimeCategoricalAxis and populate collection with data each minute. That means i have 1440 categories. 

I display 3 series (bar, line, point). Everything works, but if i zoom in that scenario trackball info is not updated well. 

Trackball info is still on same place and is blank. 

You can see it in attached file.

<Window x:Class="Chart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Chart"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
        mc:Ignorable="d"
        Title="MainWindow">
    <Grid>
        <Grid.Resources>
            <Style x:Key="MonitorChartStyle" TargetType="telerik:RadCartesianChart">
                <Setter Property="Margin" Value="4" />
                <Setter Property="TrackBallLineStyle" Value="{x:Null}" />
            </Style>
            <DataTemplate x:Key="TrackBallInfoTemplateOnlineQuality">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="DodgerBlue"
                               Width="8"
                               Height="8"
                               StrokeThickness="1"
                               Stroke="White"
                               VerticalAlignment="Center"
                               Margin="4,0,4,0" />
                    <TextBlock
                        Text="Tonnage: " />
                    <TextBlock Text="{Binding DataPoint.Value, StringFormat={}{0:0.##}}" />
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>

        <StackPanel Orientation="Vertical">
            <telerik:RadCartesianChart HorizontalAlignment="Stretch"
                                       Style="{DynamicResource MonitorChartStyle}"
                                       Zoom="{Binding Path=Zoom, Mode=TwoWay}"
                                       PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"
                                       MinHeight="200" Height="200">
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis
                        x:Name="HorizontalAxis"
                        SmartLabelsMode="SmartStep"
                        MajorTickInterval="10"
                        MajorTickStyle="{x:Null}" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="VerticalAxis"
                                        SmartLabelsMode="SmartStepAndRange"
                                        Minimum="0"
                                        Maximum="100">
                        <telerik:LinearAxis.LabelStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="Width" Value="50" />
                                <Setter Property="TextAlignment" Value="Right" />
                            </Style>
                        </telerik:LinearAxis.LabelStyle>
                    </telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"
                                   CategoryBinding="Category"
                                   ValueBinding="Value"
                                   TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <!--TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}"-->
                    <telerik:BarSeries.VerticalAxis>
                        <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"
                                            HorizontalLocation="Right"
                                            Minimum="0"
                                            Maximum="100">
                            <telerik:LinearAxis.LabelStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Width" Value="50" />
                                    <Setter Property="TextAlignment" Value="Left" />
                                </Style>
                            </telerik:LinearAxis.LabelStyle>
                        </telerik:LinearAxis>
                    </telerik:BarSeries.VerticalAxis>
                    <telerik:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="DodgerBlue" />
                        </Style>
                    </telerik:BarSeries.DefaultVisualStyle>
                </telerik:BarSeries>
                <chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"
                                      CategoryBinding="Category"
                                      ValueBinding="Value"
                                      Stroke="Red"
                                      TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />
                <telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"
                                     CategoryBinding="Category"
                                     ValueBinding="Value"
                                     TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <telerik:PointSeries.PointTemplate>
                        <DataTemplate>
                            <Path Margin="4"
                                  Stroke="Orange"
                                  StrokeThickness="1"
                                  StrokeStartLineCap="Square"
                                  StrokeEndLineCap="Square"
                                  Stretch="Uniform"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathGeometry.Figures>
                                            <PathFigure StartPoint="0,0">
                                                <LineSegment Point="4,4" />
                                            </PathFigure>
                                            <PathFigure StartPoint="0,4">
                                                <LineSegment Point="4,0" />
                                            </PathFigure>
                                        </PathGeometry.Figures>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </DataTemplate>
                    </telerik:PointSeries.PointTemplate>
                </telerik:PointSeries>
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"
                                                    ShowTrackInfo="True" />
                    <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />
                </telerik:RadCartesianChart.Behaviors>
            </telerik:RadCartesianChart>
            <telerik:RadCartesianChart HorizontalAlignment="Stretch"
                                       Style="{DynamicResource MonitorChartStyle}"
                                       Zoom="{Binding Path=Zoom, Mode=TwoWay}"
                                       PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"
                                       MinHeight="200" Height="200">
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis
                        x:Name="HorizontalAxis2"
                        SmartLabelsMode="SmartStep"
                        MajorTickInterval="10"
                        MajorTickStyle="{x:Null}" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="VerticalAxis2"
                                        SmartLabelsMode="SmartStepAndRange"
                                        Minimum="0"
                                        Maximum="100">
                        <telerik:LinearAxis.LabelStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="Width" Value="50" />
                                <Setter Property="TextAlignment" Value="Right" />
                            </Style>
                        </telerik:LinearAxis.LabelStyle>
                    </telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"
                                   CategoryBinding="Category"
                                   ValueBinding="Value"
                                   TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <!--TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}"-->
                    <telerik:BarSeries.VerticalAxis>
                        <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"
                                            HorizontalLocation="Right"
                                            Minimum="0"
                                            Maximum="100">
                            <telerik:LinearAxis.LabelStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Width" Value="50" />
                                    <Setter Property="TextAlignment" Value="Left" />
                                </Style>
                            </telerik:LinearAxis.LabelStyle>
                        </telerik:LinearAxis>
                    </telerik:BarSeries.VerticalAxis>
                    <telerik:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="DodgerBlue" />
                        </Style>
                    </telerik:BarSeries.DefaultVisualStyle>
                </telerik:BarSeries>
                <chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"
                                      CategoryBinding="Category"
                                      ValueBinding="Value"
                                      Stroke="Red"
                                      TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />
                <telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"
                                     CategoryBinding="Category"
                                     ValueBinding="Value"
                                     TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <telerik:PointSeries.PointTemplate>
                        <DataTemplate>
                            <Path Margin="4"
                                  Stroke="Orange"
                                  StrokeThickness="1"
                                  StrokeStartLineCap="Square"
                                  StrokeEndLineCap="Square"
                                  Stretch="Uniform"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathGeometry.Figures>
                                            <PathFigure StartPoint="0,0">
                                                <LineSegment Point="4,4" />
                                            </PathFigure>
                                            <PathFigure StartPoint="0,4">
                                                <LineSegment Point="4,0" />
                                            </PathFigure>
                                        </PathGeometry.Figures>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </DataTemplate>
                    </telerik:PointSeries.PointTemplate>
                </telerik:PointSeries>
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"
                                                    ShowTrackInfo="True" />
                    <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />
                </telerik:RadCartesianChart.Behaviors>
            </telerik:RadCartesianChart>
            <telerik:RadCartesianChart HorizontalAlignment="Stretch"
                                       Style="{DynamicResource MonitorChartStyle}"
                                       Zoom="{Binding Path=Zoom, Mode=TwoWay}"
                                       PanOffset="{Binding Path=PanOffset, Mode=TwoWay}"
                                       MinHeight="200" Height="200">
                <telerik:RadCartesianChart.Grid>
                    <telerik:CartesianChartGrid MajorLinesVisibility="XY" />
                </telerik:RadCartesianChart.Grid>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis
                        x:Name="HorizontalAxis3"
                        SmartLabelsMode="SmartStep"
                        MajorTickInterval="10"
                        MajorTickStyle="{x:Null}" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="VerticalAxis3"
                                        SmartLabelsMode="SmartStepAndRange"
                                        Minimum="0"
                                        Maximum="100">
                        <telerik:LinearAxis.LabelStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="Width" Value="50" />
                                <Setter Property="TextAlignment" Value="Right" />
                            </Style>
                        </telerik:LinearAxis.LabelStyle>
                    </telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:BarSeries ItemsSource="{Binding DestinationDataSeries}"
                                   CategoryBinding="Category"
                                   ValueBinding="Value"
                                   TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <!--TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}"-->
                    <telerik:BarSeries.VerticalAxis>
                        <telerik:LinearAxis SmartLabelsMode="SmartStepAndRange"
                                            HorizontalLocation="Right"
                                            Minimum="0"
                                            Maximum="100">
                            <telerik:LinearAxis.LabelStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Width" Value="50" />
                                    <Setter Property="TextAlignment" Value="Left" />
                                </Style>
                            </telerik:LinearAxis.LabelStyle>
                        </telerik:LinearAxis>
                    </telerik:BarSeries.VerticalAxis>
                    <telerik:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="DodgerBlue" />
                        </Style>
                    </telerik:BarSeries.DefaultVisualStyle>
                </telerik:BarSeries>
                <chartView:LineSeries ItemsSource="{Binding SourceDataSeries}"
                                      CategoryBinding="Category"
                                      ValueBinding="Value"
                                      Stroke="Red"
                                      TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}" />
                <telerik:PointSeries ItemsSource="{Binding OnlineDataSeries}"
                                     CategoryBinding="Category"
                                     ValueBinding="Value"
                                     TrackBallInfoTemplate="{StaticResource TrackBallInfoTemplateOnlineQuality}">
                    <telerik:PointSeries.PointTemplate>
                        <DataTemplate>
                            <Path Margin="4"
                                  Stroke="Orange"
                                  StrokeThickness="1"
                                  StrokeStartLineCap="Square"
                                  StrokeEndLineCap="Square"
                                  Stretch="Uniform"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathGeometry.Figures>
                                            <PathFigure StartPoint="0,0">
                                                <LineSegment Point="4,4" />
                                            </PathFigure>
                                            <PathFigure StartPoint="0,4">
                                                <LineSegment Point="4,0" />
                                            </PathFigure>
                                        </PathGeometry.Figures>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </DataTemplate>
                    </telerik:PointSeries.PointTemplate>
                </telerik:PointSeries>
                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"
                                                    ShowTrackInfo="True" />
                    <telerik:ChartPanAndZoomBehavior ZoomMode="Horizontal" DragMode="Pan" PanMode="Horizontal" />
                </telerik:RadCartesianChart.Behaviors>
            </telerik:RadCartesianChart>
        </StackPanel>
    </Grid>
</Window>

 

and code behind:

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using Telerik.Charting;

namespace Chart
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private Point _pan;
        private Size _zoom;

        public MainWindow()
        {
            InitializeComponent();

            DestinationDataSeries = new ObservableCollection<CategoricalDataPoint>();
            SourceDataSeries = new ObservableCollection<CategoricalDataPoint>();
            OnlineDataSeries = new ObservableCollection<CategoricalDataPoint>();

            var rand = new Random();

            for (DateTime i = DateTime.Now; i < DateTime.Now.AddDays(1); i = i.AddMinutes(1))
            {
                DestinationDataSeries.Add(new CategoricalDataPoint
                {
                    Category = i,
                    Value = rand.NextDouble() * 100
                });
                SourceDataSeries.Add(new CategoricalDataPoint
                {
                    Category = i,
                    Value = rand.NextDouble() * 100
                });
                OnlineDataSeries.Add(new CategoricalDataPoint
                {
                    Category = i,
                    Value = rand.NextDouble() * 100
                });
            }

            DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #region MainWindow

        public ObservableCollection<CategoricalDataPoint> DestinationDataSeries { get; }

        public ObservableCollection<CategoricalDataPoint> SourceDataSeries { get; }

        public ObservableCollection<CategoricalDataPoint> OnlineDataSeries { get; }

        public Size Zoom
        {
            get => _zoom;
            set
            {
                _zoom = value;
                OnPropertyChanged();
            }
        }

        public Point PanOffset
        {
            get => _pan;
            set
            {
                _pan = value;
                OnPropertyChanged();
            }
        }

        #endregion
    }
}

Thank you for your help and reply.

Best Regards Jan.