Skip to content

MAUI-3582 Update sample with real time data #2

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 10, 2022
Merged

MAUI-3582 Update sample with real time data #2

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
1 change: 0 additions & 1 deletion ChartAxisDemo/AppShell.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
Shell.FlyoutBehavior="Disabled">

<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />

Expand Down
41 changes: 22 additions & 19 deletions ChartAxisDemo/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,43 @@
x:Class="ChartAxisDemo.MainPage">

<Grid>
<chart:SfCartesianChart Title="Axis elements customization">
<chart:SfCartesianChart Title="Sneakers sold by brand" Margin="20">
<chart:SfCartesianChart.BindingContext>
<viewModel:ViewModel />
</chart:SfCartesianChart.BindingContext>

<chart:SfCartesianChart.Resources>
<chart:ChartAxisLabelStyle x:Key="axisLableStyle" TextColor="Red"/>
<chart:ChartLineStyle x:Key="axisLineStyle" Stroke="Yellow" />
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Brown"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Brown"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="minorTickStyle" Stroke="Gray"/>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
</chart:SfCartesianChart.Resources>

<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis AxisLineStyle="{StaticResource axisLineStyle}"
LabelStyle="{StaticResource axisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}" />
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
ShowMajorGridLines="False">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis MinorTicksPerInterval="2"
<chart:NumericalAxis MinorTicksPerInterval="1"
Minimum="0"
AxisLineStyle="{StaticResource axisLineStyle}"
LabelStyle="{StaticResource axisLableStyle}"
LabelStyle="{StaticResource yAxisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}"
MinorTickStyle="{StaticResource minorTickStyle}" />
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<chart:SplineSeries XBindingPath="XValue"
YBindingPath="YValue"
<chart:ColumnSeries XBindingPath="Brand"
YBindingPath="ItemsCount"
ItemsSource="{Binding Data}"/>

</chart:SfCartesianChart>
Expand Down
10 changes: 2 additions & 8 deletions ChartAxisDemo/Model/Model.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,8 @@ namespace ChartAxisDemo
{
public class Model
{
public Model(string xValue, double yValue)
{
XValue = xValue;
YValue = yValue;
}
public string Brand { get; set; }

public string XValue { get; set; }

public double YValue { get; set; }
public double ItemsCount { get; set; }
}
}
20 changes: 11 additions & 9 deletions ChartAxisDemo/ViewModel/ViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,17 @@ public class ViewModel

public ViewModel()
{
Data = new ObservableCollection<Model>()
{
new Model("Naveen", 25000),
new Model("John", 15000),
new Model("James", 35000),
new Model("Magesh", 20000),
new Model("Karthi", 25000),
new Model("Ram", 17000),
};
Data = new ObservableCollection<Model>();
Data.Add(new Model() { Brand = "Adidas", ItemsCount = 416 });
Data.Add(new Model() { Brand = "Nike", ItemsCount = 520 });
Data.Add(new Model() { Brand = "Reebok", ItemsCount = 470 });
Data.Add(new Model() { Brand = "Fila", ItemsCount = 500 });
Data.Add(new Model() { Brand = "Puma", ItemsCount = 449 });
Data.Add(new Model() { Brand = "New Balance", ItemsCount = 360 });
Data.Add(new Model() { Brand = "Asics", ItemsCount = 437 });
Data.Add(new Model() { Brand = "Skechers", ItemsCount = 458 });
Data.Add(new Model() { Brand = "Bata", ItemsCount = 500 });
Data.Add(new Model() { Brand = "Burberry", ItemsCount = 473 });
}
}
}
76 changes: 39 additions & 37 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,35 @@ The MAUI Cartesian chart provides support to customize the color of axis element
</chart:SfCartesianChart.BindingContext>

<chart:SfCartesianChart.Resources>
<chart:ChartAxisLabelStyle x:Key="axisLableStyle" TextColor="Red"/>
<chart:ChartLineStyle x:Key="axisLineStyle" Stroke="Yellow" />
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Brown"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Brown"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="minorTickStyle" Stroke="Gray"/>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
</chart:SfCartesianChart.Resources>

<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis AxisLineStyle="{StaticResource axisLineStyle}"
LabelStyle="{StaticResource axisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}" />
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
ShowMajorGridLines="False">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis MinorTicksPerInterval="2"
AxisLineStyle="{StaticResource axisLineStyle}"
LabelStyle="{StaticResource axisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}"
MinorTickStyle="{StaticResource minorTickStyle}" />
<chart:NumericalAxis MinorTicksPerInterval="1"
LabelStyle="{StaticResource yAxisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>/>
</chart:SfCartesianChart.YAxes>

<chart:SplineSeries XBindingPath="XValue"
<chart:ColumnSeries XBindingPath="XValue"
YBindingPath="YValue"
ItemsSource="{Binding Data}"/>

Expand All @@ -50,48 +53,47 @@ var chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

//Initializing new style for the axis line, grid lines, tick lines and labels.
var axisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
var axisLineStyle = new ChartLineStyle { Stroke = Colors.Yellow };
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Brown };
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
var majorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Brown };
var minorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Gray };
var xAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
var yAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue };
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray, StrokeDashArray = new DoubleCollection() { 2, 2 } };
var majorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Gray };
var xAxisTitle = new ChartAxisTitle() { Text = "Brand", TextColor = Colors.Red,};
var yAxisTitle = new ChartAxisTitle() { Text = " Number of items sold", TextColor = Colors.Blue,};

//Initializing XAxes
var xAxis = new CategoryAxis()
{
LabelStyle = axisLableStyle,
AxisLineStyle = axisLineStyle,
MajorGridLineStyle = majorLineStyle,
MajorTickStyle = majorTickStyle,
LabelStyle = xAxisLableStyle,
Title = xAxisTitle,
ShowMajorGridLines = false,
};
chart.XAxes.Add(xAxis);

//Initializing YAxes
var yAxis = new NumericalAxis()
{
MinorTicksPerInterval = 2,
LabelStyle = axisLableStyle,
AxisLineStyle = axisLineStyle,
MinorTicksPerInterval = 2,
LabelStyle = yAxisLableStyle,
MajorGridLineStyle = majorLineStyle,
MinorGridLineStyle = minorLineStyle,
MajorTickStyle = majorTickStyle,
MinorTickStyle = minorTickStyle,
Title = yAxisTitle,
};
chart.YAxes.Add(yAxis);

var series = new SplineSeries()
var series = new ColumnSeries()
{
ItemsSource = viewModel.Data,
XBindingPath = "XValue",
YBindingPath = "YValue",
ItemsSource = viewModel.Data,
XBindingPath = "XValue",
YBindingPath = "YValue",
};

chart.Series.Add(series);

```

![Axis elements customization](https://user-images.githubusercontent.com/61832185/199484950-6b067835-2313-49ca-9829-8f264c1344e4.png)
![Axis elements customization](https://user-images.githubusercontent.com/61832185/201011516-954e603f-eb74-42ee-812c-e3ca0a376813.png)

This user guide [Documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started) helps you to acquire more knowledge on the MAUI cartesian charts and their features. You can also refer to the [Feature Tour](https://www.syncfusion.com/maui-controls/maui-charts) site to get an overview of all the features in the chart.

Expand Down