Merge pull request #1 from SyncfusionExamples/872290-Sample-for-the-3…

…D-column-chart-to-visualize-the-panama-canal-traffic-by-shipment-category 872290-Sample for the 3d Column chart to visualize the Panama canal traffic by shipment category
SyncfusionExamples · Mar 25, 2024 · e470d97 · e470d97
2 parents 41647fe + 3119e18
commit e470d97
Show file tree

Hide file tree

Showing 12 changed files with 282 additions and 2 deletions.
diff --git a/PanamaCanalTransit/PanamaCanalTransit.sln b/PanamaCanalTransit/PanamaCanalTransit.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34321.82
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PanamaCanalTransit", "PanamaCanalTransit\PanamaCanalTransit.csproj", "{2FDA1ED9-DFC8-4D20-B3C8-D176C8AE3085}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{2FDA1ED9-DFC8-4D20-B3C8-D176C8AE3085}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{2FDA1ED9-DFC8-4D20-B3C8-D176C8AE3085}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{2FDA1ED9-DFC8-4D20-B3C8-D176C8AE3085}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{2FDA1ED9-DFC8-4D20-B3C8-D176C8AE3085}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {F0870A70-CF8B-4E97-97D2-88955FACB1BE}
+	EndGlobalSection
+EndGlobal
diff --git a/PanamaCanalTransit/PanamaCanalTransit/App.xaml b/PanamaCanalTransit/PanamaCanalTransit/App.xaml
@@ -0,0 +1,9 @@
+<Application x:Class="PanamaCanalTransit.App"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:local="clr-namespace:PanamaCanalTransit"
+             StartupUri="MainWindow.xaml">
+    <Application.Resources>
+
+    </Application.Resources>
+</Application>
diff --git a/PanamaCanalTransit/PanamaCanalTransit/App.xaml.cs b/PanamaCanalTransit/PanamaCanalTransit/App.xaml.cs
@@ -0,0 +1,14 @@
+using System.Configuration;
+using System.Data;
+using System.Windows;
+
+namespace PanamaCanalTransit
+{
+    /// <summary>
+    /// Interaction logic for App.xaml
+    /// </summary>
+    public partial class App : Application
+    {
+    }
+
+}
diff --git a/PanamaCanalTransit/PanamaCanalTransit/AssemblyInfo.cs b/PanamaCanalTransit/PanamaCanalTransit/AssemblyInfo.cs
@@ -0,0 +1,10 @@
+using System.Windows;
+
+[assembly: ThemeInfo(
+    ResourceDictionaryLocation.None,            //where theme specific resource dictionaries are located
+                                                //(used if a resource is not found in the page,
+                                                // or application resource dictionaries)
+    ResourceDictionaryLocation.SourceAssembly   //where the generic resource dictionary is located
+                                                //(used if a resource is not found in the page,
+                                                // app, or any theme specific resource dictionaries)
+)]
diff --git a/PanamaCanalTransit/PanamaCanalTransit/MainWindow.xaml b/PanamaCanalTransit/PanamaCanalTransit/MainWindow.xaml
@@ -0,0 +1,89 @@
+<Window x:Class="PanamaCanalTransit.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:PanamaCanalTransit"
+        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
+        mc:Ignorable="d" Background="LightGray">
+
+    <Window.DataContext>
+        <local:ViewModel></local:ViewModel>
+    </Window.DataContext>
+
+    <Border Margin="10" Padding="10" BorderThickness="2" CornerRadius="10" BorderBrush="#05144f">
+        <chart:SfChart3D Margin="-25,0,5,5" Depth="200" EnableRotation="True"  PerspectiveAngle="50" Rotation="29" SideBySideSeriesPlacement="True" Background="Transparent">
+            <chart:SfChart3D.Header>
+                <Grid Margin="-100,0,0,3" x:Name="header" Grid.Column="0" HorizontalAlignment="Left">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="70"/>
+                        <ColumnDefinition Width="*"/>
+                    </Grid.ColumnDefinitions>
+
+                    <ContentPresenter  Grid.Column="0">
+                        <ContentPresenter.Content>
+                            <Image Source="Resources\ship.png"></Image>
+                        </ContentPresenter.Content>
+                    </ContentPresenter>
+
+                    <Grid Grid.Column="1" >
+                        <Grid.RowDefinitions>
+                            <RowDefinition></RowDefinition>
+                            <RowDefinition></RowDefinition>
+                        </Grid.RowDefinitions>
+                        <StackPanel Grid.Row="0"   Margin="5,0,0,0" HorizontalAlignment="Left" Orientation="Vertical">
+                            <Label Content="The Panama Canal Traffic by Shipment Category in 2022-2023" FontSize="18"  FontFamily="AntaRegular" FontWeight="Bold"/>
+                            <Label Content="The quantity of shipments passing through the Panama Canal varies across different categories of transit." FontSize="14"  Margin="0,2,0,0" FontFamily="AntaRegular"/>
+                        </StackPanel>
+
+                        <StackPanel Grid.Row="1"  Orientation="Horizontal" Margin="10,5,0,5">
+                            <Rectangle Height="12" Width="30" RadiusX="5" RadiusY="5" Fill="#96D759" />
+                            <TextBlock Text="2022" FontSize="15" Margin="7,0,0,0" />
+                            <Rectangle Height="12" Width="30" RadiusX="5" RadiusY="5" Fill="#775DD0" Margin="7,0,0,0" />
+                            <TextBlock Text="2023" Margin="7,0,0,0" FontSize="15"/>
+                        </StackPanel>
+                    </Grid>
+                </Grid>
+            </chart:SfChart3D.Header>
+
+            <chart:SfChart3D.PrimaryAxis>
+                <chart:CategoryAxis3D TickLineSize="0" ShowGridLines="False">
+                    <chart:CategoryAxis3D.LabelStyle>
+                        <chart:LabelStyle FontSize="12.8"/>
+                    </chart:CategoryAxis3D.LabelStyle>
+                </chart:CategoryAxis3D>
+            </chart:SfChart3D.PrimaryAxis>
+
+            <chart:SfChart3D.SecondaryAxis>
+                <chart:NumericalAxis3D TickLineSize="0" Interval="500" Maximum="3500">
+                    <chart:NumericalAxis3D.LabelStyle>
+                        <chart:LabelStyle FontSize="12.9"/>
+                    </chart:NumericalAxis3D.LabelStyle>
+                </chart:NumericalAxis3D>
+            </chart:SfChart3D.SecondaryAxis>
+
+            <chart:ColumnSeries3D ItemsSource="{Binding TransitData}"
+                                  XBindingPath="Category"
+                                  YBindingPath="NumberOfCrossing2022"
+                                  Interior="#96D759"
+                                  SegmentSpacing="0.3"
+                                  Label="2022">
+                <chart:ColumnSeries3D.AdornmentsInfo>
+                    <chart:ChartAdornmentInfo3D ShowLabel="True" FontSize="7" Margin="0,0.1,0,0" LabelPosition="Inner"></chart:ChartAdornmentInfo3D>
+                </chart:ColumnSeries3D.AdornmentsInfo>
+
+            </chart:ColumnSeries3D>
+
+            <chart:ColumnSeries3D ItemsSource="{Binding TransitData}"
+                                  XBindingPath="Category"
+                                  YBindingPath="NumberOfCrossing2023"
+                                  Interior="#775DD0"
+                                  SegmentSpacing="0.3"
+                                  Label="2023">
+                <chart:ColumnSeries3D.AdornmentsInfo>
+                    <chart:ChartAdornmentInfo3D FontSize="7" Margin="0,0.1,0,0" ShowLabel="True" LabelPosition="Inner"></chart:ChartAdornmentInfo3D>
+                </chart:ColumnSeries3D.AdornmentsInfo>
+            </chart:ColumnSeries3D>
+        </chart:SfChart3D>
+    </Border>
+</Window>   
diff --git a/PanamaCanalTransit/PanamaCanalTransit/MainWindow.xaml.cs b/PanamaCanalTransit/PanamaCanalTransit/MainWindow.xaml.cs
@@ -0,0 +1,32 @@
+using System.Windows;
+
+namespace PanamaCanalTransit
+{
+    /// <summary>
+    /// Interaction logic for MainWindow.xaml
+    /// </summary>
+    public partial class MainWindow : Window
+    {
+        public MainWindow()
+        {
+            InitializeComponent();
+            this.StateChanged += MainWindow_StateChanged;
+        }
+
+        private void MainWindow_StateChanged(object? sender, EventArgs e)
+        {
+            if (this.WindowState == WindowState.Minimized)
+            {
+                header.Margin = new Thickness(-100, 0, 0, 3);
+            }
+            else if (this.WindowState == WindowState.Maximized)
+            {
+                header.Margin = new Thickness(-400, 3, 0, 10);
+            }
+            else if (this.WindowState == WindowState.Normal)
+            {
+                header.Margin = new Thickness(-100, 0, 0, 3);
+            }
+        }
+    }
+}
diff --git a/PanamaCanalTransit/PanamaCanalTransit/Model.cs b/PanamaCanalTransit/PanamaCanalTransit/Model.cs
@@ -0,0 +1,16 @@
+namespace PanamaCanalTransit
+{
+    public class TransitModel
+    {
+        public string? Category { get; set; }
+        public double NumberOfCrossing2022 {  get; set; }
+        public double NumberOfCrossing2023 { get; set; }
+
+        public TransitModel(string category,double numberOfCrossing2023,double numberOfCrossing2022)
+        {
+            Category = category;
+            NumberOfCrossing2023 = numberOfCrossing2023;
+            NumberOfCrossing2022 =numberOfCrossing2022;
+        }
+    }
+}
diff --git a/PanamaCanalTransit/PanamaCanalTransit/PanamaCanalTransit.csproj b/PanamaCanalTransit/PanamaCanalTransit/PanamaCanalTransit.csproj
@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <OutputType>WinExe</OutputType>
+    <TargetFramework>net8.0-windows</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <UseWPF>true</UseWPF>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <None Remove="Resources\ship.png" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Include="Resources\ship.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
+  </ItemGroup>
+
+</Project>
diff --git a/PanamaCanalTransit/PanamaCanalTransit/PanamaCanalTransit.csproj.user b/PanamaCanalTransit/PanamaCanalTransit/PanamaCanalTransit.csproj.user
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup />
+  <ItemGroup>
+    <ApplicationDefinition Update="App.xaml">
+      <SubType>Designer</SubType>
+    </ApplicationDefinition>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Update="MainWindow.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+  </ItemGroup>
+</Project>
diff --git a/PanamaCanalTransit/PanamaCanalTransit/Resources/ship.png b/PanamaCanalTransit/PanamaCanalTransit/Resources/ship.png
diff --git a/PanamaCanalTransit/PanamaCanalTransit/ViewModel.cs b/PanamaCanalTransit/PanamaCanalTransit/ViewModel.cs
@@ -0,0 +1,24 @@
+using System.Collections.ObjectModel;
+
+namespace PanamaCanalTransit
+{
+    public class ViewModel
+    {
+        public ObservableCollection<TransitModel> TransitData {  get; set; }
+        public ViewModel() 
+        {
+            TransitData = new ObservableCollection<TransitModel>();
+            TransitData.Add(new TransitModel("Dry Bulk", 2649, 2910));
+            TransitData.Add(new TransitModel("Container", 2787, 2822));
+            TransitData.Add(new TransitModel("Chemical Tankers", 2196, 2332));
+            TransitData.Add(new TransitModel("LPG", 1757, 1501));
+            TransitData.Add(new TransitModel("Vehicle Carriers", 813, 746));
+            TransitData.Add(new TransitModel("General Cargo", 519, 645));
+            TransitData.Add(new TransitModel("Crude Tankers", 499, 607));
+            TransitData.Add(new TransitModel("Refrigerated", 546, 604));
+            TransitData.Add(new TransitModel("LNG", 326 ,374));
+            TransitData.Add(new TransitModel("Passengers", 240, 127));
+            TransitData.Add(new TransitModel("Others", 306, 335));
+        }
+    }
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,24 @@
-# Creating-a-3D-WPF-Column-Chart-to-Visualize-the-Panama-Canal-Traffic-by-Shipment-Category
-This article demonstrates how to creating a visually engaging 3D column chart using WPF. The chart aims to provide insights into the traffic flow through the Panama Canal, with data categorized based on shipment types. 
+# Creating a 3D WPF Column Chart to Visualize the Panama Canal Traffic by Shipment Category
+This sample demonstrates how to creating a visually engaging 3D column chart using WPF. The chart aims to provide insights into the traffic flow through the Panama Canal, with data categorized based on shipment types. 
+
+## Customizing the Chart Appearance
+The appearence of the Column3D chart can be customized to improve the visual quality, we can customize the appearence using the [PerspectiveAngle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_PerspectiveAngle), [Rotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Rotation), [EnableRotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_EnableRotation), [Depth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart3D.html#Syncfusion_UI_Xaml_Charts_SfChart3D_Depth) of the chart, [Interior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior) and [SegmentSpacing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ColumnSeries3D.html#Syncfusion_UI_Xaml_Charts_ColumnSeries3D_SegmentSpacing) of the column series. 
+
+## Adding Data labels in Column chart
+
+By using the [ChartAdornmentsInfo3D](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfo3D.html) of the ColumnSeries3D  class, we can customized the data label of segments on Column chart using [ShowLabel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_ShowLabel), [LabelPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_LabelPosition), [FontSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_FontSize) and [Margin](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAdornmentInfoBase.html#Syncfusion_UI_Xaml_Charts_ChartAdornmentInfoBase_Margin)
+
+By implementing these customizations, we can transform the  3D column chart into a visually striking representation of Panama Canal traffic, enriched with insightful details and clarity.
+
+ we’ll get an output mentioned below,
+
+![image](https://github.com/SyncfusionExamples/Creating-a-3D-WPF-Column-Chart-to-Visualize-the-Panama-Canal-Traffic-by-Shipment-Category/assets/113962276/0ce2b782-a7d9-41e3-b0ec-8c27e50e2eed)
+
+## Troubleshooting
+
+### Path too long exception
+
+If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
+
+For a step-by-step procedure, refer to the [Panama Canal traffic]() blog post.
+