From 45d9c776e9b952e696bf66d823a42594e8bdb6f6 Mon Sep 17 00:00:00 2001 From: EzhilarasanElangovan31 Date: Wed, 30 Oct 2024 13:37:58 +0530 Subject: [PATCH 1/3] Updated view model --- .../CartesianChartSample/MainPage.xaml | 2 +- .../CartesianChartSample/ViewModel.cs | 20 ++++---- README.md | 49 ++++++++++--------- 3 files changed, 37 insertions(+), 34 deletions(-) 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..c6d80fa 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,10 @@ namespace ChartGettingStarted public MainPage() { InitializeComponent(); + Grid grid = new Grid(); SfCartesianChart chart = new SfCartesianChart(); + grid.Add(chart); + this.Content = grid; } } } @@ -71,36 +74,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 +156,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 +203,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 +282,9 @@ The legend provides information about the data point displayed in the chart. The . . . + ItemsSource="{Binding Data}" + XBindingPath="Name" + YBindingPath="Height"> ``` @@ -289,7 +292,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 +317,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 +335,7 @@ The following code example gives you the complete code of above configurations. xmlns:model="clr-namespace:ChartGettingStarted"> - + @@ -411,7 +414,7 @@ namespace ChartGettingStarted { Label = "Height", ShowDataLabels = true, - ItemsSource = (new ViewModel()).Data, + ItemsSource = (new PersonViewModel()).Data, XBindingPath = "Name", YBindingPath = "Height", DataLabelSettings = new CartesianDataLabelSettings From 85eba5a509c81699dafe55955c34c7ff3bc14a56 Mon Sep 17 00:00:00 2001 From: EzhilarasanElangovan31 Date: Wed, 30 Oct 2024 18:52:04 +0530 Subject: [PATCH 2/3] commit --- .../CartesianChartSample.csproj.user | 2 +- README.md | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user b/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user index 649c237..8a0d326 100644 --- a/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user +++ b/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user @@ -2,7 +2,7 @@ False - net6.0-windows10.0.19041.0 + net8.0-android Windows Machine \ No newline at end of file diff --git a/README.md b/README.md index c6d80fa..be6b41c 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ - - - + + + ``` ###### C# @@ -27,10 +27,8 @@ namespace ChartGettingStarted public MainPage() { InitializeComponent(); - Grid grid = new Grid(); SfCartesianChart chart = new SfCartesianChart(); - grid.Add(chart); - this.Content = grid; + this.Content = chart; } } } From 1b2208c9654df9616a56e6fb5b69e54ebf8065d8 Mon Sep 17 00:00:00 2001 From: EzhilarasanElangovan31 Date: Wed, 30 Oct 2024 18:55:46 +0530 Subject: [PATCH 3/3] revered changes --- .../CartesianChartSample/CartesianChartSample.csproj.user | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user b/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user index 8a0d326..649c237 100644 --- a/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user +++ b/Cartesian_chart_sample/CartesianChartSample/CartesianChartSample.csproj.user @@ -2,7 +2,7 @@ False - net8.0-android + net6.0-windows10.0.19041.0 Windows Machine \ No newline at end of file