Skip to content

Commit fd575e0

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #2 from SyncfusionExamples/876723-How-to-highlight-selected-data-points-by-using-GetDataPoints-method-in-.NET-MAUI-Cartesian-Charts
MAUI-876723 How to highlight selected data points by using get data points method in .net ma UI cartesian charts
2 parents ae3e6ae + 8df8214 commit fd575e0

File tree

4 files changed

+209
-16
lines changed

4 files changed

+209
-16
lines changed

‎GetDataPointsSample/AppShell.xaml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
55
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
66
xmlns:local="clr-namespace:GetDataPointsSample"
7-
Shell.FlyoutBehavior="Disabled"
7+
Shell.FlyoutBehavior="Flyout"
88
Title="GetDataPointsSample">
99

10-
<ShellContent
11-
Title="Home"
12-
ContentTemplate="{DataTemplate local:MainPage}"
13-
Route="MainPage" />
10+
<ShellContent Title="Custom Drawing"
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
<ShellContent Title="Selection Zoom Event"
15+
ContentTemplate="{DataTemplate local:SelectionZoomEvent}"
16+
Route="SelectionZoomEvent" />
1417

1518
</Shell>

‎GetDataPointsSample/SelectionZoomEvent.xaml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:model="clr-namespace:GetDataPointsSample"
6+
x:Class="GetDataPointsSample.SelectionZoomEvent"
7+
Title="SelectionZoomEvent">
8+
9+
10+
<ContentPage.BindingContext>
11+
<model:ScatterSeriesViewModel x:Name="viewModel"/>
12+
</ContentPage.BindingContext>
13+
14+
<chart:SfCartesianChart HorizontalOptions="Fill" VerticalOptions="Fill"
15+
x:Name="cartesianChart"
16+
SelectionZoomDelta="Chart_SelectionZoomDelta"
17+
SelectionZoomEnd="Chart_SelectionZoomEnd">
18+
19+
<chart:SfCartesianChart.ZoomPanBehavior>
20+
<chart:ChartZoomPanBehavior EnableSelectionZooming="True"/>
21+
</chart:SfCartesianChart.ZoomPanBehavior>
22+
23+
<chart:SfCartesianChart.XAxes>
24+
<chart:NumericalAxis x:Name="primaryAxis" Minimum="100" Maximum="220"
25+
Interval="20"/>
26+
</chart:SfCartesianChart.XAxes>
27+
28+
<chart:SfCartesianChart.YAxes>
29+
<chart:NumericalAxis x:Name="secondaryAxis" Minimum="50" Maximum="80" Interval="5"/>
30+
</chart:SfCartesianChart.YAxes>
31+
32+
<chart:SfCartesianChart.Series>
33+
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"
34+
Opacity="0.8" Fill="#FE7A36"
35+
PointWidth="8"
36+
PointHeight="8">
37+
<chart:ScatterSeries.SelectionBehavior>
38+
<chart:DataPointSelectionBehavior Type="Multiple" SelectionBrush="#3652AD"/>
39+
</chart:ScatterSeries.SelectionBehavior>
40+
</chart:ScatterSeries>
41+
</chart:SfCartesianChart.Series>
42+
43+
</chart:SfCartesianChart>
44+
45+
</ContentPage>

‎GetDataPointsSample/SelectionZoomEvent.xaml.cs‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
using Syncfusion.Maui.Charts;
2+
3+
namespace GetDataPointsSample;
4+
5+
public partial class SelectionZoomEvent : ContentPage
6+
{
7+
public SelectionZoomEvent()
8+
{
9+
InitializeComponent();
10+
}
11+
12+
private void Chart_SelectionZoomDelta(object sender, ChartSelectionZoomDeltaEventArgs e)
13+
{
14+
var selectedIndexes = new List<int>();
15+
16+
foreach (var series in cartesianChart.Series)
17+
{
18+
if (series is ScatterSeries scatterSeries)
19+
{
20+
var rect = new Rect(e.ZoomRect.X - cartesianChart.SeriesBounds.Left, e.ZoomRect.Y, e.ZoomRect.Width, e.ZoomRect.Height);
21+
var dataPoints = scatterSeries.GetDataPoints(rect);
22+
23+
if (dataPoints != null && viewModel != null)
24+
{
25+
for (int i = 0; i < viewModel.Data.Count; i++)
26+
{
27+
if (dataPoints.Contains(viewModel.Data[i]))
28+
selectedIndexes.Add(i);
29+
}
30+
scatterSeries.SelectionBehavior.SelectedIndexes = selectedIndexes;
31+
}
32+
}
33+
}
34+
}
35+
36+
private void Chart_SelectionZoomEnd(object sender, ChartSelectionZoomEventArgs e)
37+
{
38+
primaryAxis.ZoomFactor = 1;
39+
primaryAxis.ZoomPosition = 0;
40+
secondaryAxis.ZoomFactor = 1;
41+
secondaryAxis.ZoomPosition = 0;
42+
}
43+
}

