Skip to content

Commit

Permalink
Merge pull request #1 from SyncfusionExamples/MAUI-863148-Add_Blog_sa…
Browse files Browse the repository at this point in the history 
…mple

MAUI-863148- Added Stacked column chart blog Sample
  • Loading branch information
@SyncfusionKarthikeyan
SyncfusionKarthikeyan authored Jan 4, 2024
2 parents b814fa9 + 6d9887a commit a7aaf00
Show file tree
Hide file tree
Showing 34 changed files with 1,276 additions and 2 deletions.
9 changes: 7 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
# Creating-a-Stacked-Column-Chart-for-Global-Smartphone-Shipments
Creating a Stacked Column Chart for Global Smartphone Shipments
# Creating a Stacked Column Chart for Global Smartphone Shipments

A [Stacked column chart](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn) comprises columns stacked on top of one another, allowing a comparison of the total and the relative contribution of each sub-category. In this case, the columns represent the quarterly smartphone shipments for 2022, while the line chart illustrates the market share of smartphones in 2022.

<img width="930" alt="StackedColumn" src="https://github.com/SyncfusionExamples/Creating-a-Stacked-Column-Chart-for-Global-Smartphone-Shipments/assets/102796134/d384b86e-2793-4cf3-a570-b45495d91434">


27 changes: 27 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo.sln
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.8.34227.203
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SmartphoneShipmentsDemo", "SmartphoneShipmentsDemo\SmartphoneShipmentsDemo.csproj", "{309D8857-2B0B-4680-BF2C-50ABBD91B73F}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.Build.0 = Debug|Any CPU
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.ActiveCfg = Release|Any CPU
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.Build.0 = Release|Any CPU
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.Deploy.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {2728EC67-E673-48BE-A548-3B372867E1E0}
EndGlobalSection
EndGlobal
14 changes: 14 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/App.xaml
View file
Original file line number Diff line number Diff line change
@@ -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:SmartphoneShipmentsDemo"
x:Class="SmartphoneShipmentsDemo.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
12 changes: 12 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/App.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
namespace SmartphoneShipmentsDemo
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new AppShell();
}
}
}
14 changes: 14 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/AppShell.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="SmartphoneShipmentsDemo.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SmartphoneShipmentsDemo"
Shell.FlyoutBehavior="Disabled"
Title="SmartphoneShipmentsDemo">

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

</Shell>
10 changes: 10 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/AppShell.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace SmartphoneShipmentsDemo
{
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
}
}
}
216 changes: 216 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MainPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<?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:model="clr-namespace:SmartphoneShipmentsDemo"
x:Class="SmartphoneShipmentsDemo.MainPage">

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



<ContentPage.Content>
<Border Background="#e8ebe0"
StrokeThickness="4"
StrokeShape="RoundRectangle 40"
Margin="30">

<Grid RowDefinitions="1*,7*" Margin="10,15,0,0" RowSpacing="0">
<!--Align Header-->
<Grid Grid.Row="0" RowDefinitions="*,*,*">

<Label Text="Creating a Stacked Column Chart for Global Smartphone Shipments"
TextColor="Black"
FontSize="18"
FontFamily="TimeSpan"
FontAttributes="Bold"
Grid.Row="0"
Margin="18,0,0,0"/>

<Label Text="The stacked column chart showcases the quarterly smartphone shipments throughout 2022 (Q1 to Q4), while the line chart illustrates the corresponding market shares over the same period"
TextColor="Black"
FontSize="12"
FontFamily="TimeSpan"
Grid.Row="1"
Margin="18,3,0,0"/>
<StackLayout Orientation="Horizontal" Grid.Row="2" Spacing="10" Margin="18,0,0,0">
<BoxView BackgroundColor="#9aa573"
HeightRequest="10"
WidthRequest="10"
HorizontalOptions="Start"
VerticalOptions="Start"
Margin="0,4,0,0" />

<Label Text="Smartphone Shipments 2022[Q1-Q4][in Millions]"
TextColor="Black"
FontSize="12"/>

<BoxView BackgroundColor="#555d3c"
HeightRequest="2"
WidthRequest="30"
HorizontalOptions="Start"
VerticalOptions="Start"
Margin="0,8,0,0"/>

<Label Text="Smartphone Market Share 2022[in Percentage]"
TextColor="Black"
FontSize="12"/>
</StackLayout>
</Grid>


<chart:SfCartesianChart Grid.Row="1" >
<!--Customise Tooltip-->
<chart:SfCartesianChart.Resources>
<DataTemplate x:Key="tooltipTemplate">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Item.BrandName}"
TextColor="White"
FontAttributes="Bold"
FontSize="12"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label Text=" : "
TextColor="White"
FontAttributes="Bold"
FontSize="12"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label Text="{Binding Item.MarketShare,StringFormat='{0:F1} %'}"
TextColor="White"
FontAttributes="Bold"
FontSize="12"
Margin="3,0,0,0"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</chart:SfCartesianChart.Resources>

