Skip to content

Commit 41023d8

Browse files
SaiyathAliFathimaSaiyathAliFathima
authored
Merge pull request #1 from SyncfusionExamples/sub-branch
Visualizing Layered Column Charts in .NET MAUI: Build Advanced Comparison Visualizations with Real-Time Use Case
2 parents 5001d16 + b80ba05 commit 41023d8

40 files changed

+1259
-2
lines changed

‎LayeredColumnChartMAUI/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:LayeredColumnChartMAUI"
5+
x:Class="LayeredColumnChartMAUI.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>

‎LayeredColumnChartMAUI/App.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace LayeredColumnChartMAUI
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
}
9+
10+
protected override Window CreateWindow(IActivationState? activationState)
11+
{
12+
return new Window(new AppShell());
13+
}
14+
}
15+
}

‎LayeredColumnChartMAUI/AppShell.xaml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="LayeredColumnChartMAUI.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:LayeredColumnChartMAUI"
7+
Title="LayeredColumnChartMAUI">
8+
9+
<ShellContent
10+
ContentTemplate="{DataTemplate local:MainPage}"
11+
Route="MainPage" />
12+
13+
</Shell>

‎LayeredColumnChartMAUI/AppShell.xaml.cs‎

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

‎LayeredColumnChartMAUI/LayeredColumnChartMAUI.csproj‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<TargetFrameworks>net9.0-android;net9.0-ios;net9.0-maccatalyst</TargetFrameworks>
5+
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net9.0-windows10.0.19041.0</TargetFrameworks>
6+
<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
7+
<!-- <TargetFrameworks>$(TargetFrameworks);net9.0-tizen</TargetFrameworks> -->
8+
9+
<!-- Note for MacCatalyst:
10+
The default runtime is maccatalyst-x64, except in Release config, in which case the default is maccatalyst-x64;maccatalyst-arm64.
11+
When specifying both architectures, use the plural <RuntimeIdentifiers> instead of the singular <RuntimeIdentifier>.
12+
The Mac App Store will NOT accept apps with ONLY maccatalyst-arm64 indicated;
13+
either BOTH runtimes must be indicated or ONLY macatalyst-x64. -->
14+
<!-- For example: <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers> -->
15+
16+
<OutputType>Exe</OutputType>
17+
<RootNamespace>LayeredColumnChartMAUI</RootNamespace>
18+
<UseMaui>true</UseMaui>
19+
<SingleProject>true</SingleProject>
20+
<ImplicitUsings>enable</ImplicitUsings>
21+
<Nullable>enable</Nullable>
22+
23+
<!-- Display name -->
24+
<ApplicationTitle>LayeredColumnChartMAUI</ApplicationTitle>
25+
26+
<!-- App Identifier -->
27+
<ApplicationId>com.companyname.layeredcolumnchartmaui</ApplicationId>
28+
29+
<!-- Versions -->
30+
<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
31+
<ApplicationVersion>1</ApplicationVersion>
32+
33+
<!-- To develop, package, and publish an app to the Microsoft Store, see: https://aka.ms/MauiTemplateUnpackaged -->
34+
<WindowsPackageType>None</WindowsPackageType>
35+
36+
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
37+
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
38+
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
39+
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
40+
<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
41+
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
42+
</PropertyGroup>
43+
44+
<ItemGroup>
45+
<!-- App Icon -->
46+
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
47+
48+
<!-- Splash Screen -->
49+
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
50+
51+
<!-- Images -->
52+
<MauiImage Include="Resources\Images\*" />
53+
<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
54+
55+
<!-- Custom Fonts -->
56+
<MauiFont Include="Resources\Fonts\*" />
57+
58+
<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
59+
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
60+
</ItemGroup>
61+
62+
<ItemGroup>
63+
<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
64+
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="*" />
65+
<PackageReference Include="Syncfusion.Maui.Toolkit" Version="*" />
66+
</ItemGroup>
67+
68+
</Project>