‎README.md‎

Lines changed: 113 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
# How-to-highlight-selected-data-points-by-using-GetDataPoints-method-in-.NET-MAUI-Cartesian-Charts
2-
This article in the Syncfusion Knowledge Base explains how to highlight selected data points by using GetDataPoints method in .NET MAUI Cartesian Charts
1+
# How to highlight selected data points by using GetDataPoints method in .NET MAUI Cartesian Charts
32

4-
The [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) offers various customization options for improved data visualization. The [Cartesian series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html) provides the [GetDataPoints]() method to retrieve the data points that fall within a specified rectangular area or within defined X and Y coordinate ranges. This article will guide you through the process of highlighting selected data points using the `GetDataPoints` method.
3+
The [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) provides customization options for enhancing data visualization. One of its key features is the ability to interact with data through the [GetDataPoints](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_GetDataPoints_Microsoft_Maui_Graphics_Rect_) method of the [Cartesian series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html). This method allows retrieval of data points that lie within a specified rectangular area or within defined X and Y coordinate ranges. This article aims to demonstrate how to highlight selected data points using the **GetDataPoints** method, detailing two effective methods:
4+
5+
### **Method 1: Custom Rectangular Area Selection**
6+
This way handling touch points to draw a custom rectangle and highlight data points that fall within it:
57