<!--X-Axis-->
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis IsVisible="True"
ShowMajorGridLines="False"
AxisLineOffset="30">
<chart:CategoryAxis.LabelStyle>
<chart:ChartAxisLabelStyle FontAttributes="Bold" />
</chart:CategoryAxis.LabelStyle>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<!--Y-Axis-->
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis ShowMajorGridLines="False"
Maximum="270"
Interval="20"
EdgeLabelsDrawingMode="Fit">
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle FontAttributes="Bold"/>
</chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
<chart:NumericalAxis Name="YAxis"
CrossesAt="{Static x:Double.MaxValue}"
ShowMajorGridLines="False"
EdgeLabelsDrawingMode="Fit">
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="0'%"
FontAttributes="Bold"/>
</chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<!--Quater 1 Smartphone shipments value-->
<chart:StackingColumnSeries ShowDataLabels="True"
ItemsSource="{Binding ShipmentsData}"
XBindingPath="BrandName"
YBindingPath="Quarter1"
StrokeWidth="7"
Fill="#9aa573">
<chart:StackingColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
UseSeriesPalette="False"
BarAlignment="Bottom">
<chart:CartesianDataLabelSettings.LabelStyle>
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
TextColor="Black"/>
</chart:CartesianDataLabelSettings.LabelStyle>
</chart:CartesianDataLabelSettings>
</chart:StackingColumnSeries.DataLabelSettings>

</chart:StackingColumnSeries>


<chart:StackingColumnSeries ShowDataLabels="True"
ItemsSource="{Binding ShipmentsData}"
XBindingPath="BrandName"
YBindingPath="Quarter2"
StrokeWidth="7"
Fill="#a5af83">
<chart:StackingColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
UseSeriesPalette="False"
BarAlignment="Bottom">
<chart:CartesianDataLabelSettings.LabelStyle>
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
TextColor="Black"/>
</chart:CartesianDataLabelSettings.LabelStyle>
</chart:CartesianDataLabelSettings>
</chart:StackingColumnSeries.DataLabelSettings>
</chart:StackingColumnSeries>

<chart:StackingColumnSeries ShowDataLabels="True"
ItemsSource="{Binding ShipmentsData}"
XBindingPath="BrandName"
YBindingPath="Quarter3"
Fill="#b0b992">
<chart:StackingColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
UseSeriesPalette="False"
BarAlignment="Bottom">
<chart:CartesianDataLabelSettings.LabelStyle>
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
TextColor="Black"/>
</chart:CartesianDataLabelSettings.LabelStyle>
</chart:CartesianDataLabelSettings>
</chart:StackingColumnSeries.DataLabelSettings>
</chart:StackingColumnSeries>

<chart:StackingColumnSeries ShowDataLabels="True"
ItemsSource="{Binding ShipmentsData}"
XBindingPath="BrandName"
YBindingPath="Quarter4"
Fill="#bbc3a2">
<chart:StackingColumnSeries.DataLabelSettings>
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
UseSeriesPalette="False"
BarAlignment="Bottom">
<chart:CartesianDataLabelSettings.LabelStyle>
<chart:ChartDataLabelStyle TextColor="Black"
LabelFormat="0.##'M"/>
</chart:CartesianDataLabelSettings.LabelStyle>
</chart:CartesianDataLabelSettings>

</chart:StackingColumnSeries.DataLabelSettings>
</chart:StackingColumnSeries>

<chart:LineSeries XBindingPath="BrandName"
YBindingPath="MarketShare"
ItemsSource="{Binding ShipmentsData}"
YAxisName="YAxis"
ShowMarkers="True"
EnableTooltip="True"
TooltipTemplate="{StaticResource tooltipTemplate}"
Fill="#555d3c">
<chart:LineSeries.MarkerSettings>
<chart:ChartMarkerSettings Type="Circle"
Height="8"
Width="8"/>
</chart:LineSeries.MarkerSettings>
</chart:LineSeries>
</chart:SfCartesianChart>
</Grid>
</Border>
</ContentPage.Content>
</ContentPage>
15 changes: 15 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MainPage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
namespace SmartphoneShipmentsDemo
{
public partial class MainPage : ContentPage
{


public MainPage()
{
InitializeComponent();
}


}

}
27 changes: 27 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MauiProgram.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using Microsoft.Extensions.Logging;
using Syncfusion.Maui.Core.Hosting;

namespace SmartphoneShipmentsDemo
{
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();
}
}
}
28 changes: 28 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/Model/Model.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
namespace SmartphoneShipmentsDemo
{

public class Model
{
public string BrandName { get; set; }

public double Quarter1 { get; set; }

public double Quarter2 { get; set; }

public double Quarter3 { get; set; }

public double Quarter4 { get; set; }

public double MarketShare { get; set; }

public Model(string brandName,double q1, double q2, double q3, double q4, double marketShare)
{
BrandName = brandName;
Quarter1 = q1;
Quarter2 = q2;
Quarter3 = q3;
Quarter4 = q4;
MarketShare = marketShare;
}
}
}
6 changes: 6 additions & 0 deletions SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/Platforms/Android/AndroidManifest.xml
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit a7aaf00

Please sign in to comment.