Skip to content

Commit 7c11860

Browse files
authored
Update README.md
1 parent d0ee36e commit 7c11860

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

README.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ This article offers a comprehensive guide to creating a Parallel Coordinate Char
33

44
You can achieve the parallel coordinates chart using the [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts) by incorporating multiple spline or line series and utilizing axis crossing support to arrange the chart axes in parallel.
55

6-
A **Parallel Coordinate Chart** for visualizing multidimensional data, where each axis represents a variable, and data points are displayed as lines connecting these parallel axes. This guide walks you through the steps to implement such a visualization effectively in .NET MAUI.
6+
A **Parallel Coordinate Chart** for visualizing multidimensional data, where each axis represents a variable, and data points are displayed as lines or curves connecting these parallel axes. This guide walks you through the steps to implement such a visualization effectively in .NET MAUI.
77

88
The following steps and code examples illustrate how to create the parallel coordinates chart using [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html).
99

10-
**Step 1:** Create a custom parallel coordinates chart by inheriting from the SfCartesianChart class and initializing the chart setup through the GenerateChart method.
10+
**Step 1:** Create a custom parallel coordinates chart by inheriting from the [SfCartesianChart](https://help.syncfusion.com/maui/cartesian-charts/getting-started) class and initializing the chart setup through the GenerateChart method.
1111

1212
**C#**
13+
1314
```csharp
1415
public class ParallelCoordinateChart:SfCartesianChart
1516
{
@@ -20,7 +21,6 @@ public class ParallelCoordinateChart:SfCartesianChart
2021
}
2122
```
2223

23-
2424
**Step 2:** This method manages the complete chart setup, including the configuration of axes, series, and visual styling elements such as color palettes.
2525

2626
**C#**
@@ -55,10 +55,10 @@ private void GenerateChart()
5555
}
5656
```
5757

58-
5958
**Step 3:** Generate the X-axis for the chart and create a list of Y-axes, each representing a different variable from the view model data source.
6059

6160
**C#**
61+
6262
```csharp
6363
private NumericalAxis GenerateXAxes()
6464
{
@@ -179,8 +179,7 @@ private List<NumericalAxis> GenerateYAxesList()
179179
}
180180
```
181181

182-
183-
**Step 4:** Generates and returns a list of series to visualize data points across the parallel axes, normalizes raw data values to a standardized scale, and maps car model names to their corresponding indices on the X-axis.
182+
**Step 4:** The GenerateSeries method creates a list of [SplineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SplineSeries.html) to visualize multidimensional data across parallel axes. It normalizes raw data values to a uniform scale (0–4) using the Normalize method and maps car model names to numerical indices with CarModelIndex method, ensuring consistent and accurate representation of data.
184183

185184
**C#**
186185

@@ -291,20 +290,21 @@ public class ViewModel
291290
}
292291
```
293292

294-
295293
**Step 6:** The Content page contains the ParallelCoordinateChart control, which renders the parallel coordinate chart on the page.
296294

297295
**XAML**
298296

299297
```xml
300298
<ContentPage.Content>
301-
<local:ParallelCoordinateChart/>
299+
<Border StrokeShape="RoundRectangle 10" Stroke="Black" Margin="5">
300+
<local:ParallelCoordinateChart Margin="10"/>
301+
</Border>
302302
</ContentPage.Content>
303303
```
304304

305305
**Output:**
306306

307-
![ParallelCoordinateChart1](https://github.com/user-attachments/assets/1625c2c0-7d14-420d-b591-5fb29426b90d)
307+
![ParallelCoordinateChart](https://github.com/user-attachments/assets/5f199abd-bd24-4d8e-ab36-2a49b059c7fa)
308308

309309
**Troubleshooting**
310310

0 commit comments

Comments
 (0)