Skip to content

Updated the code snippet and README file #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Saravanan-Madhesh merged 4 commits into from
Apr 1, 2024
Merged

Updated the code snippet and README file #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e25e7c
Updated the xaml code
Mar 28, 2024
5ce732b
Prepare-sample-for-polar-chart
Mar 28, 2024
4271e75
Update README.md
SaiyathAliFathima Mar 28, 2024
a6a8434
Updated the code snippet
snehakPV Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions Polar_chart_sample/PolarChartSample/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@
</chart:SfPolarChart.PrimaryAxis>

<chart:SfPolarChart.SecondaryAxis>
<chart:NumericalAxis/>
<chart:NumericalAxis Maximum="100"/>
</chart:SfPolarChart.SecondaryAxis>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
YBindingPath="Tree" Label="Tree" EnableTooltip="True" ShowDataLabels="True"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
YBindingPath="Weed" Label="Weed" EnableTooltip="True" ShowDataLabels="True"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction"
YBindingPath="Flower" Label="Flower" EnableTooltip="True" ShowDataLabels="True"/>
</chart:SfPolarChart>

Expand Down
65 changes: 36 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ chart.SecondaryAxis = secondaryAxis;

## Populate Chart with data

To create a polar chart, you can add a [PolarAreaSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PolarAreaSeries.html?tabs=tabid-1%2Ctabid-4) to the polar chart [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_Series) property of the chart, and then bind the `PlantData` property of the above `ViewModel` to the `PolarAreaSeries.ItemsSource` as follows.
To create a polar chart, you can add a [PolarLineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PolarLineSeries.html?tabs=tabid-1%2Ctabid-4) to the polar chart [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfPolarChart.html#Syncfusion_Maui_Charts_SfPolarChart_Series) property of the chart, and then bind the `PlantData` property of the above `ViewModel` to the `PolarLineSeries.ItemsSource` as follows.

* In order to plot the series, the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath) and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath) properties need to be configured correctly. These properties allow the chart to retrieve values from the corresponding properties in the data model.

Expand All @@ -175,15 +175,15 @@ To create a polar chart, you can add a [PolarAreaSeries](https://help.syncfusion
</chart:SfPolarChart.PrimaryAxis>

<chart:SfPolarChart.SecondaryAxis>
<chart:NumericalAxis>
<chart:NumericalAxis Maximum="100">
</chart:NumericalAxis>
</chart:SfPolarChart.SecondaryAxis>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree" />
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree" />

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed" />
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed" />

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower" />
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower" />
</chart:SfPolarChart>
```

Expand All @@ -196,21 +196,24 @@ CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;

//Initializing secondary Axis
NumericalAxis secondaryAxis = new NumericalAxis();
NumericalAxis secondaryAxis = new NumericalAxis()
{
Maximum = 100,
};
chart.SecondaryAxis = secondaryAxis;

//Initialize the series
PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";

PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Weed";

PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Flower";
Expand Down Expand Up @@ -252,16 +255,16 @@ The [ShowDataLabels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.
```xaml
<chart:SfPolarChart>
. . .
<chart:PolarAreaSeries ShowDataLabels="True">
</chart:PolarAreaSeries>
<chart:PolarLineSeries ShowDataLabels="True">
</chart:PolarLineSeries >
</chart:SfPolarChart>
```

###### C#
```C#
SfPolarChart chart = new SfPolarChart()
. . .
PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ShowDataLabels = true;
chart.Series.Add(series);
```
Expand Down Expand Up @@ -293,32 +296,32 @@ chart.Legend = new ChartLegend();
```xaml
<chart:SfPolarChart>
. . .
<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree"
Label="Tree"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed"
Label="Weed"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower"
Label="Flower"/>
</chart:SfPolarChart>
```

###### C#
```C#
PolarAreaSeries series = new PolarAreaSeries ();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";
series.Label = "Tree";

PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Weed";
series.Label = "Weed";

PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Flower";
Expand All @@ -333,14 +336,14 @@ Tooltips are used to display information about a segment when a user hovers over
```xaml
<chart:SfPolarChart>
...
<chart:PolarAreaSeries EnableTooltip="True"/>
<chart:PolarLineSeries EnableTooltip="True"/>
...
</chart:SfPolarChart>
```

###### C#
```C#
PolarAreaSeries series = new PolarAreaSeries();
PolarLineSeries series = new PolarLineSeries();
series.EnableTooltip = true;
```

Expand Down Expand Up @@ -375,16 +378,16 @@ The following code example gives you the complete code of above configurations.
</chart:SfPolarChart.PrimaryAxis>

<chart:SfPolarChart.SecondaryAxis>
<chart:NumericalAxis/>
<chart:NumericalAxis Maximum="100"/>
</chart:SfPolarChart.SecondaryAxis>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree"
Label="Tree" EnableTooltip="True" ShowDataLabels="True"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed"
Label="Weed" EnableTooltip="True" ShowDataLabels="True"/>

<chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower"
<chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower"
Label="Flower" EnableTooltip="True" ShowDataLabels="True"/>
</chart:SfPolarChart>
</Grid>
Expand Down Expand Up @@ -413,10 +416,13 @@ The following code example gives you the complete code of above configurations.
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();
NumericalAxis secondaryAxis = new NumericalAxis()
{
Maximum = 100,
};
chart.SecondaryAxis = secondaryAxis;

PolarAreaSeries series = new PolarAreaSeries()
PolarLineSeries series = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
XBindingPath = "Direction",
Expand All @@ -426,7 +432,7 @@ The following code example gives you the complete code of above configurations.
ShowDataLabels="True"
};

PolarAreaSeries series = new PolarAreaSeries()
PolarLineSeries series = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
XBindingPath = "Direction",
Expand All @@ -436,7 +442,7 @@ The following code example gives you the complete code of above configurations.
ShowDataLabels="True"
};

PolarAreaSeries series = new PolarAreaSeries()
PolarLineSeries series = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
XBindingPath = "Direction",
Expand All @@ -455,4 +461,5 @@ The following code example gives you the complete code of above configurations.

The following chart is created as a result of the previous codes.

![Getting started for .NET MAUI Chart](Getting_start_images/MAUI_polar_chart.png)
<img width="554" alt="polar-README" src="https://github.com/SyncfusionExamples/Creating-a-Getting-Started-application-for-NET-MAUI-Polar-Chart/assets/103025761/01e0c860-be28-4051-b9cb-1d87a4532f07">