Skip to content

917099-Updated Getting Started Cartesian Chart MAUI sample #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
merged 3 commits into from
Nov 1, 2024
Merged

917099-Updated Getting Started Cartesian Chart MAUI sample #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45d9c77
Updated view model
EzhilarasanElangovan31 Oct 30, 2024
85eba5a
commit
EzhilarasanElangovan31 Oct 30, 2024
1b2208c
revered changes
EzhilarasanElangovan31 Oct 30, 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
2 changes: 1 addition & 1 deletion Cartesian_chart_sample/CartesianChartSample/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@


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

<ContentPage.Content>
Expand Down
20 changes: 10 additions & 10 deletions Cartesian_chart_sample/CartesianChartSample/ViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@

namespace CartesianChartSample
{
public class ViewModel
public class PersonViewModel
{
public List<Person> Data { get; set; }
public ViewModel()
public List<PersonModel> Data { get; set; }
public PersonViewModel()
{
Data = new List<Person>()
Data = new List<PersonModel>()
{
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; }
Expand Down
53 changes: 27 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
<ContentPage
. . .
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
<Grid>
<chart:SfCartesianChart/>
</Grid>

<chart:SfCartesianChart/>

</ContentPage>
```
###### C#
Expand All @@ -28,6 +28,7 @@ namespace ChartGettingStarted
{
InitializeComponent();
SfCartesianChart chart = new SfCartesianChart();
this.Content = chart;
}
}
}
Expand Down Expand Up @@ -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<Person> Data { get; set; }
public List<PersonModel> Data { get; set; }

public ViewModel()
public PersonViewModel()
{
Data = new List<Person>()
Data = new List<PersonModel>()
{
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
<ContentPage
Expand All @@ -111,7 +112,7 @@ Set the `ViewModel` instance as the `BindingContext` of your page to bind `ViewM
xmlns:model="clr-namespace:ChartGettingStarted">

<ContentPage.BindingContext>
<model:ViewModel></model:ViewModel>
<model:PersonViewModel/>
</ContentPage.BindingContext>
</ContentPage>
```
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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";

Expand Down Expand Up @@ -279,17 +280,17 @@ The legend provides information about the data point displayed in the chart. The
<chart:SfCartesianChart>
. . .
<chart:ColumnSeries Label="Height"
ItemsSource="{Binding Data}"
XBindingPath="Name"
YBindingPath="Height">
ItemsSource="{Binding Data}"
XBindingPath="Name"
YBindingPath="Height">
</chart:ColumnSeries>
</chart:SfCartesianChart>
```

###### 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";
Expand All @@ -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;
Expand All @@ -332,7 +333,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:PersonViewModel/>
</ContentPage.BindingContext>

<ContentPage.Content>
Expand Down Expand Up @@ -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
Expand Down
Loading