Skip to content

917099-Updated Getting Started Polar Chart MAUI sample #6

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
merged 1 commit into from
Nov 1, 2024
Merged

917099-Updated Getting Started Polar Chart MAUI sample #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion Polar_chart_sample/PolarChartSample/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
x:Class="PolarChartSample.MainPage">

<ContentPage.BindingContext>
<model:ViewModel/>
<model:PlantViewModel/>
</ContentPage.BindingContext>

<chart:SfPolarChart>
Expand Down
2 changes: 1 addition & 1 deletion Polar_chart_sample/PolarChartSample/Model.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

namespace PolarChartSample
{
public class Model
public class PlantModel
{
public string? Direction { get; set; }
public double Tree { get; set; }
Expand Down
24 changes: 12 additions & 12 deletions Polar_chart_sample/PolarChartSample/ViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@

namespace PolarChartSample
{
public class ViewModel
public class PlantViewModel
{
public ObservableCollection<Model> PlantDetails { get; set; }
public ViewModel()
public ObservableCollection<PlantModel> PlantDetails { get; set; }
public PlantViewModel()
{
PlantDetails = new ObservableCollection<Model>()
PlantDetails = new ObservableCollection<PlantModel>()
{
new Model(){ Direction = "North", Tree = 80, Flower = 42, Weed = 63},
new Model(){ Direction = "NorthEast", Tree = 85, Flower = 40, Weed = 70},
new Model(){ Direction = "East", Tree = 78 , Flower = 47, Weed = 65},
new Model(){ Direction = "SouthEast", Tree = 90 , Flower = 40, Weed = 70},
new Model(){ Direction = "South", Tree = 78 , Flower = 27, Weed = 47},
new Model(){ Direction = "SouthWest", Tree = 83 , Flower = 45, Weed = 65},
new Model(){ Direction = "West", Tree = 79 , Flower = 40, Weed = 58},
new Model(){ Direction = "NorthWest", Tree = 88 , Flower = 38, Weed = 73}
new PlantModel(){ Direction = "North", Tree = 80, Flower = 42, Weed = 63},
new PlantModel(){ Direction = "NorthEast", Tree = 85, Flower = 40, Weed = 70},
new PlantModel(){ Direction = "East", Tree = 78 , Flower = 47, Weed = 65},
new PlantModel(){ Direction = "SouthEast", Tree = 90 , Flower = 40, Weed = 70},
new PlantModel(){ Direction = "South", Tree = 78 , Flower = 27, Weed = 47},
new PlantModel(){ Direction = "SouthWest", Tree = 83 , Flower = 45, Weed = 65},
new PlantModel(){ Direction = "West", Tree = 79 , Flower = 40, Weed = 58},
new PlantModel(){ Direction = "NorthWest", Tree = 88 , Flower = 38, Weed = 73}
};
}
}
Expand Down
58 changes: 29 additions & 29 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Now, let us define a simple data model that represents a data point on the chart

###### C#
```C#
public class PlantData
public class PlantModel
{
public string Direction { get; set; }
public double Tree { get; set; }
Expand All @@ -85,34 +85,34 @@ Now, let us define a simple data model that represents a data point on the chart
}
```

Next, create a view model class and initialize a list of `PlantData` objects as follows.
Next, create a PlantViewModel class and initialize a list of `PlantModel` objects as follows.

######
```C#
public class ViewModel
public class PlantViewModel
{
public List<PlantData> PlantDetails { get; set; }
public List<PlantModel> PlantDetails { get; set; }

public ViewModel()
public PlantViewModel()
{
PlantDetails = new List<PlantData>()
PlantDetails = new List<PlantModel>()
{
new PlantData(){ Direction = "North", Tree = 80, Flower = 42, Weed = 63},
new PlantData(){ Direction = "NorthEast", Tree = 85, Flower = 40, Weed = 70},
new PlantData(){ Direction = "East", Tree = 78 , Flower = 47, Weed = 65},
new PlantData(){ Direction = "SouthEast", Tree = 90 , Flower = 40, Weed = 70},
new PlantData(){ Direction = "South", Tree = 78 , Flower = 27, Weed = 47},
new PlantData(){ Direction = "SouthWest", Tree = 83 , Flower = 45, Weed = 65},
new PlantData(){ Direction = "West", Tree = 79 , Flower = 40, Weed = 58},
new PlantData(){ Direction = "NorthWest", Tree = 88 , Flower = 38, Weed = 73}
new PlantModel(){ Direction = "North", Tree = 80, Flower = 42, Weed = 63},
new PlantModel(){ Direction = "NorthEast", Tree = 85, Flower = 40, Weed = 70},
new PlantModel(){ Direction = "East", Tree = 78 , Flower = 47, Weed = 65},
new PlantModel(){ Direction = "SouthEast", Tree = 90 , Flower = 40, Weed = 70},
new PlantModel(){ Direction = "South", Tree = 78 , Flower = 27, Weed = 47},
new PlantModel(){ Direction = "SouthWest", Tree = 83 , Flower = 45, Weed = 65},
new PlantModel(){ Direction = "West", Tree = 79 , Flower = 40, Weed = 58},
new PlantModel(){ Direction = "NorthWest", Tree = 88 , Flower = 38, Weed = 73}
};
}
}
```

Create a `ViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from the `ViewModel` class.
Create a `PlantViewModel` instance and set it as the chart's `BindingContext`. This enables property binding from the `PlantViewModel` class.

* Add the namespace of the `ViewModel` class to your XAML page, if you prefer to set the `BindingContext` in XAML.
* Add the namespace of the `PlantViewModel` class to your XAML page, if you prefer to set the `BindingContext` in XAML.

###### Xaml
```xaml
Expand All @@ -124,14 +124,14 @@ Create a `ViewModel` instance and set it as the chart's `BindingContext`. This e
xmlns:model="clr-namespace:ChartGettingStarted">

<ContentPage.BindingContext>
<model:ViewModel></model:ViewModel>
<model:PlantViewModel/>
</ContentPage.BindingContext>
</ContentPage>
```

###### C#
```C#
this.BindingContext = new ViewModel();
this.BindingContext = new PlantViewModel();
```

## Initialize Chart axis
Expand Down Expand Up @@ -162,7 +162,7 @@ chart.SecondaryAxis = secondaryAxis;

## Populate Chart with data

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.
To create a polar chart, you can add a [PolarLineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.PolarLineSeries.html) 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 `PlantDetails` property of the above `PlantViewModel` 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 Down Expand Up @@ -204,17 +204,17 @@ chart.SecondaryAxis = secondaryAxis;

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

PolarLineSeries series2 = new PolarLineSeries();
series2.ItemsSource = (new ViewModel()).PlantDetails;
series2.ItemsSource = (new PlantViewModel()).PlantDetails;
series2.XBindingPath = "Direction";
series2.YBindingPath = "Weed";

PolarLineSeries series3 = new PolarLineSeries();
series3.ItemsSource = (new ViewModel()).PlantDetails;
series3.ItemsSource = (new PlantViewModel()).PlantDetails;
series3.XBindingPath = "Direction";
series3.YBindingPath = "Flower";

Expand Down Expand Up @@ -312,19 +312,19 @@ chart.Legend = new ChartLegend();
###### C#
```C#
PolarLineSeries series1 = new PolarLineSeries();
series1.ItemsSource = (new ViewModel()).PlantDetails;
series1.ItemsSource = (new PlantViewModel()).PlantDetails;
series1.XBindingPath = "Direction";
series1.YBindingPath = "Tree";
series1.Label = "Tree";

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

PolarLineSeries series3 = new PolarLineSeries();
series3.ItemsSource = (new ViewModel()).PlantDetails;
series3.ItemsSource = (new PlantViewModel()).PlantDetails;
series3.XBindingPath = "Direction";
series3.YBindingPath = "Flower";
series3.Label = "Flower";
Expand Down Expand Up @@ -361,7 +361,7 @@ The following code example gives you the complete code of above configurations.
xmlns:model="clr-namespace:ChartGettingStarted">

<ContentPage.BindingContext>
<model:ViewModel></model:ViewModel>
<model:PlantViewModel/>
</ContentPage.BindingContext>

<ContentPage.Content>
Expand Down Expand Up @@ -426,7 +426,7 @@ The following code example gives you the complete code of above configurations.

PolarLineSeries series1 = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
ItemsSource = (new PlantViewModel()).PlantDetails,
XBindingPath = "Direction",
YBindingPath = "Tree",
Label="Tree",
Expand All @@ -436,7 +436,7 @@ The following code example gives you the complete code of above configurations.

PolarLineSeries series2 = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
ItemsSource = (new PlantViewModel()).PlantDetails,
XBindingPath = "Direction",
YBindingPath = "Weed",
Label="Weed",
Expand All @@ -446,7 +446,7 @@ The following code example gives you the complete code of above configurations.

PolarLineSeries series3 = new PolarLineSeries()
{
ItemsSource = (new ViewModel()).PlantDetails,
ItemsSource = (new PlantViewModel()).PlantDetails,
XBindingPath = "Direction",
YBindingPath = "Flower",
Label="Flower",
Expand Down
Loading