Skip to content

Commit e2439ef

Browse files
Sowndharya1911Sowndharya1911
committed
Update read me
1 parent 5944924 commit e2439ef

File tree

1 file changed

+107
-11
lines changed

1 file changed

+107
-11
lines changed

‎README.md‎

Lines changed: 107 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
# 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
2+
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:
33

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.
4+
### **Method 1: Custom Rectangular Area Selection**
5+
This way handling touch points to draw a custom rectangle and highlight data points that fall within it:
56

67
**Step 1: Create the Extension Class**
78
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.
89

9-
**OnTouchDown Method :**
10-
Capture the initial touch point when the user touches down on the chart.
11-
12-
**OnTouchMove Method :**
13-
Update the end coordinates of the selection rectangle dynamically.
10+
**OnTouchDown Method :** Capture the initial touch point when the user touches down on the chart.
11+
**OnTouchMove Method :** Update the end coordinates of the selection rectangle dynamically.
1412

1513
**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).
14+
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).
1715

1816
Here's the complete code for the custom interaction class:
1917

@@ -88,10 +86,11 @@ public class ChartInteractionExt : ChartInteractiveBehavior, IDrawable, INotifyP
8886
}
8987
}
9088
```
89+
9190
**Step 2: Assign the Extension Class to the Chart**
9291
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.
9392
**[XAML]**
94-
```
93+
```html
9594
<chart:SfCartesianChart>
9695
<chart:SfCartesianChart.PlotAreaBackgroundView>
9796
<GraphicsView Drawable="{x:Reference InteractionExt}" x:Name="graphicsView" InputTransparent="True" ZIndex="1"/>
@@ -102,7 +101,7 @@ Assign the ChartInteractionExt class to the [InteractiveBehavior](https://help.s
102101
</chart:SfCartesianChart.InteractiveBehavior>
103102
. . .
104103
<chart:SfCartesianChart.Series>
105-
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="Value" YBindingPath="Size" PointWidth="8" Opacity="0.8" Fill="#FE7A36" PointHeight="8" >
104+
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" PointWidth="8" Opacity="0.8" Fill="#FE7A36" PointHeight="8" >
106105
<chart:ScatterSeries.SelectionBehavior>
107106
<chart:DataPointSelectionBehavior Type="Multiple" SelectionBrush="#3652AD"/>
108107
</chart:ScatterSeries.SelectionBehavior>
@@ -111,5 +110,102 @@ Assign the ChartInteractionExt class to the [InteractiveBehavior](https://help.s
111110
</chart:SfCartesianChart.Series>
112111
</chart:SfCartesianChart>
113112
```
113+
114114
**Output**
115-
![GetDataPoints.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzNzA2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.XB4_s1DqiYHD1jFJFSKiOOTi8cVwvYFpRjffhWMXnGM)
115+
![GetDataPoints.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIzNzA2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.XB4_s1DqiYHD1jFJFSKiOOTi8cVwvYFpRjffhWMXnGM)
116+
117+
### **Method 2: Selection Zoom Events**
118+
This method involves handling selection zoom events to draw a custom rectangle and highlight data points that fall within it:
119+
#### Zoom and Pan Events:
120+
**[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.
121+
**[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.
122+
**[ZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_ZoomEnd)** Triggered when the zooming action finishes.
123+
**[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.
124+
**[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.
125+
**[SelectionZoomEnd:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_SelectionZoomEnd)** Triggered after the selection zooming ends.
126+
**[Scroll:](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Scroll)** Triggered during panning and can be canceled.
127+
128+
**Step 1: Initialize Selection Zoom Events**
129+
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)
130+
131+
```html
132+
<chart:SfCartesianChart
133+
SelectionZoomDelta="Chart_SelectionZoomDelta"
134+
SelectionZoomEnd="Chart_SelectionZoomEnd">
135+
136+
<chart:SfCartesianChart.ZoomPanBehavior>
137+
<chart:ChartZoomPanBehavior EnableSelectionZooming="True" />
138+
</chart:SfCartesianChart.ZoomPanBehavior>
139+
140+
<chart:SfCartesianChart.XAxes>
141+
<chart:NumericalAxis x:Name="primaryAxis" />
142+
</chart:SfCartesianChart.XAxes>
143+
144+
<chart:SfCartesianChart.YAxes>
145+
<chart:NumericalAxis x:Name="secondaryAxis" />
146+
</chart:SfCartesianChart.YAxes>
147+
148+
<chart:SfCartesianChart.Series>
149+
<chart:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="XValue"
150+
YBindingPath="YValue">
151+
<chart:ScatterSeries.SelectionBehavior>
152+
<chart:DataPointSelectionBehavio
153+
Type="Multiple"
154+
SelectionBrush="#3652AD"/>
155+
</chart:ScatterSeries.SelectionBehavior>
156+
</chart:ScatterSeries>
157+
</chart:SfCartesianChart.Series>
158+
159+
</chart:SfCartesianChart>
160+
```
161+
**Step 2: Handle the interaction**
162+
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)
163+
164+
165+
```csharp
166+
private void Chart_SelectionZoomDelta(object sender, ChartSelectionZoomDeltaEventArgs e)
167+
{
168+
var selectedIndexes = new List<int>();
169+
170+
if (cartesianChart is SfCartesianChart)
171+
{
172+
foreach (var series in cartesianChart.Series)
173+
{
174+
if (series is ScatterSeries scatterSeries)
175+
{
176+
177+
var rect = new Rect(e.ZoomRect.X - cartesianChart.SeriesBounds.Left, e.ZoomRect.Y, e.ZoomRect.Width, e.ZoomRect.Height);
178+
var dataPoints = scatterSeries.GetDataPoints(rect);
179+
180+
if (dataPoints != null && viewModel != null)
181+
{
182+
for (int i = 0; i < viewModel.Data.Count; i++)
183+
{
184+
if (dataPoints.Contains(viewModel.Data[i]))
185+
selectedIndexes.Add(i);
186+
}
187+
scatterSeries.SelectionBehavior.SelectedIndexes = selectedIndexes;
188+
}
189+
}
190+
}
191+
}
192+
193+
}
194+
```
195+
196+
**Step 3: Cancel the zoom**
197+
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.
198+
199+
200+
```csharp
201+
private void Chart_SelectionZoomEnd(object sender, ChartSelectionZoomEventArgs e)
202+
{
203+
primaryAxis.ZoomFactor = 1;
204+
primaryAxis.ZoomPosition = 0;
205+
secondaryAxis.ZoomFactor = 1;
206+
secondaryAxis.ZoomPosition = 0;
207+
}
208+
```
209+
210+
211+
![Selection_zoom.gif](https://support.syncfusion.com/kb/agent/attachment/article/16174/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI0ODUzIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.mcnMg6jPkXsxDZqv152Z1mzVSk-CI-62kO_T0Alylsk)

0 commit comments

Comments
 (0)