Skip to content

Commit 091cab2

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/Prepare_sample_for_trackball_synchronize
Updated the trackball sample
2 parents 85de038 + 1cd0517 commit 091cab2

File tree

10 files changed

+316
-2
lines changed

10 files changed

+316
-2
lines changed

‎README.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,19 @@
1-
# How-to-synchronize-the-trackball-with-different-chart-area-in-WPF-Chart
2-
This article shows how to synchronize the trackball with different chart area in WPF Chart
1+
# How to synchronize the trackball in multiple WPF Charts
2+
This article explains how to synchronize the Trackball in multiple WPF Charts using Syncfusion's SfChart control. Synchronizing the Trackball across multiple charts allows users to view related data points in different charts simultaneously, enhancing the data analysis experience. This is particularly useful when dealing with comparative data spread across multiple series or charts, as it provides a unified interaction mechanism.
3+
4+
# SFChart
5+
6+
The SfChart is a powerful and flexible charting library designed to render high-performance charts with a wide variety of customizable features. It supports multiple chart types, including Line, Bar, Area, and more, making it an excellent tool for visualizing complex datasets.
7+
8+
# Trackball
9+
10+
The TrackballBehavior is a useful feature in the SfChart that enables users to display interactive data tooltips when hovering over a chart. It provides detailed information about data points, such as their X and Y values, and can be customized to display additional content as required.
11+
12+
# Output
13+
![Synchronize trackballs](https://github.com/user-attachments/assets/3e401e8c-b56c-4de5-a6ae-c13c20af52f9)
14+
15+
16+
# Troubleshooting
17+
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
18+
19+
For a step by step procedure, refer to the [Synchronize trackball]() KB article.

‎Synchronize_Trackball/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="Synchronize_Trackball.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:Synchronize_Trackball"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎Synchronize_Trackball/App.xaml.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.Configuration;
2+
using System.Data;
3+
using System.Windows;
4+
5+
namespace Synchronize_Trackball
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎Synchronize_Trackball/AssemblyInfo.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎Synchronize_Trackball/MainWindow.xaml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<Window x:Class="Synchronize_Trackball.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
7+
xmlns:local="clr-namespace:Synchronize_Trackball"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
<Grid>
11+
<Grid.DataContext>
12+
<local:DataGenerator/>
13+
</Grid.DataContext>
14+
15+
<Grid.RowDefinitions>
16+
<RowDefinition />
17+
<RowDefinition />
18+
</Grid.RowDefinitions>
19+
20+
<chart:SfChart x:Name="chart1" MouseMove="SfChart_MouseMove1" Header="FirstChart" Margin="5">
21+
22+
<chart:SfChart.Behaviors>
23+
<local:CustomTrackBallBehavior x:Name="behavior1"/>
24+
</chart:SfChart.Behaviors>
25+
26+
<chart:SfChart.PrimaryAxis>
27+
<chart:DateTimeAxis ShowTrackBallInfo="True" x:Name="axis" LabelFormat="MMM-dd" />
28+
</chart:SfChart.PrimaryAxis>
29+
30+
<chart:SfChart.SecondaryAxis>
31+
<chart:NumericalAxis ShowTrackBallInfo="True" x:Name="secAxis"/>
32+
</chart:SfChart.SecondaryAxis>
33+
34+
<chart:FastLineSeries x:Name="series1" XBindingPath="Date" YBindingPath="Value"
35+
ItemsSource="{Binding DataCollection1}"/>
36+
37+
</chart:SfChart>
38+
39+
<chart:SfChart x:Name="chart2" MouseMove="SfChart_MouseMove2" Grid.Row="1" Grid.Column="0" Header="Second Chart" Margin="5">
40+
41+
<chart:SfChart.Behaviors>
42+
<local:CustomTrackBallBehavior x:Name="behavior2"/>
43+
</chart:SfChart.Behaviors>
44+
45+
<chart:SfChart.PrimaryAxis>
46+
<chart:DateTimeAxis ShowTrackBallInfo="True" LabelFormat="MMM-dd"/>
47+
</chart:SfChart.PrimaryAxis>
48+
49+
<chart:SfChart.SecondaryAxis>
50+
<chart:NumericalAxis ShowTrackBallInfo="True" />
51+
</chart:SfChart.SecondaryAxis>
52+
53+
<chart:FastLineSeries x:Name="series3" XBindingPath="Date" YBindingPath="Value"
54+
ItemsSource="{Binding DataCollection2}"/>
55+
</chart:SfChart>
56+
</Grid>
57+
</Window>

‎Synchronize_Trackball/MainWindow.xaml.cs‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
using System.Collections.ObjectModel;
2+
using Syncfusion.UI.Xaml.Charts;
3+
using System.Text;
4+
using System.Windows;
5+
using System.Windows.Controls;
6+
using System.Windows.Data;
7+
using System.Windows.Documents;
8+
using System.Windows.Input;
9+
using System.Windows.Media;
10+
using System.Windows.Media.Imaging;
11+
using System.Windows.Navigation;
12+
using System.Windows.Shapes;
13+
14+
namespace Synchronize_Trackball
15+
{
16+
/// <summary>
17+
/// Interaction logic for MainWindow.xaml
18+
/// </summary>
19+
public partial class MainWindow : Window
20+
{
21+
public Point MousePoint
22+
{
23+
get;
24+
set;
25+
}
26+
27+
public MainWindow()
28+
{
29+
InitializeComponent();
30+
}
31+
32+
private void SfChart_MouseMove1(object sender, MouseEventArgs e)
33+
{
34+
// Taking the first chart position as reference to get the mouse point.
35+
MousePoint = Mouse.GetPosition(behavior1.AdorningCanvas);
36+
var chart1 = (sender as SfChart);
37+
38+
if (chart1.SeriesClipRect.Contains(MousePoint))
39+
{
40+
// Generalizing position with respect to axis width.
41+
MousePoint = new Point(
42+
MousePoint.X - chart1.SeriesClipRect.Left,
43+
MousePoint.Y - chart1.SeriesClipRect.Top);
44+
45+
behavior1.ActivateTrackball(MousePoint);
46+
behavior2.ActivateTrackball(MousePoint);
47+
}
48+
else
49+
{
50+
behavior1.DeactivateTrackball();
51+
behavior2.DeactivateTrackball();
52+
}
53+
}
54+
55+
private void SfChart_MouseMove2(object sender, MouseEventArgs e)
56+
{
57+
// Taking the second chart position as reference to get the mouse point.
58+
MousePoint = Mouse.GetPosition(behavior2.AdorningCanvas);
59+
var chart2 = (sender as SfChart);
60+
61+
if (chart2.SeriesClipRect.Contains(MousePoint))
62+
{
63+
// Generalizing position with respect to axis width.
64+
MousePoint = new Point(
65+
MousePoint.X - chart2.SeriesClipRect.Left,
66+
MousePoint.Y - chart2.SeriesClipRect.Top);
67+
68+
behavior1.ActivateTrackball(MousePoint);
69+
behavior2.ActivateTrackball(MousePoint);
70+
}
71+
else
72+
{
73+
behavior1.DeactivateTrackball();
74+
behavior2.DeactivateTrackball();
75+
}
76+
}
77+
}
78+
79+
public class CustomTrackBallBehavior : ChartTrackBallBehavior
80+
{
81+
public void ActivateTrackball(Point mousePoint)
82+
{
83+
IsActivated = true;
84+
OnPointerPositionChanged(mousePoint);
85+
}
86+
87+
public void DeactivateTrackball()
88+
{
89+
IsActivated = false;
90+
}
91+
}
92+
}

‎Synchronize_Trackball/Model/Data.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace Synchronize_Trackball
8+
{
9+
public class Data
10+
{
11+
public Data(DateTime date, double value)
12+
{
13+
Date = date;
14+
Value = value;
15+
}
16+
17+
public DateTime Date
18+
{
19+
get;
20+
set;
21+
}
22+
23+
public double Value
24+
{
25+
get;
26+
set;
27+
}
28+
}
29+
}

‎Synchronize_Trackball/Synchronize_Trackball.csproj‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net8.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<ImplicitUsings>enable</ImplicitUsings>
8+
<UseWPF>true</UseWPF>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
13+
</ItemGroup>
14+
15+
</Project>

‎Synchronize_Trackball/Synchronize_Trackball.sln‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.12.35506.116 d17.12
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Synchronize_Trackball", "Synchronize_Trackball.csproj", "{2AE8056D-FC80-4398-A603-35E59086C4CA}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
EndGlobal

‎Synchronize_Trackball/ViewModel/DataGenerator.cs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
using Synchronize_Trackball;
2+
using System;
3+
using System.Collections.Generic;
4+
using System.Collections.ObjectModel;
5+
using System.Linq;
6+
using System.Text;
7+
using System.Threading.Tasks;
8+
9+
namespace Synchronize_Trackball
10+
{
11+
public class DataGenerator
12+
{
13+
public int DataCount = 100;
14+
private Random randomNumber;
15+
public ObservableCollection<Data> DataCollection1 { get; set; }
16+
public ObservableCollection<Data> DataCollection2 { get; set; }
17+
18+
public DataGenerator()
19+
{
20+
randomNumber = new Random();
21+
DataCollection1 = GenerateData();
22+
DataCollection2 = GenerateData();
23+
}
24+
25+
public ObservableCollection<Data> GenerateData()
26+
{
27+
ObservableCollection<Data> datas = new ObservableCollection<Data>();
28+
DateTime date = new DateTime(2020, 1, 1);
29+
double value = 100;
30+
31+
for (int i = 0; i < DataCount; i++)
32+
{
33+
datas.Add(new Data(date, Math.Round(value, 2)));
34+
date = date.Add(TimeSpan.FromDays(1));
35+
36+
if (randomNumber.NextDouble() > .5)
37+
{
38+
value += randomNumber.NextDouble();
39+
}
40+
else
41+
{
42+
value -= randomNumber.NextDouble();
43+
}
44+
}
45+
46+
return datas;
47+
}
48+
}
49+
}

0 commit comments

Comments
 (0)