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: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.