Skip to content

Commit e0476b7

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/MAUI-847811-Create-Range-Column-chart-blog-sample
MAUI-847811-Create-Range-Column-chart-blog-sample
2 parents 581147f + 252c844 commit e0476b7

40 files changed

Lines changed: 1275 additions & 1 deletion

‎README.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,25 @@
1-
# Creating-a-.NET-MAUI-Range-Column-Chart-to-Compare-Average-Temperatures-in-Rome
1+
# Creating a .NET MAUI Range Column Chart to Compare Average Temperatures in Rome
2+
A range column chart is a valuable tool for visualizing data intervals, enabling comparisons between categories or time periods. It's particularly useful for showing variations and trends in data sets with upper and lower values.
3+
24
This sample demonstrates how to create a Range Column Chart to compare average temperatures in Rome using .NET MAUI (SfCartesianChart).
5+
6+
<img width="960" alt="Windows" src="https://github.com/SyncfusionExamples/Creating-a-.NET-MAUI-Range-Column-Chart-to-Compare-Average-Temperatures-in-Rome/assets/105496706/7dce8c7b-7745-4c54-8a7f-cdf9c648eac1">
7+
8+
### Customizing Chart Appearance
9+
We can customize the chart appearance by the following ways:
10+
11+
#### Customizing Range Column Series Placement
12+
We can customize the Cartesian chart by choosing whether the Range Column series should be placed side by side or overlapped.
13+
14+
#### Adding a chart title
15+
A chart title provides essential context to the plotted data
16+
17+
#### Chart Axis Customization
18+
We can further customize axis elements, including axis label style, axis label placement, and adjusting the axis range.
19+
20+
#### Chart series Customization
21+
We can customize the chart series by applying the desired series color, and enabling or customizing data labels for each series in the chart.
22+
23+
#### Chart Legend Customization
24+
The legend provides information about the data point displayed in the chart.
25+

‎RangeColumnChartDemo/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:RangeColumnChartDemo"
5+
x:Class="RangeColumnChartDemo.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎RangeColumnChartDemo/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace RangeColumnChartDemo
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new MainPage();
10+
}
11+
}
12+
}

‎RangeColumnChartDemo/AppShell.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="RangeColumnChartDemo.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:RangeColumnChartDemo"
7+
Shell.FlyoutBehavior="Disabled">
8+
9+
<ShellContent
10+
Title="Home"
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</Shell>