68
**Step 1: Create the Extension Class**
9+
710
Create an extension class inherited from the [ChartInteractiveBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartInteractiveBehavior.html) class to handle the custom touch interactions on the chart. Define fields for storing the starting and ending coordinates of the touch and a flag to indicate when the rectangle should be shown. Implement the IDrawable interface to draw the selection rectangle. Override the [OnTouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBehavior.html#Syncfusion_Maui_Charts_ChartBehavior_OnTouchDown_Syncfusion_Maui_Charts_ChartBase_System_Single_System_Single_), [OnTouchMove](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBehavior.html#Syncfusion_Maui_Charts_ChartBehavior_OnTouchMove_Syncfusion_Maui_Charts_ChartBase_System_Single_System_Single_), and [OnTouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBehavior.html#Syncfusion_Maui_Charts_ChartBehavior_OnTouchUp_Syncfusion_Maui_Charts_ChartBase_System_Single_System_Single_) methods to manage the drawing and selection process.
811

9-
**OnTouchDown Method :**
10-
Capture the initial touch point when the user touches down on the chart.
12+
**OnTouchDown Method :** Capture the initial touch point when the user touches down on the chart.
1113

12-
**OnTouchMove Method :**
13-
Update the end coordinates of the selection rectangle dynamically.
14+
**OnTouchMove Method :** Update the end coordinates of the selection rectangle dynamically.
1415

1516
**OnTouchDown Method :**
16-
Finalize the rectangle dimensions by utilizing the [SeriesBounds](), which provides the actual rendering bounds of chart series. Then, get the data points that fall inside the rectangle using the `GetDataPoints` method. Update the indexes of these data points to the [SelectedIndexes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html?tabs=tabid-5%2Ctabid-7%2Ctabid-3%2Ctabid-1#Syncfusion_Maui_Charts_ChartSelectionBehavior_SelectedIndexes) property of [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html).
17+
Finalize the rectangle dimensions by utilizing the [SeriesBounds](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_SeriesBounds), which provides the actual rendering bounds of chart series. Then, get the data points that fall inside the rectangle using the `GetDataPoints` method. Update the indexes of these data points to the [SelectedIndexes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html?tabs=tabid-5%2Ctabid-7%2Ctabid-3%2Ctabid-1#Syncfusion_Maui_Charts_ChartSelectionBehavior_SelectedIndexes) property of [ChartSelectionBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html).
1718

1819
Here's the complete code for the custom interaction class:
1920

@@ -88,10 +89,13 @@ public class ChartInteractionExt : ChartInteractiveBehavior, IDrawable, INotifyP
8889
}
8990
}
9091
```
92+
9193
**Step 2: Assign the Extension Class to the Chart**
94+
9295
Assign the ChartInteractionExt class to the [InteractiveBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_InteractiveBehavior) property of the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html). Define the GraphicsView in the [PlotAreaBackgroundView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartBase.html#Syncfusion_Maui_Charts_ChartBase_PlotAreaBackgroundView) to handle custom drawing.
96+
9397
**[XAML]**
94-
```
98+
```html
9599
<chart:SfCartesianChart>
96100
<chart:SfCartesianChart.PlotAreaBackgroundView>
97101
<GraphicsView Drawable="{x:Reference InteractionExt}" x:Name="graphicsView" InputTransparent="True" ZIndex="1"/>
@@ -102,7 +106,7 @@ Assign the ChartInteractionExt class to the [InteractiveBehavior](https://help.s
102106
</chart:SfCartesianChart.InteractiveBehavior>
103107
. . .
104108
<chart:SfCartesianChart.Series>
105-
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="Value" YBindingPath="Size" PointWidth="8" Opacity="0.8" Fill="#FE7A36" PointHeight="8" >
109+
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" PointWidth="8" Opacity="0.8" Fill="#FE7A36" PointHeight="8" >
106110
<chart:ScatterSeries.SelectionBehavior>
107111
<chart:DataPointSelectionBehavior Type="Multiple" SelectionBrush="#3652AD"/>
108112
</chart:ScatterSeries.SelectionBehavior>
@@ -111,5 +115,103 @@ Assign the ChartInteractionExt class to the [InteractiveBehavior](https://help.s
111115
</chart:SfCartesianChart.Series>
112116
</chart:SfCartesianChart>
113117
```
118+
114119
**Output**
115-
![GetDataPoints.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzNzA2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.XB4_s1DqiYHD1jFJFSKiOOTi8cVwvYFpRjffhWMXnGM)
120+
![GetDataPoints.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzNzA2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.XB4_s1DqiYHD1jFJFSKiOOTi8cVwvYFpRjffhWMXnGM)
121+
122+
### **Method 2: Selection Zoom Events**
123+
This method involves handling selection zoom events to draw a custom rectangle and highlight data points that fall within it:
124+
#### Zoom and Pan Events:
125+
* **[ZoomStart:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomStart)** Triggered when the user initiates a zoom action. Can be canceled to interrupt the action.
126+
* **[ZoomDelta:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomDelta)** Activated during the zooming process and can be canceled.
127+
* **[ZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomEnd)** Triggered when the zooming action finishes.
128+
* **[SelectionZoomStart:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomStart)** Occurs when the user begins box selection zooming.
129+
* **[SelectionZoomDelta:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomDelta)** Activated during the process of selecting a region for zooming and can be canceled.
130+
* **[SelectionZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomEnd)** Triggered after the selection zooming ends.
131+
* **[Scroll:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Scroll)** Triggered during panning and can be canceled.
132+
* **[ResetZoom:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ResetZoom)** Triggered after the chart is reset by double-tapping.
133+
134+
**Step 1: Initialize Selection Zoom Events**
135+
136+
Initialize the [SelectionZoomDelta](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomDelta) and [SelectionZoomEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomEnd) events in the [SfCartesianChart.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html) Initialize the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomPanBehavior) and enable selection zoom using the [EnableSelectionZooming](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html#Syncfusion_Maui_Charts_ChartZoomPanBehavior_EnableSelectionZooming) API available in [ChartZoomPanBehavior.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartZoomPanBehavior.html)
137+
138+
```html
139+
<chart:SfCartesianChart x:Name="cartesianChart"
140+
SelectionZoomDelta="Chart_SelectionZoomDelta"
141+
SelectionZoomEnd="Chart_SelectionZoomEnd">
142+
143+
<chart:SfCartesianChart.ZoomPanBehavior>
144+
<chart:ChartZoomPanBehavior EnableSelectionZooming="True" />
145+
</chart:SfCartesianChart.ZoomPanBehavior>
146+
147+
<chart:SfCartesianChart.XAxes>
148+
<chart:NumericalAxis x:Name="primaryAxis" />
149+
</chart:SfCartesianChart.XAxes>
150+
151+
<chart:SfCartesianChart.YAxes>
152+
<chart:NumericalAxis x:Name="secondaryAxis" />
153+
</chart:SfCartesianChart.YAxes>
154+
155+
<chart:SfCartesianChart.Series>
156+
<chart:ScatterSeries ItemsSource="{Binding Data}"
157+
XBindingPath="XValue"
158+
YBindingPath="YValue">
159+
<chart:ScatterSeries.SelectionBehavior>
160+
<chart:DataPointSelectionBehavio
161+
Type="Multiple"
162+
SelectionBrush="#3652AD"/>
163+
</chart:ScatterSeries.SelectionBehavior>
164+
</chart:ScatterSeries>
165+
</chart:SfCartesianChart.Series>
166+
167+
</chart:SfCartesianChart>
168+
```
169+
**Step 2: Handle the interaction**
170+
171+
The [SelectionZoomDelta](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomDelta) event is activated during the process of selecting a region in the chart area. Inside the event handler, retrieve the selecting area rectangle values. Then, use the [GetDataPoints](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CartesianSeries.html#Syncfusion_Maui_Charts_CartesianSeries_GetDataPoints_Microsoft_Maui_Graphics_Rect_) method to retrieve the data points that fall inside the rectangle. Update the indexes of these data points in the [SelectedIndexes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html#Syncfusion_Maui_Charts_ChartSelectionBehavior_SelectedIndex) property of [ChartSelectionBehavior.](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSelectionBehavior.html)
172+
173+
```csharp
174+
private void Chart_SelectionZoomDelta(object sender, ChartSelectionZoomDeltaEventArgs e)
175+
{
176+
var selectedIndexes = new List<int>();
177+
178+
foreach (var series in cartesianChart.Series)
179+
{
180+
if (series is ScatterSeries scatterSeries)
181+
{
182+
var rect = new Rect(e.ZoomRect.X - cartesianChart.SeriesBounds.Left, e.ZoomRect.Y, e.ZoomRect.Width, e.ZoomRect.Height);
183+
var dataPoints = scatterSeries.GetDataPoints(rect);
184+
185+
if (dataPoints != null && viewModel != null)
186+
{
187+
for (int i = 0; i < viewModel.Data.Count; i++)
188+
{
189+
if (dataPoints.Contains(viewModel.Data[i]))
190+
selectedIndexes.Add(i);
191+
}
192+
scatterSeries.SelectionBehavior.SelectedIndexes = selectedIndexes;
193+
}
194+
}
195+
}
196+
}
197+
```
198+
**Step 3: Cancel the zoom**
199+
200+
The [SelectionZoomEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomEnd) event is invoked when selecting a region from the chart area. Inside the event handler, set the [ZoomFactor](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomFactor) to 1 and the [ZoomPosition](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ZoomPosition) to 0. This helps cancel the zoom.
201+
202+
```csharp
203+
private void Chart_SelectionZoomEnd(object sender, ChartSelectionZoomEventArgs e)
204+
{
205+
primaryAxis.ZoomFactor = 1;
206+
primaryAxis.ZoomPosition = 0;
207+
secondaryAxis.ZoomFactor = 1;
208+
secondaryAxis.ZoomPosition = 0;
209+
}
210+
```
211+
![Selection_zoom.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI0ODUzIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.mcnMg6jPkXsxDZqv152Z1mzVSk-CI-62kO_T0Alylsk)
212+
213+
## Troubleshooting
214+
215+
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.
216+
217+
For a step by step procedure, refer to the [BenchMark KB article](https://support.syncfusion.com/kb/article/16223/how-to-add-a-benchmark-line-to-thenet-maui-cartesian-chart?isInternalRefresh=False).

0 commit comments

Comments
 (0)