‎LayeredColumnChartMAUI/LayeredColumnChartMAUI.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.14.36202.13 d17.14
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LayeredColumnChartMAUI", "LayeredColumnChartMAUI.csproj", "{4210B2EB-64FA-4F36-B9FA-3E767E5ABC29}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{4210B2EB-64FA-4F36-B9FA-3E767E5ABC29}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{4210B2EB-64FA-4F36-B9FA-3E767E5ABC29}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{4210B2EB-64FA-4F36-B9FA-3E767E5ABC29}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{4210B2EB-64FA-4F36-B9FA-3E767E5ABC29}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {84AE9467-656B-4799-97DE-85C029DE352F}
24+
EndGlobalSection
25+
EndGlobal

‎LayeredColumnChartMAUI/MainPage.xaml‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
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+
xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
5+
xmlns:local="clr-namespace:LayeredColumnChartMAUI"
6+
x:Class="LayeredColumnChartMAUI.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:ViewModel x:Name="viewModel" />
10+
</ContentPage.BindingContext>
11+
12+
<ContentPage.Resources>
13+
<x:String x:Key="IconPathData">M8.9000244,16.199995L8.9000244,20.199995 12.900024,20.199995 12.900024,16.199995z M2.6000366,16.100004L2.6000366,20.100004 6.6000366,20.100004 6.6000366,16.100004z M17.600037,13.400007L32,13.400007 32,31.799999 27.900024,31.799999 27.900024,22.499998 22.100037,22.499998 22.100037,31.799999 17.600037,31.799999z M8.9000244,9.8000022L8.9000244,13.800001 12.900024,13.800001 12.900024,9.8000022z M2.6000366,9.6999961L2.6000366,13.699995 6.6000366,13.699995 6.6000366,9.6999961z M17.600037,9.6000052L32,9.6000052 32,11.499998 17.600037,11.499998z M8.9000244,3.4000088L8.9000244,7.4000083 12.900024,7.4000083 12.900024,3.4000088z M2.6000366,3.3000026L2.6000366,7.3000022 6.6000366,7.3000022 6.6000366,3.3000026z M0,0L15.5,0 15.5,31.799999 0,31.799999z</x:String>
14+
</ContentPage.Resources>
15+
16+
<Border Stroke="Black" Background="White" StrokeThickness="0.6" Margin="10">
17+
18+
<Grid RowDefinitions="auto, *">
19+
20+
<HorizontalStackLayout Grid.Row="0" Padding="{OnIdiom Desktop=20, Phone=15}" Spacing="10">
21+
22+
<Path Fill="#1C5FC0"
23+
Data="{StaticResource IconPathData}"
24+
Margin="{OnIdiom Desktop='0,5,0,0', Phone='0,2,0,0'}" />
25+
26+
<VerticalStackLayout Margin="5,0,0,0">
27+
<Label Text="Top Challenges Faced by European Accommodation Sector"
28+
FontSize="{OnIdiom Desktop=26, Phone=17}" />
29+
<Label Text="Visualizing the distribution of operational concerns reported by hoteliers across European countries in 2024."
30+
FontSize="{OnIdiom Desktop=15, Phone=12}" />
31+
</VerticalStackLayout>
32+
</HorizontalStackLayout>
33+
34+
<chart:SfCartesianChart EnableSideBySideSeriesPlacement="False" Grid.Row="1">
35+
36+
<chart:SfCartesianChart.XAxes>
37+
<chart:CategoryAxis ShowMajorGridLines="False">
38+
<chart:CategoryAxis.LabelStyle>
39+
<chart:ChartAxisLabelStyle FontSize="{OnIdiom Desktop=16, Phone=12}" />
40+
</chart:CategoryAxis.LabelStyle>
41+
</chart:CategoryAxis>
42+
</chart:SfCartesianChart.XAxes>
43+
44+
<chart:SfCartesianChart.YAxes>
45+
<chart:NumericalAxis Minimum="0" Maximum="100"
46+
Interval="{OnIdiom Desktop=20, Phone=25}">
47+
<chart:NumericalAxis.MajorGridLineStyle>
48+
<chart:ChartLineStyle StrokeDashArray="5,7" />
49+
</chart:NumericalAxis.MajorGridLineStyle>
50+
<chart:NumericalAxis.LabelStyle>
51+
<chart:ChartAxisLabelStyle LabelFormat="0'%'"
52+
FontSize="{OnIdiom Desktop=16, Phone=12}" />
53+
</chart:NumericalAxis.LabelStyle>
54+
</chart:NumericalAxis>
55+
</chart:SfCartesianChart.YAxes>
56+
57+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
58+
x:DataType="local:ViewModel"
59+
XBindingPath="Country"
60+
YBindingPath="EnergyCost"
61+
EnableTooltip="True"
62+
EnableAnimation="True"
63+
Label="Energy cost"
64+
LegendIcon="SeriesType"
65+
Fill="#003b95">
66+
</chart:ColumnSeries>
67+
68+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
69+
x:DataType="local:ViewModel"
70+
XBindingPath="Country"
71+
YBindingPath="StaffCost"
72+
Width="0.65"
73+
EnableTooltip="True"
74+
EnableAnimation="True"
75+
Label="Cost of staff"
76+
LegendIcon="SeriesType"
77+
Fill="#1C5FC0" >
78+
</chart:ColumnSeries>
79+
80+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
81+
x:DataType="local:ViewModel"
82+
XBindingPath="Country"
83+
YBindingPath="WorkerShortage"
84+
Width="0.5"
85+
EnableTooltip="True"
86+
EnableAnimation="True"
87+
Label="Shortage of skilled workers"
88+
LegendIcon="SeriesType"
89+
Fill="#3E80D8">
90+
</chart:ColumnSeries>
91+
92+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
93+
x:DataType="local:ViewModel"
94+
XBindingPath="Country"
95+
YBindingPath="Tax"
96+
Width="0.35"
97+
EnableTooltip="True"
98+
EnableAnimation="True"
99+
Label="Potential tax increase"
100+
LegendIcon="SeriesType"
101+
Fill="#71A6F2" >
102+
</chart:ColumnSeries>
103+
104+
<chart:ColumnSeries ItemsSource="{Binding DataSource}"
105+
x:DataType="local:ViewModel"
106+
XBindingPath="Country"
107+
YBindingPath="Geopolitical"
108+
Width="0.2"
109+
EnableTooltip="True"
110+
EnableAnimation="True"
111+
Label="Geopolitical uncertainties"
112+
LegendIcon="SeriesType"
113+
Fill="#B3D3FF">
114+
</chart:ColumnSeries>
115+
116+
<chart:SfCartesianChart.Legend>
117+
<chart:ChartLegend ToggleSeriesVisibility="True">
118+
<chart:ChartLegend.LabelStyle>
119+
<chart:ChartLegendLabelStyle FontSize="{OnIdiom Desktop=13, Phone=12}" />
120+
</chart:ChartLegend.LabelStyle>
121+
</chart:ChartLegend>
122+
</chart:SfCartesianChart.Legend>
123+
124+
</chart:SfCartesianChart>
125+
126+
</Grid>
127+
128+
</Border>
129+
130+
</ContentPage>

‎LayeredColumnChartMAUI/MainPage.xaml.cs‎

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

‎LayeredColumnChartMAUI/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.Toolkit.Hosting;
3+
4+
namespace LayeredColumnChartMAUI
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionToolkit()
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+
}

‎LayeredColumnChartMAUI/Model/DataModel.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace LayeredColumnChartMAUI
2+
{
3+
public class DataModel
4+
{
5+
public required string Country { get; set; }
6+
public double EnergyCost { get; set; }
7+
public double StaffCost { get; set; }
8+
public double WorkerShortage { get; set; }
9+
public double Tax { get; set; }
10+
public double Geopolitical { get; set; }
11+
}
12+
}

0 commit comments

Comments
 (0)