Skip to content

Commit d5b470a

Browse files
Vallarasu4653Vallarasu4653
committed
Optimize the event handling code
1 parent e26e607 commit d5b470a

File tree

2 files changed

+51
-84
lines changed

2 files changed

+51
-84
lines changed

‎README.md

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
# How to synchronize trackball in .NET MAUI SfCartesianChart
22

3-
In this article, we described how to synchronize the trackball in multiple SfCartesian charts.
3+
In this article, we described how to synchronize the trackball in multiple cartesian charts.
44

55
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.
66

77
**Importance of Synchronizing Trackball:**
88

99
• **Consistency**: Ensures that all charts display data for the same point in time or category, making comparisons easier.
10+
1011
• **Interactivity**: Enhances the user experience by allowing synchronized interactions across multiple charts.
1112

1213

1314
**Steps to achieve Synchronized Trackball in .NET MAUI SfCartesianChart**
1415

1516
**Step 1: Set Up Multiple Charts**
17+
1618
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.
1719
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.
1820

19-
21+
[XAML]
2022
```xml
2123
<Grid>
2224
<!-- Define 3 rows for the grid layout -->
@@ -72,9 +74,10 @@ Let’s configure the Syncfusion .NET MAUI SfCartesian Chart using this [getting
7274

7375

7476
**Step 2: Initialize TrackballBehavior**
75-
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?tabs=tabid-3). Refer to the following code to initialize TrackballBehavior.
7677

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]
7881
```xml
7982
<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart">
8083
<chart:SfCartesianChart.TrackballBehavior>
@@ -85,10 +88,12 @@ Initialize TrackballBehavior for each chart and specify a unique x: Name for eac
8588
Similarly, you have to mention for other charts also.
8689

8790
**Step 3: Handle the TrackballCreated events**
88-
Handling the TrackballCreated events is crucial for synchronizing the trackball across multiple SfCartesianChart controls
89-
[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.
90-
In your XAML, ensure that the TrackballCreated event is wired up for each chart.
91-
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]
9297
```xml
9398
<chart:SfCartesianChart Grid.Row="0" x:Name="firstChart" TrackballCreated="firstChart_TrackballCreated">
9499
.
@@ -101,6 +106,7 @@ In your XAML, ensure that the TrackballCreated event is wired up for each chart.
101106
Similarly, you have to specify event for other charts also.
102107
In your code-behind file (e.g., MainPage.xaml.cs), implement the event handlers to synchronize the trackball positions.
103108

109+
[C#]
104110
```csharp
105111
public partial class MainPage : ContentPage
106112
{
@@ -109,69 +115,52 @@ public partial class MainPage : ContentPage
109115
InitializeComponent();
110116
}
111117

112-
// first chart
113-
private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
118+
private void HandleTrackballCreated(object sender, TrackballEventArgs e, SfCartesianChart primaryChart, ChartTrackballBehavior trackBall1, ChartTrackballBehavior trackBall2)
114119
{
115120
var pointsInfo = e.TrackballPointsInfo;
116-
117121
if (pointsInfo.Count > 0)
118122
{
119123
var item = (DataModel)pointsInfo[0].DataItem;
120-
124+
121125
// Convert chart point to screen point
122-
float xPoint = firstChart.ValueToPoint(firstChart.XAxes[0], item.Date.ToOADate());
123-
float yPoint = firstChart.ValueToPoint(firstChart.YAxes[0], item.Value);
124-
125-
// Show the trackball markers on chart 2 and 3 at the calculated screen positions
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);
126131
trackBall2.Show(xPoint, yPoint);
127-
trackBall3.Show(xPoint, yPoint);
128132
}
129133
}
130134

