diff --git a/Cartesian_chart_sample/CartesianChartSample/MainPage.xaml b/Cartesian_chart_sample/CartesianChartSample/MainPage.xaml
index 6be686f..bdfa606 100644
--- a/Cartesian_chart_sample/CartesianChartSample/MainPage.xaml
+++ b/Cartesian_chart_sample/CartesianChartSample/MainPage.xaml
@@ -8,7 +8,7 @@
-
+
diff --git a/Cartesian_chart_sample/CartesianChartSample/ViewModel.cs b/Cartesian_chart_sample/CartesianChartSample/ViewModel.cs
index 388d467..0b27e9c 100644
--- a/Cartesian_chart_sample/CartesianChartSample/ViewModel.cs
+++ b/Cartesian_chart_sample/CartesianChartSample/ViewModel.cs
@@ -6,23 +6,23 @@
namespace CartesianChartSample
{
- public class ViewModel
+ public class PersonViewModel
{
- public List Data { get; set; }
- public ViewModel()
+ public List Data { get; set; }
+ public PersonViewModel()
{
- Data = new List()
+ Data = new List()
{
- new Person { Name = "David", Height = 170 },
- new Person { Name = "Michael", Height = 96 },
- new Person { Name = "Steve", Height = 65 },
- new Person { Name = "Joel", Height = 182 },
- new Person { Name = "Bob", Height = 134 }
+ new PersonModel { Name = "David", Height = 170 },
+ new PersonModel { Name = "Michael", Height = 96 },
+ new PersonModel { Name = "Steve", Height = 65 },
+ new PersonModel { Name = "Joel", Height = 182 },
+ new PersonModel { Name = "Bob", Height = 134 }
};
}
}
- public class Person
+ public class PersonModel
{
public string Name { get; set; }
public double Height { get; set; }
diff --git a/README.md b/README.md
index e57d27e..be6b41c 100644
--- a/README.md
+++ b/README.md
@@ -12,9 +12,9 @@
-
-
-
+
+
+
```
###### C#
@@ -28,6 +28,7 @@ namespace ChartGettingStarted
{
InitializeComponent();
SfCartesianChart chart = new SfCartesianChart();
+ this.Content = chart;
}
}
}
@@ -71,36 +72,36 @@ namespace ChartGettingStarted
Now, let us define a simple data model that represents a data point in the chart.
######
```C#
-public class Person
+public class PersonModel
{
public string Name { get; set; }
public double Height { get; set; }
}
```
-Next, create a view model class and initialize a list of `Person` objects as follows.
+Next, create a PersonViewModel class and initialize a list of `PersonModel` objects as follows.
###### C#
```C#
-public class ViewModel
+public class PersonViewModel
{
- public List Data { get; set; }
+ public List Data { get; set; }
- public ViewModel()
+ public PersonViewModel()
{
- Data = new List()
+ Data = new List()
{
- new Person { Name = "David", Height = 170 },
- new Person { Name = "Michael", Height = 96 },
- new Person { Name = "Steve", Height = 65 },
- new Person { Name = "Joel", Height = 182 },
- new Person { Name = "Bob", Height = 134 }
+ new PersonModel { Name = "David", Height = 170 },
+ new PersonModel { Name = "Michael", Height = 96 },
+ new PersonModel { Name = "Steve", Height = 65 },
+ new PersonModel { Name = "Joel", Height = 182 },
+ new PersonModel { Name = "Bob", Height = 134 }
};
}
}
```
-Set the `ViewModel` instance as the `BindingContext` of your page to bind `ViewModel` properties to the chart.
+Set the `PersonViewModel` instance as the `BindingContext` of your page to bind `PersonViewModel` properties to the chart.
-* Add namespace of `ViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML.
+* Add namespace of `PersonViewModel` class to your XAML Page, if you prefer to set `BindingContext` in XAML.
###### Xaml
```xaml
-
+
```
@@ -153,7 +154,7 @@ Run the project and check if you get following output to make sure you have conf
## Populate Chart with data
-As we are going to visualize the comparison of heights in the data model, add [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) to [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) property of chart, and then bind the `Data` property of the above `ViewModel` to the `ColumnSeries.ItemsSource` as follows.
+As we are going to visualize the comparison of heights in the data model, add [ColumnSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ColumnSeries.html?tabs=tabid-1) to [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) property of chart, and then bind the `Data` property of the above `PersonViewModel` to the `ColumnSeries.ItemsSource` as follows.
* The cartesian chart has [Series](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_Series) as its default content.
* You need to set [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)
@@ -200,7 +201,7 @@ chart.YAxes.Add(secondaryAxis);
ColumnSeries series = new ColumnSeries();
series.Label = "Height";
series.ShowDataLabels = true;
-series.ItemsSource = (new ViewModel()).Data;
+series.ItemsSource = (new PersonViewModel()).Data;
series.XBindingPath = "Name";
series.YBindingPath = "Height";
@@ -279,9 +280,9 @@ The legend provides information about the data point displayed in the chart. The
. . .
+ ItemsSource="{Binding Data}"
+ XBindingPath="Name"
+ YBindingPath="Height">
```
@@ -289,7 +290,7 @@ The legend provides information about the data point displayed in the chart. The
###### C#
```C#
ColumnSeries series = new ColumnSeries ();
-series.ItemsSource = (new ViewModel()).Data;
+series.ItemsSource = (new PersonViewModel()).Data;
series.XBindingPath = "Name";
series.YBindingPath = "Height";
series.Label = "Height";
@@ -314,7 +315,7 @@ Tooltips are used to show information about the segment, when a user hovers over
###### C#
```C#
ColumnSeries series = new ColumnSeries();
-series.ItemsSource = (new ViewModel()).Data;
+series.ItemsSource = (new PersonViewModel()).Data;
series.XBindingPath = "Name";
series.YBindingPath = "Height";
series.EnableTooltip = true;
@@ -332,7 +333,7 @@ The following code example gives you the complete code of above configurations.
xmlns:model="clr-namespace:ChartGettingStarted">
-
+
@@ -411,7 +412,7 @@ namespace ChartGettingStarted
{
Label = "Height",
ShowDataLabels = true,
- ItemsSource = (new ViewModel()).Data,
+ ItemsSource = (new PersonViewModel()).Data,
XBindingPath = "Name",
YBindingPath = "Height",
DataLabelSettings = new CartesianDataLabelSettings