Skip to content

Commit

Permalink
Merge pull request #3 from SyncfusionExamples/873293-Prepare-sample-f…
Browse files Browse the repository at this point in the history 
…or-polar-chart

Updated the code snippet and README file
  • Loading branch information
@Saravanan-Madhesh
Saravanan-Madhesh authored Apr 1, 2024
2 parents 0a33224 + a6a8434 commit 9d257bf
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 33 deletions.
8 changes: 4 additions & 4 deletions Polar_chart_sample/PolarChartSample/MainPage.xaml
View file
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
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">

0 comments on commit 9d257bf

Please sign in to comment.