Skip to content

Commit 4f15233

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/925768-synchronize-trackball-in-sfcartesianchart
Attach the synchronize trackball in .NET MAUI SfCartesianChart KB sample
2 parents b9f0d20 + 81264ea commit 4f15233

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1528
-2
lines changed

‎README.md

Lines changed: 166 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,166 @@
1-
# How-to-synchronize-trackball-in-.NET-MAUI-SfCartesianChart
2-
Learn how to synchronize the TrackBall feature in SfCartesianChart instances in .NET MAUI, allowing coordinated trackball interaction across charts for a consistent, interactive experience.
1+
# How to synchronize trackball in .NET MAUI SfCartesianChart
2+
3+
In this article, we described how to synchronize the trackball in multiple cartesian charts.
4+
5+
The [Trackball](https://help.syncfusion.com/maui/cartesian-charts/trackball) feature in [Syncfusion MAUI Cartesian Chart](https://help.syncfusion.com/maui/cartesian-charts/getting-started) is an interactive functionality that allows users to track and display data points on a chart as they hover over on different areas of the chart. It provides real-time feedback by showing a marker or tooltip with relevant data, such as the value of a specific point on the chart. This enhances the user experience by providing detailed information about specific data points.
6+
7+
**Importance of Synchronizing Trackball:**
8+
9+
• **Consistency**: Ensures that all charts display data for the same point in time or category, making comparisons easier.
10+
11+
• **Interactivity**: Enhances the user experience by allowing synchronized interactions across multiple charts.
12+
13+
14+
**Steps to achieve Synchronized Trackball in .NET MAUI SfCartesianChart**
15+
16+
**Step 1: Set Up Multiple Charts**
17+
18+
Determine the number of charts you need to create to effectively visualize your data. Initialize a grid with the desired number of rows and columns.
19+
Let’s configure the Syncfusion .NET MAUI SfCartesian Chart using this [getting started documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started) in each grid cells. Assign a unique x: Name to each of the charts. Refer to the following code example to create multiple charts in your application.
20+
21+
[XAML]
22+
```xml
23+
<Grid>
24+
<!-- Define 3 rows for the grid layout -->
25+
<Grid.RowDefinitions>
26+
<RowDefinition Height="*"/>
27+
<RowDefinition Height="*"/>
28+
<RowDefinition Height="*"/>
29+
</Grid.RowDefinitions>
30+
31+
<!--chart 1 -->
32+
33+
<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart">
34+
<chart:SfCartesianChart.XAxes>
35+
<chart:DateTimeAxis/>
36+
</chart:SfCartesianChart.XAxes>
37+
38+
<chart:SfCartesianChart.YAxes>
39+
<chart:NumericalAxis/>
40+
</chart:SfCartesianChart.YAxes>
41+
42+
<chart:SplineSeries ItemsSource="{Binding DataCollection1}" XBindingPath="Date" YBindingPath="Value"/>
43+
</chart:SfCartesianChart>
44+
45+
<!--chart 2 -->
46+
47+
<chart:SfCartesianChart Grid.Row="1" x:Name="secondChart">
48+
<chart:SfCartesianChart.XAxes>
49+
<chart:DateTimeAxis/>
50+
</chart:SfCartesianChart.XAxes>
51+
52+
<chart:SfCartesianChart.YAxes>
53+
<chart:NumericalAxis/>
54+
</chart:SfCartesianChart.YAxes>
55+
56+
<chart:StepLineSeries ItemsSource="{Binding DataCollection2}" XBindingPath="Date" YBindingPath="Value"/>
57+
</chart:SfCartesianChart>
58+
59+
<!--chart 3 -->
60+
61+
<chart:SfCartesianChart Grid.Row="2" x:Name="thirdChart">
62+
<chart:SfCartesianChart.XAxes>
63+
<chart:DateTimeAxis/>
64+
</chart:SfCartesianChart.XAxes>
65+
66+
<chart:SfCartesianChart.YAxes>
67+
<chart:NumericalAxis/>
68+
</chart:SfCartesianChart.YAxes>
69+
70+
<chart:StepLineSeries ItemsSource="{Binding DataCollection3}" XBindingPath="Date" YBindingPath="Value"/>
71+
</chart:SfCartesianChart>
72+
</Grid>
73+
```
74+
75+
76+
**Step 2: Initialize TrackballBehavior**
77+
78+
Initialize TrackballBehavior for each chart and specify a unique x: Name for each of the [ChartTrackballBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartTrackballBehavior.html). Refer to the following code to initialize TrackballBehavior.
79+
80+
[XAML]
81+
```xml
82+
<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart">
83+
<chart:SfCartesianChart.TrackballBehavior>
84+
<chart:ChartTrackballBehavior x:Name="trackBall1" >
85+
<chart:SfCartesianChart.TrackballBehavior>
86+
</chart:SfCartesianChart>
87+
```
88+
Similarly, you have to mention for other charts also.
89+
90+
**Step 3: Handle the TrackballCreated events**
91+
92+
Handling the TrackballCreated events is crucial for synchronizing the trackball across multiple SfCartesianChart controls.
93+
94+
[TrackballCreated Event](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_TrackballCreated): This event is triggered when the trackball is created or updated. By handling this event, you can synchronize the trackball position across multiple charts. In your XAML, ensure that the TrackballCreated event is wired up for each chart.
95+
96+
[XAML]
97+
```xml
98+
<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart" TrackballCreated="firstChart_TrackballCreated">
99+
.
100+
.
101+
.
102+
</chart:SfCartesianChart>
103+
```
104+
105+
106+
Similarly, you have to specify event for other charts also.
107+
In your code-behind file (e.g., MainPage.xaml.cs), implement the event handlers to synchronize the trackball positions.
108+
109+
[C#]
110+
```csharp
111+
public partial class MainPage : ContentPage
112+
{
113+
public MainPage()
114+
{
115+
InitializeComponent();
116+
}
117+
118+
private void HandleTrackballCreated(object sender, TrackballEventArgs e, SfCartesianChart primaryChart, ChartTrackballBehavior trackBall1, ChartTrackballBehavior trackBall2)
119+
{
120+
var pointsInfo = e.TrackballPointsInfo;
121+
if (pointsInfo.Count > 0)
122+
{
123+
var item = (DataModel)pointsInfo[0].DataItem;
124+
125+
// Convert chart point to screen point
126+
float xPoint = primaryChart.ValueToPoint(primaryChart.XAxes[0], item.Date.ToOADate());
127+
float yPoint = primaryChart.ValueToPoint(primaryChart.YAxes[0], item.Value);
128+
129+
// Show the trackball markers on the other charts
130+
trackBall1.Show(xPoint, yPoint);
131+
trackBall2.Show(xPoint, yPoint);
132+
}
133+
}
134+
135+
private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
136+
{
137+
HandleTrackballCreated(sender, e, firstChart, trackBall2, trackBall3);
138+
}
139+
140+
private void secondChart_TrackballCreated(object sender, TrackballEventArgs e)
141+
{
142+
HandleTrackballCreated(sender, e, secondChart, trackBall1, trackBall3);
143+
}
144+
145+
private void thirdChart_TrackballCreated(object sender, TrackballEventArgs e)
146+
{
147+
HandleTrackballCreated(sender, e, thirdChart, trackBall1, trackBall2);
148+
}
149+
}
150+
```
151+
152+
In the above code, we have used the [ValueToPoint](https://help.syncfusion.com/maui/cartesian-charts/transform-axis-value-to-pixel-value-and-vice-versa) method to convert the data point value to the screen point, and the **ToOADate** method is used to convert the DateTime value to a double value here. Then we have to specify those points in the ChartTrackballBehavior class show method to show synchronized trackball for all charts.
153+
154+
The following demo illustrates multiple charts in .NET MAUI with synchronized trackball, showing how the trackball positions move together across all charts when interacting with any one chart, following the implemented synchronization steps.
155+
156+
**Output:**
157+
158+
![ trackball synchronization](https://support.syncfusion.com/kb/agent/attachment/article/18647/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0MzQyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.SlnHed6aMQ8riGFUC2tKxYKLejojSUzYboX56xNEgxA)
159+
160+
**Troubleshooting:**
161+
162+
**Path too long exception**
163+
164+
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
165+
166+
For more details, refer to the KB on [How to synchronize trackball in .NET MAUI SfCartesianChart ?](https://support.syncfusion.com/kb/article/18647/how-to-synchronize-trackball-in-net-maui-sfcartesianchart-)

‎TrackBallSample/TrackBallSample.sln

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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}") = "TrackBallSample", "TrackBallSample\TrackBallSample.csproj", "{30C2C141-0A42-4C2C-B854-39BA299F63FC}"
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+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{30C2C141-0A42-4C2C-B854-39BA299F63FC}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
EndGlobal

‎TrackBallSample/TrackBallSample/App.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:TrackBallSample"
5+
x:Class="TrackBallSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎TrackBallSample/TrackBallSample/App.xaml.cs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace TrackBallSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎TrackBallSample/TrackBallSample/AppShell.xaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="TrackBallSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:TrackBallSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="TrackBallSample">
9+
10+
<ShellContent
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</Shell>

‎TrackBallSample/TrackBallSample/AppShell.xaml.cs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TrackBallSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

0 commit comments

Comments
 (0)