‎RangeColumnChartDemo/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace RangeColumnChartDemo
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎RangeColumnChartDemo/MainPage.xaml‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="RangeColumnChartDemo.MainPage"
5+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
6+
xmlns:local="clr-namespace:RangeColumnChartDemo">
7+
8+
<ContentPage.BindingContext>
9+
<local:ViewModel/>
10+
</ContentPage.BindingContext>
11+
12+
<ContentPage.Content>
13+
14+
<Border BackgroundColor="White" Stroke="#BEB1AE" Margin="10,20,10,10" Padding="10">
15+
16+
<Border.StrokeShape>
17+
<RoundRectangle CornerRadius="30"/>
18+
</Border.StrokeShape>
19+
20+
<Grid>
21+
<Grid.RowDefinitions>
22+
<RowDefinition Height="8*"/>
23+
<RowDefinition Height="20"/>
24+
</Grid.RowDefinitions>
25+
26+
<chart:SfCartesianChart Margin="10" BackgroundColor="White" EnableSideBySideSeriesPlacement="True">
27+
28+
<chart:SfCartesianChart.Title>
29+
<Grid>
30+
<Grid.RowDefinitions>
31+
<RowDefinition Height="Auto"/>
32+
</Grid.RowDefinitions>
33+
<HorizontalStackLayout Grid.Column="0">
34+
<Image Source="cloud.jpg" WidthRequest="40" HeightRequest="40"/>
35+
<Label VerticalOptions="Center"
36+
Text="Average Temperature Variations in Rome: 2021 vs. 2022" FontSize="18"/>
37+
</HorizontalStackLayout>
38+
</Grid>
39+
</chart:SfCartesianChart.Title>
40+
41+
<chart:SfCartesianChart.Legend>
42+
<chart:ChartLegend ItemTemplate="{StaticResource LegendTemplate}">
43+
</chart:ChartLegend>
44+
</chart:SfCartesianChart.Legend>
45+
46+
<chart:SfCartesianChart.Resources>
47+
<ResourceDictionary>
48+
<DataTemplate x:Key="LegendTemplate">
49+
<Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="5">
50+
<HorizontalStackLayout>
51+
<Ellipse HorizontalOptions="Center" VerticalOptions="Center"
52+
HeightRequest="13" WidthRequest="13" Margin="0,3,3,0"
53+
Fill="{Binding IconBrush}"/>
54+
<Label Grid.Column="1" FontSize="16" VerticalTextAlignment="Center"
55+
Text="{Binding Item.Label}" TextColor="Black"
56+
HorizontalOptions="Center" HorizontalTextAlignment="Start"/>
57+
</HorizontalStackLayout>
58+
</Grid>
59+
</DataTemplate>
60+
</ResourceDictionary>
61+
</chart:SfCartesianChart.Resources>
62+
63+
<chart:SfCartesianChart.XAxes>
64+
<chart:CategoryAxis LabelPlacement="BetweenTicks">
65+
<chart:CategoryAxis.LabelStyle>
66+
<chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
67+
</chart:CategoryAxis.LabelStyle>
68+
</chart:CategoryAxis>
69+
</chart:SfCartesianChart.XAxes>
70+
71+
<chart:SfCartesianChart.YAxes>
72+
<chart:NumericalAxis Minimum="-5" Maximum="40" ShowMajorGridLines="False">
73+
<chart:NumericalAxis.LabelStyle>
74+
<chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
75+
</chart:NumericalAxis.LabelStyle>
76+
</chart:NumericalAxis>
77+
</chart:SfCartesianChart.YAxes>
78+
79+
<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#98fb98" ShowDataLabels="True" Label="2021"
80+
ItemsSource="{Binding TemperatureCollection}"
81+
XBindingPath="Month" High="High2021" Low="Low2021">
82+
<chart:RangeColumnSeries.DataLabelSettings>
83+
<chart:CartesianDataLabelSettings UseSeriesPalette="False">
84+
<chart:CartesianDataLabelSettings.LabelStyle>
85+
<chart:ChartDataLabelStyle TextColor="Black"/>
86+
</chart:CartesianDataLabelSettings.LabelStyle>
87+
</chart:CartesianDataLabelSettings>
88+
</chart:RangeColumnSeries.DataLabelSettings>
89+
</chart:RangeColumnSeries>
90+
91+
<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#ff1493" ShowDataLabels="True" Label="2022"
92+
ItemsSource="{Binding TemperatureCollection}"
93+
XBindingPath="Month" High="High2022" Low="Low2022">
94+
<chart:RangeColumnSeries.DataLabelSettings>
95+
<chart:CartesianDataLabelSettings UseSeriesPalette="False">
96+
<chart:CartesianDataLabelSettings.LabelStyle>
97+
<chart:ChartDataLabelStyle TextColor="White" FontAttributes="Bold"/>
98+
</chart:CartesianDataLabelSettings.LabelStyle>
99+
</chart:CartesianDataLabelSettings>
100+
</chart:RangeColumnSeries.DataLabelSettings>
101+
</chart:RangeColumnSeries>
102+
103+
</chart:SfCartesianChart>
104+
105+
<Label Grid.Row="1" FontSize="Caption" FontAttributes="Italic"
106+
Text="Monthly temperature range at a weather station in Rome (Sallustiano), Italy, in 2021 and 2022, in °C.">
107+
</Label>
108+
109+
</Grid>
110+
111+
</Border>
112+
113+
</ContentPage.Content>
114+
115+
</ContentPage>

‎RangeColumnChartDemo/MainPage.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace RangeColumnChartDemo
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎RangeColumnChartDemo/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace RangeColumnChartDemo
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎RangeColumnChartDemo/Model/Model.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace RangeColumnChartDemo
8+
{
9+
public class Model
10+
{
11+
public Model(string month, double high2021, double low2021, double high2022, double low2022)
12+
{
13+
Month = month;
14+
High2021 = high2021;
15+
Low2021 = low2021;
16+
High2022 = high2022;
17+
Low2022 = low2022;
18+
}
19+
20+
public string Month { get; set; }
21+
public double High2021 { get; set; }
22+
public double Low2021 { get; set; }
23+
public double High2022 { get; set; }
24+
public double Low2022 { get; set; }
25+
}
26+
}

‎RangeColumnChartDemo/Platforms/Android/AndroidManifest.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
4+
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5+
<uses-permission android:name="android.permission.INTERNET" />
6+
</manifest>

0 commit comments

Comments
 (0)