diff --git a/README.md b/README.md index 66a73f6..2c6d0e9 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,19 @@ -# How-to-synchronize-the-trackball-with-different-chart-area-in-WPF-Chart -This article shows how to synchronize the trackball with different chart area in WPF Chart +# How to synchronize the trackball in multiple WPF Charts +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. + +# SFChart + +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. + + # Trackball + +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. + +# Output +![Synchronize trackballs](https://github.com/user-attachments/assets/3e401e8c-b56c-4de5-a6ae-c13c20af52f9) + + +# Troubleshooting +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. + +For a step by step procedure, refer to the [Synchronize trackball]() KB article. diff --git a/Synchronize_Trackball/App.xaml b/Synchronize_Trackball/App.xaml new file mode 100644 index 0000000..ad081dd --- /dev/null +++ b/Synchronize_Trackball/App.xaml @@ -0,0 +1,9 @@ + + + + + diff --git a/Synchronize_Trackball/App.xaml.cs b/Synchronize_Trackball/App.xaml.cs new file mode 100644 index 0000000..f5fd4ae --- /dev/null +++ b/Synchronize_Trackball/App.xaml.cs @@ -0,0 +1,14 @@ +using System.Configuration; +using System.Data; +using System.Windows; + +namespace Synchronize_Trackball +{ + /// + /// Interaction logic for App.xaml + /// + public partial class App : Application + { + } + +} diff --git a/Synchronize_Trackball/AssemblyInfo.cs b/Synchronize_Trackball/AssemblyInfo.cs new file mode 100644 index 0000000..b0ec827 --- /dev/null +++ b/Synchronize_Trackball/AssemblyInfo.cs @@ -0,0 +1,10 @@ +using System.Windows; + +[assembly: ThemeInfo( + ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located + //(used if a resource is not found in the page, + // or application resource dictionaries) + ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located + //(used if a resource is not found in the page, + // app, or any theme specific resource dictionaries) +)] diff --git a/Synchronize_Trackball/MainWindow.xaml b/Synchronize_Trackball/MainWindow.xaml new file mode 100644 index 0000000..e0057c0 --- /dev/null +++ b/Synchronize_Trackball/MainWindow.xaml @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Synchronize_Trackball/MainWindow.xaml.cs b/Synchronize_Trackball/MainWindow.xaml.cs new file mode 100644 index 0000000..7883394 --- /dev/null +++ b/Synchronize_Trackball/MainWindow.xaml.cs @@ -0,0 +1,92 @@ +using System.Collections.ObjectModel; +using Syncfusion.UI.Xaml.Charts; +using System.Text; +using System.Windows; +using System.Windows.Controls; +using System.Windows.Data; +using System.Windows.Documents; +using System.Windows.Input; +using System.Windows.Media; +using System.Windows.Media.Imaging; +using System.Windows.Navigation; +using System.Windows.Shapes; + +namespace Synchronize_Trackball +{ + /// + /// Interaction logic for MainWindow.xaml + /// + public partial class MainWindow : Window + { + public Point MousePoint + { + get; + set; + } + + public MainWindow() + { + InitializeComponent(); + } + + private void SfChart_MouseMove1(object sender, MouseEventArgs e) + { + // Taking the first chart position as reference to get the mouse point. + MousePoint = Mouse.GetPosition(behavior1.AdorningCanvas); + var chart1 = (sender as SfChart); + + if (chart1.SeriesClipRect.Contains(MousePoint)) + { + // Generalizing position with respect to axis width. + MousePoint = new Point( + MousePoint.X - chart1.SeriesClipRect.Left, + MousePoint.Y - chart1.SeriesClipRect.Top); + + behavior1.ActivateTrackball(MousePoint); + behavior2.ActivateTrackball(MousePoint); + } + else + { + behavior1.DeactivateTrackball(); + behavior2.DeactivateTrackball(); + } + } + + private void SfChart_MouseMove2(object sender, MouseEventArgs e) + { + // Taking the second chart position as reference to get the mouse point. + MousePoint = Mouse.GetPosition(behavior2.AdorningCanvas); + var chart2 = (sender as SfChart); + + if (chart2.SeriesClipRect.Contains(MousePoint)) + { + // Generalizing position with respect to axis width. + MousePoint = new Point( + MousePoint.X - chart2.SeriesClipRect.Left, + MousePoint.Y - chart2.SeriesClipRect.Top); + + behavior1.ActivateTrackball(MousePoint); + behavior2.ActivateTrackball(MousePoint); + } + else + { + behavior1.DeactivateTrackball(); + behavior2.DeactivateTrackball(); + } + } + } + + public class CustomTrackBallBehavior : ChartTrackBallBehavior + { + public void ActivateTrackball(Point mousePoint) + { + IsActivated = true; + OnPointerPositionChanged(mousePoint); + } + + public void DeactivateTrackball() + { + IsActivated = false; + } + } +} \ No newline at end of file diff --git a/Synchronize_Trackball/Model/Data.cs b/Synchronize_Trackball/Model/Data.cs new file mode 100644 index 0000000..9d6215e --- /dev/null +++ b/Synchronize_Trackball/Model/Data.cs @@ -0,0 +1,29 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Synchronize_Trackball +{ + public class Data + { + public Data(DateTime date, double value) + { + Date = date; + Value = value; + } + + public DateTime Date + { + get; + set; + } + + public double Value + { + get; + set; + } + } +} diff --git a/Synchronize_Trackball/Synchronize_Trackball.csproj b/Synchronize_Trackball/Synchronize_Trackball.csproj new file mode 100644 index 0000000..52478d0 --- /dev/null +++ b/Synchronize_Trackball/Synchronize_Trackball.csproj @@ -0,0 +1,15 @@ + + + + WinExe + net8.0-windows + enable + enable + true + + + + + + + diff --git a/Synchronize_Trackball/Synchronize_Trackball.sln b/Synchronize_Trackball/Synchronize_Trackball.sln new file mode 100644 index 0000000..8fc685c --- /dev/null +++ b/Synchronize_Trackball/Synchronize_Trackball.sln @@ -0,0 +1,22 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.12.35506.116 d17.12 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Synchronize_Trackball", "Synchronize_Trackball.csproj", "{2AE8056D-FC80-4398-A603-35E59086C4CA}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {2AE8056D-FC80-4398-A603-35E59086C4CA}.Debug|Any CPU.Build.0 = Debug|Any CPU + {2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.ActiveCfg = Release|Any CPU + {2AE8056D-FC80-4398-A603-35E59086C4CA}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection +EndGlobal diff --git a/Synchronize_Trackball/ViewModel/DataGenerator.cs b/Synchronize_Trackball/ViewModel/DataGenerator.cs new file mode 100644 index 0000000..db231a1 --- /dev/null +++ b/Synchronize_Trackball/ViewModel/DataGenerator.cs @@ -0,0 +1,49 @@ +using Synchronize_Trackball; +using System; +using System.Collections.Generic; +using System.Collections.ObjectModel; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace Synchronize_Trackball +{ + public class DataGenerator + { + public int DataCount = 100; + private Random randomNumber; + public ObservableCollection DataCollection1 { get; set; } + public ObservableCollection DataCollection2 { get; set; } + + public DataGenerator() + { + randomNumber = new Random(); + DataCollection1 = GenerateData(); + DataCollection2 = GenerateData(); + } + + public ObservableCollection GenerateData() + { + ObservableCollection datas = new ObservableCollection(); + DateTime date = new DateTime(2020, 1, 1); + double value = 100; + + for (int i = 0; i < DataCount; i++) + { + datas.Add(new Data(date, Math.Round(value, 2))); + date = date.Add(TimeSpan.FromDays(1)); + + if (randomNumber.NextDouble() > .5) + { + value += randomNumber.NextDouble(); + } + else + { + value -= randomNumber.NextDouble(); + } + } + + return datas; + } + } +}