131-
// second chart
135+
private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
136+
{
137+
HandleTrackballCreated(sender, e, firstChart, trackBall2, trackBall3);
138+
}
139+
132140
private void secondChart_TrackballCreated(object sender, TrackballEventArgs e)
133141
{
134-
var pointsInfo = e.TrackballPointsInfo;
135-
136-
if (pointsInfo.Count > 0)
137-
{
138-
var item = (DataModel)pointsInfo[0].DataItem;
139-
140-
// Convert chart point to screen point
141-
float xPoint = secondChart.ValueToPoint(secondChart.XAxes[0], item.Date.ToOADate());
142-
float yPoint = secondChart.ValueToPoint(secondChart.YAxes[0], item.Value);
143-
144-
// Show the trackball markers on chart 1 and 3 at the calculated screen positions
145-
trackBall1.Show(xPoint, yPoint);
146-
trackBall3.Show(xPoint, yPoint);
147-
}
142+
HandleTrackballCreated(sender, e, secondChart, trackBall1, trackBall3);
148143
}
149-
150-
// third chart
144+
151145
private void thirdChart_TrackballCreated(object sender, TrackballEventArgs e)
152146
{
153-
var pointsInfo = e.TrackballPointsInfo;
154-
155-
if (pointsInfo.Count > 0)
156-
{
157-
var item = (DataModel)pointsInfo[0].DataItem;
158-
159-
// Convert chart point to screen point
160-
float xPoint = thirdChart.ValueToPoint(thirdChart.XAxes[0], item.Date.ToOADate());
161-
float yPoint = thirdChart.ValueToPoint(thirdChart.YAxes[0], item.Value);
162-
163-
// Show the trackball markers on chart 1 and 2 at the calculated screen positions
164-
trackBall1.Show(xPoint, yPoint);
165-
trackBall2.Show(xPoint, yPoint);
166-
}
147+
HandleTrackballCreated(sender, e, thirdChart, trackBall1, trackBall2);
167148
}
168-
}
149+
}
169150
```
170151

171-
In the above code, we have used the [ValueToPoint(ChartAxis axis, double value)](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.
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.
172153

173154
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.
174155

175156
**Output:**
176157

177158
![ 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/agent/kb/18647)

‎TrackBallSample/TrackBallSample/MainPage.xaml.cs

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,58 +10,36 @@ public MainPage()
1010
InitializeComponent();
1111
}
1212

13-
// first chart
14-
private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
13+
private void HandleTrackballCreated(object sender, TrackballEventArgs e, SfCartesianChart primaryChart, ChartTrackballBehavior trackBall1, ChartTrackballBehavior trackBall2)
1514
{
1615
var pointsInfo = e.TrackballPointsInfo;
1716
if (pointsInfo.Count > 0)
1817
{
1918
var item = (DataModel)pointsInfo[0].DataItem;
2019

2120
// Convert chart point to screen point
22-
float xPoint = firstChart.ValueToPoint(firstChart.XAxes[0], item.Date.ToOADate());
23-
float yPoint = firstChart.ValueToPoint(firstChart.YAxes[0], item.Value);
21+
float xPoint = primaryChart.ValueToPoint(primaryChart.XAxes[0], item.Date.ToOADate());
22+
float yPoint = primaryChart.ValueToPoint(primaryChart.YAxes[0], item.Value);
2423

25-
// Show the trackball markers on chart 2 and 3 at the calculated screen positions
24+
// Show the trackball markers on the other charts
25+
trackBall1.Show(xPoint, yPoint);
2626
trackBall2.Show(xPoint, yPoint);
27-
trackBall3.Show(xPoint, yPoint);
2827
}
2928
}
3029

31-
// second chart
32-
private void secondChart_TrackballCreated(object sender, TrackballEventArgs e)
30+
private void firstChart_TrackballCreated(object sender, TrackballEventArgs e)
3331
{
34-
var pointsInfo = e.TrackballPointsInfo;
35-
if (pointsInfo.Count > 0)
36-
{
37-
var item = (DataModel)pointsInfo[0].DataItem;
38-
39-
// Convert chart point to screen point
40-
float xPoint = secondChart.ValueToPoint(secondChart.XAxes[0], item.Date.ToOADate());
41-
float yPoint = secondChart.ValueToPoint(secondChart.YAxes[0], item.Value);
32+
HandleTrackballCreated(sender, e, firstChart, trackBall2, trackBall3);
33+
}
4234

43-
// Show the trackball markers on chart 1 and 3 at the calculated screen positions
44-
trackBall1.Show(xPoint, yPoint);
45-
trackBall3.Show(xPoint, yPoint);
46-
}
35+
private void secondChart_TrackballCreated(object sender, TrackballEventArgs e)
36+
{
37+
HandleTrackballCreated(sender, e, secondChart, trackBall1, trackBall3);
4738
}
4839

49-
// third chart
5040
private void thirdChart_TrackballCreated(object sender, TrackballEventArgs e)
5141
{
52-
var pointsInfo = e.TrackballPointsInfo;
53-
if (pointsInfo.Count > 0)
54-
{
55-
var item = (DataModel)pointsInfo[0].DataItem;
56-
57-
// Convert chart point to screen point
58-
float xPoint = thirdChart.ValueToPoint(thirdChart.XAxes[0], item.Date.ToOADate());
59-
float yPoint = thirdChart.ValueToPoint(thirdChart.YAxes[0], item.Value);
60-
61-
// Show the trackball markers on chart 1 and 2 at the calculated screen positions
62-
trackBall1.Show(xPoint, yPoint);
63-
trackBall2.Show(xPoint, yPoint);
64-
}
42+
HandleTrackballCreated(sender, e, thirdChart, trackBall1, trackBall2);
6543
}
6644
}
6745
}

0 commit comments

Comments
 (0)