Merge pull request #1 from SyncfusionExamples/862696-Prepare-stacked-…

…area-blog-sample-in-.NET-MAUI 862696- Prepare stacked area blog sample in .NET MAUI
SyncfusionExamples · Dec 20, 2023 · 518681c · 518681c
2 parents eeb547a + 997f32d
commit 518681c
Show file tree

Hide file tree

Showing 40 changed files with 1,326 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,18 @@
-# Creating-a-Stacked-Area-chart-to-visualize-US-schools-Revenue-as-a-share-of-GDP-by-funding-source
-This sample demonstrates how to create a .Net Maui Stacked Area Charts for Revenue of US primary and secondary schools, as share of GDP by source of funds
+# Creating a Stacked Area Chart to visualize US Schools Revenue as a share of GDP by funding source
+This sample demonstrates how to create a .Net Maui Stacked Area Charts for Revenue of US primary and secondary schools, as share of GDP by source of funds.
+
+## Stacked Area 
+The stacked Area chart is a dynamic visualization that allows us to observe changes in values over time while highlighting the contributions of each component. This chart type is particularly effective in displaying the proportional distribution of revenue source, giving us an understandable view of the financial landscape. 
+
+
+![Stacked Area chart](https://github.com/SyncfusionExamples/Creating-a-Stacked-Area-Chart-to-visualize-US-schools-Revenue-as-a-share-of-GDP-by-funding-source/assets/124584591/23e7a91b-d0f0-42c9-9580-1c6c43f04fb5)
+
+**Customized Chart appearance**
+
+In this sample, we have enhanced the appearance of Stacked Area Chart by customizing the follwing properties.
+* Chart Title
+* Chart Legend
+* Axis Style
+* Tooltip Template
+
+For more details on the step-by-step procedure, refer to the Blog of the [GDP Share of US School Revenue in Stacked Area Chart]().
diff --git a/USSchoolsRevenue/App.xaml b/USSchoolsRevenue/App.xaml
@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:USSchoolsRevenue"
+             x:Class="USSchoolsRevenue.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>
diff --git a/USSchoolsRevenue/App.xaml.cs b/USSchoolsRevenue/App.xaml.cs
@@ -0,0 +1,12 @@
+namespace USSchoolsRevenue
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+
+            MainPage = new AppShell();
+        }
+    }
+}
diff --git a/USSchoolsRevenue/AppShell.xaml b/USSchoolsRevenue/AppShell.xaml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="USSchoolsRevenue.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:USSchoolsRevenue"
+    Shell.FlyoutBehavior="Disabled"
+    Title="USSchoolsRevenue">
+
+    <ShellContent
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>
diff --git a/USSchoolsRevenue/AppShell.xaml.cs b/USSchoolsRevenue/AppShell.xaml.cs
@@ -0,0 +1,10 @@
+namespace USSchoolsRevenue
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/USSchoolsRevenue/MainPage.xaml b/USSchoolsRevenue/MainPage.xaml
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
+             xmlns:local="clr-namespace:USSchoolsRevenue"
+             x:Class="USSchoolsRevenue.MainPage">
+
+    <ContentPage.BindingContext>
+        <local:FoundingSourceViewModel x:Name="viewModel"/>
+    </ContentPage.BindingContext>
+
+    <Border Margin="20" Padding="10">
+        <chart:SfCartesianChart>
+            <!-- Title customization-->
+            <chart:SfCartesianChart.Title>
+                <HorizontalStackLayout Padding="0,0,0,20">
+                    <BoxView BackgroundColor="#FF855FF2" 
+                         Margin="5,0,5,0" 
+                         HeightRequest="40"  
+                         WidthRequest="10"/>
+                    <VerticalStackLayout>
+                        <Label Text="Funding source for public schools,United States, 1890 to 2010"
+                        TextColor="Black"
+                        FontSize="18"
+                        FontFamily="TimeSpan"
+                        FontAttributes="Bold"
+                        Margin="0,0,0,0" />
+                        <Label Text="Revenues for public elementary and secondary schools in the US, as share of GDP, by source of funds"
+                        TextColor="Black"
+                        FontSize="12"
+                        FontFamily="TimeSpan"
+                        Margin="0,5,0,0"
+                        />
+                    </VerticalStackLayout>
+                </HorizontalStackLayout>
+            </chart:SfCartesianChart.Title>
+
+            <chart:SfCartesianChart.Resources>
+                <!--- tooltip template-->
+                <DataTemplate x:Key="FederalTooltipTemplate">
+                    <HorizontalStackLayout>
+                        <BoxView BackgroundColor="#E1AA74" Margin="5,0,5,0" WidthRequest="5"/>
+                        <VerticalStackLayout>
+                            <Label Text="{Binding Item.Year, StringFormat='Year  : {0}'}" TextColor="White"/>
+                            <Label Text="{Binding Item.FederalFund,StringFormat='{0:F2}%'}" TextColor="White"/>
+                        </VerticalStackLayout>
+                    </HorizontalStackLayout>
+                </DataTemplate>
+                <DataTemplate x:Key="StateTooltipTemplate">
+                    <HorizontalStackLayout>
+                        <BoxView BackgroundColor="#3876BF" Margin="5,0,5,0" WidthRequest="5"/>
+                        <VerticalStackLayout>
+                            <Label Text="{Binding Item.Year, StringFormat='Year  : {0}'}" TextColor="White"/>
+                            <Label Text="{Binding Item.StateFund, StringFormat='{0:F2}%'}" TextColor="White"/>
+                        </VerticalStackLayout>
+                    </HorizontalStackLayout>
+                </DataTemplate>
+                <DataTemplate x:Key="LocalTooltipTemplate">
+                    <HorizontalStackLayout>
+                        <BoxView BackgroundColor="#2b408c" Margin="5,0,5,0" WidthRequest="5"/>
+                        <VerticalStackLayout>
+                            <Label Text="{Binding Item.Year,StringFormat='Year  : {0}'}" TextColor="White"/>
+                            <Label Text="{Binding Item.LocalFund, StringFormat='{0:F2}%'}" TextColor="White"/>
+                        </VerticalStackLayout>
+                    </HorizontalStackLayout>
+                </DataTemplate>
+            </chart:SfCartesianChart.Resources>
+
+            <!---Legend initialization-->
+            <chart:SfCartesianChart.Legend>
+                <chart:ChartLegend Placement="Bottom"/>
+            </chart:SfCartesianChart.Legend>
+
+            <!---Chart Axis-->
+            <chart:SfCartesianChart.XAxes>
+                <chart:CategoryAxis  ShowMajorGridLines="False" 
+                                 ShowTrackballLabel="True" 
+                                 Interval="8" EdgeLabelsDrawingMode="Center" />
+            </chart:SfCartesianChart.XAxes>
+
+            <chart:SfCartesianChart.YAxes>
+                <chart:NumericalAxis>
+                    <chart:NumericalAxis.MajorTickStyle>
+                        <chart:ChartAxisTickStyle StrokeWidth="0"/>
+                    </chart:NumericalAxis.MajorTickStyle>
+
+                    <chart:NumericalAxis.AxisLineStyle>
+                        <chart:ChartLineStyle StrokeWidth="0"/>
+                    </chart:NumericalAxis.AxisLineStyle>
+
+                    <chart:NumericalAxis.LabelStyle>
+                        <chart:ChartAxisLabelStyle LabelFormat="0'%"/>
+                    </chart:NumericalAxis.LabelStyle>
+
+                    <chart:NumericalAxis.Title>
+                        <chart:ChartAxisTitle Text="Share of GDP"/>
+                    </chart:NumericalAxis.Title>
+                </chart:NumericalAxis>
+            </chart:SfCartesianChart.YAxes>
+
+            <!---Chart Series-->
+            <chart:SfCartesianChart.Series>
+                <chart:StackingAreaSeries x:Name="Series1" 
+                                      ItemsSource="{Binding FundingSourceCollection}"
+                                      XBindingPath="Year"
+                                      YBindingPath="FederalFund"
+                                      Fill="#E1AA74"
+                                      Label="Federal/Unassigned"
+                                      LegendIcon="SeriesType"
+                                      EnableTooltip="True"
+                                      Opacity="0.8"
+                                      Stroke="#E1AA74"
+                                      StrokeWidth="1.5"
+                                      TooltipTemplate="{StaticResource FederalTooltipTemplate}"/>
+
+                <chart:StackingAreaSeries x:Name="Series2" 
+                                      ItemsSource="{Binding FundingSourceCollection}"
+                                      XBindingPath="Year"
+                                      YBindingPath="StateFund"
+                                      Fill="#3876BF"
+                                      Label="State"
+                                      LegendIcon="SeriesType"
+                                      EnableTooltip="True"
+                                      Opacity="0.9"
+                                      Stroke="#3876BF"
+                                      StrokeWidth="1.5"
+                                      TooltipTemplate="{StaticResource StateTooltipTemplate}"/>
+
+                <chart:StackingAreaSeries x:Name="Series3" 
+                                      ItemsSource="{Binding FundingSourceCollection}"
+                                      XBindingPath="Year"
+                                      YBindingPath="LocalFund"
+                                      Fill="#2b408c"
+                                      Label="Local"
+                                      LegendIcon="SeriesType"
+                                      EnableTooltip="True"
+                                      Opacity="0.9"
+                                      Stroke="#3a4e99"
+                                      StrokeWidth="1.5"
+                                      TooltipTemplate="{StaticResource LocalTooltipTemplate}"/>
+
+            </chart:SfCartesianChart.Series>
+        </chart:SfCartesianChart>
+    </Border>
+
+</ContentPage>
diff --git a/USSchoolsRevenue/MainPage.xaml.cs b/USSchoolsRevenue/MainPage.xaml.cs
@@ -0,0 +1,10 @@
+namespace USSchoolsRevenue
+{
+    public partial class MainPage : ContentPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/USSchoolsRevenue/MauiProgram.cs b/USSchoolsRevenue/MauiProgram.cs
@@ -0,0 +1,28 @@
+using Microsoft.Extensions.Logging;
+using Syncfusion.Maui.Core.Hosting;
+
+
+namespace USSchoolsRevenue
+{
+    public static class MauiProgram
+    {
+        public static MauiApp CreateMauiApp()
+        {
+            var builder = MauiApp.CreateBuilder();
+            builder
+                .UseMauiApp<App>()
+                .ConfigureSyncfusionCore()
+                .ConfigureFonts(fonts =>
+                {
+                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+                });
+
+#if DEBUG
+    		builder.Logging.AddDebug();
+#endif
+
+            return builder.Build();
+        }
+    }
+}
diff --git a/USSchoolsRevenue/Model/FundingSourceModel.cs b/USSchoolsRevenue/Model/FundingSourceModel.cs
@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace USSchoolsRevenue
+{
+    public  class FundingSourceModel
+    {
+        public string Year { get; set; }
+        public double LocalFund { get; set; }
+        public double StateFund { get; set; }
+        public double FederalFund { get; set; }
+
+        public FundingSourceModel(string year, double localFund, double stateFund, double federalFund)
+        {
+            Year = year;
+            LocalFund = localFund;
+            StateFund = stateFund;
+            FederalFund = federalFund;
+        }
+    }
+}
diff --git a/USSchoolsRevenue/Platforms/Android/AndroidManifest.xml b/USSchoolsRevenue/Platforms/Android/AndroidManifest.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>
diff --git a/USSchoolsRevenue/Platforms/Android/MainActivity.cs b/USSchoolsRevenue/Platforms/Android/MainActivity.cs
@@ -0,0 +1,11 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace USSchoolsRevenue
+{
+    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ScreenOrientation =ScreenOrientation.Landscape, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+    public class MainActivity : MauiAppCompatActivity
+    {
+    }
+}
diff --git a/USSchoolsRevenue/Platforms/Android/MainApplication.cs b/USSchoolsRevenue/Platforms/Android/MainApplication.cs
@@ -0,0 +1,16 @@
+using Android.App;
+using Android.Runtime;
+
+namespace USSchoolsRevenue
+{
+    [Application]
+    public class MainApplication : MauiApplication
+    {
+        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+            : base(handle, ownership)
+        {
+        }
+
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}
diff --git a/USSchoolsRevenue/Platforms/Android/Resources/values/colors.xml b/USSchoolsRevenue/Platforms/Android/Resources/values/colors.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#512BD4</color>
+    <color name="colorPrimaryDark">#2B0B98</color>
+    <color name="colorAccent">#2B0B98</color>
+</resources>
diff --git a/USSchoolsRevenue/Platforms/MacCatalyst/AppDelegate.cs b/USSchoolsRevenue/Platforms/MacCatalyst/AppDelegate.cs
@@ -0,0 +1,10 @@
+using Foundation;
+
+namespace USSchoolsRevenue
+{
+    [Register("AppDelegate")]
+    public class AppDelegate : MauiUIApplicationDelegate
+    {
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}
diff --git a/USSchoolsRevenue/Platforms/MacCatalyst/Entitlements.plist b/USSchoolsRevenue/Platforms/MacCatalyst/Entitlements.plist
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <!-- See https://aka.ms/maui-publish-app-store#add-entitlements for more information about adding entitlements.-->
+    <dict>
+        <!-- App Sandbox must be enabled to distribute a MacCatalyst app through the Mac App Store. -->
+        <key>com.apple.security.app-sandbox</key>
+        <true/>
+        <!-- When App Sandbox is enabled, this value is required to open outgoing network connections. -->
+        <key>com.apple.security.network.client</key>
+        <true/>
+    </dict>
+</plist>
+
diff --git a/USSchoolsRevenue/Platforms/MacCatalyst/Info.plist b/USSchoolsRevenue/Platforms/MacCatalyst/Info.plist
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <!-- The Mac App Store requires you specify if the app uses encryption. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/itsappusesnonexemptencryption -->
+    <!-- <key>ITSAppUsesNonExemptEncryption</key> -->
+    <!-- Please indicate <true/> or <false/> here. -->
+
+    <!-- Specify the category for your app here. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype -->
+    <!-- <key>LSApplicationCategoryType</key> -->
+    <!-- <string>public.app-category.YOUR-CATEGORY-HERE</string> -->
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>2</integer>
+	</array>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/appicon.appiconset</string>
+</dict>
+</plist>