Skip to content

Commit acde842

Browse files
SyncfusionKarthikeyanSyncfusionKarthikeyan
authored
Merge pull request #1 from SyncfusionExamples/WPF-Stacked-Area-100-Chart
WPF-Stacked Area 100 Chart to Visualize the World Vehicle Production in Major Countries.
2 parents 3132f67 + 2eb9c25 commit acde842

File tree

11 files changed

+332
-1
lines changed

11 files changed

+332
-1
lines changed

‎README.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,29 @@
11
# Creating-a-WPF-Stacked-Area-100-Chart-to-Visualize-the-World-Vehicle-Production-in-Major-Countries
2-
This sample demonstrates how to create a WPF Stacked Area 100 Chart to Visualize the World Motor Vehicle Production by selected countries.
2+
3+
4+
A stacked area 100 series is a type of data visualization that represents multiple data series stacked on top of each other, with each series normalized to 100%. In this visualization, the total height of each point along the x-axis represents 100%, and the different colored areas represent the proportion of each data series contributing to that total at any given point.
5+
6+
Here, we have showing the relative contribution of different categories of vehicle production to a whole over time. It allows for easy comparison of the distribution of vehicle production among categories while maintaining a consistent scale across all points on the x-axis.
7+
8+
## Customizing the axis
9+
This involves fine-tuning various aspects of how the axes are presented in a visual representation, such as a chart or graph. The following properties allow for tailored adjustments to both primary and secondary axes:
10+
11+
### FontSize:
12+
This property enables adjustments to the font size of the axis labels. By modifying the font size, users can ensure that the labels are legible and appropriately sized for the visualization.
13+
14+
### ShowGridLines:
15+
Gridlines provide a visual aid that helps users interpret the data points on the chart. This property allows users to control the visibility of these gridlines, toggling them on or off as needed for clarity.
16+
17+
### LabelPlacement:
18+
Proper positioning of axis labels is crucial for readability. The LabelPlacement property allows users to specify where the labels appear relative to the axis, ensuring they do not overlap or obstruct other elements of the chart.
19+
20+
### Visibility:
21+
This property governs the visibility of the axis line itself. Users can choose to display or hide the axis line based on their preferences or the specific requirements of the visualization.
22+
23+
## Output
24+
25+
![WPFStacked100AreaChartOutput](https://github.com/SyncfusionExamples/Creating-a-WPF-Stacked-Area-100-Chart-to-Visualize-the-World-Vehicle-Production-in-Major-Countries/assets/105482474/86231566-006d-4830-a4f7-1c333afb3004)
26+
27+
28+
29+

‎WPFStackedArea100Chart/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="WPFStackedArea100Chart.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:WPFStackedArea100Chart"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎WPFStackedArea100Chart/App.xaml.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.Configuration;
2+
using System.Data;
3+
using System.Windows;
4+
5+
namespace WPFStackedArea100Chart
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎WPFStackedArea100Chart/AssemblyInfo.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎WPFStackedArea100Chart/MainWindow.xaml‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<Window x:Class="WPFStackedArea100Chart.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:local="clr-namespace:WPFStackedArea100Chart"
7+
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="450" Width="800">
10+
<Grid x:Name="grid">
11+
<Grid.DataContext>
12+
<local:ViewModel/>
13+
</Grid.DataContext>
14+
<Grid.Resources>
15+
<DataTemplate x:Key="tooltipTemplate">
16+
<StackPanel Orientation="Horizontal">
17+
<TextBlock Text="{Binding Series.Label}"
18+
Foreground="White" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
19+
<TextBlock Text=" : " Foreground="White" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
20+
<TextBlock Text="{Binding YData,StringFormat='###'}"
21+
Foreground="White" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
22+
</StackPanel>
23+
</DataTemplate>
24+
</Grid.Resources>
25+
26+
<Border Margin="30" Padding="15" BorderThickness="1.5" CornerRadius="10" BorderBrush="#8d8794">
27+
28+
<chart:SfChart HorizontalHeaderAlignment="Left" Palette="LightCandy" >
29+
30+
<chart:SfChart.Header>
31+
<Border BorderBrush="White" Margin="0, 0, 0, 10">
32+
<StackPanel Orientation="Horizontal">
33+
<Grid Width="10" Background="CadetBlue" Margin="0, 8, 0, 5"/>
34+
<StackPanel>
35+
<TextBlock FontSize="18" Margin="5"
36+
Text="World Vehicle Production in Major Countries"/>
37+
<TextBlock FontSize="13" Margin="5"
38+
Text="Total passenger cars and commercial vehicles"/>
39+
</StackPanel>
40+
</StackPanel>
41+
</Border>
42+
</chart:SfChart.Header>
43+
44+
<chart:SfChart.Legend>
45+
<chart:ChartLegend DockPosition="Bottom" IconHeight="14" IconWidth="14" FontSize="13" HorizontalAlignment="Left"/>
46+
</chart:SfChart.Legend>
47+
<!--Initialize the axis for chart-->
48+
<chart:SfChart.PrimaryAxis>
49+
<chart:CategoryAxis ShowGridLines="False" FontSize="13" TickLineSize="0" >
50+
51+
</chart:CategoryAxis>
52+
</chart:SfChart.PrimaryAxis>
53+
54+
<chart:SfChart.SecondaryAxis>
55+
<chart:NumericalAxis ShowGridLines="False" Visibility="Collapsed" >
56+
</chart:NumericalAxis>
57+
</chart:SfChart.SecondaryAxis>
58+
<chart:SfChart.Behaviors>
59+
<chart:ChartTooltipBehavior VerticalOffset="-10" >
60+
61+
</chart:ChartTooltipBehavior>
62+
</chart:SfChart.Behaviors>
63+
64+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="Brazil" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="BrazilValue" >
65+
</chart:StackingArea100Series>
66+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="China" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="ChinaValue" >
67+
</chart:StackingArea100Series>
68+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="Germany" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="GermanyValue" >
69+
</chart:StackingArea100Series>
70+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="India" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="IndiaValue" >
71+
</chart:StackingArea100Series>
72+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="Japan" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="JapanValue" >
73+
</chart:StackingArea100Series>
74+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="Uk" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="UKValue">
75+
</chart:StackingArea100Series>
76+
<chart:StackingArea100Series TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" Label="United States" ItemsSource="{Binding Collection}" XBindingPath="Year" YBindingPath="USAValue">
77+
</chart:StackingArea100Series>
78+
79+
</chart:SfChart>
80+
</Border>
81+
</Grid>
82+
</Window>

‎WPFStackedArea100Chart/MainWindow.xaml.cs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
using System.Text;
2+
using System.Windows;
3+
using System.Windows.Controls;
4+
using System.Windows.Data;
5+
using System.Windows.Documents;
6+
using System.Windows.Input;
7+
using System.Windows.Media;
8+
using System.Windows.Media.Imaging;
9+
using System.Windows.Navigation;
10+
using System.Windows.Shapes;
11+
12+
namespace WPFStackedArea100Chart
13+
{
14+
/// <summary>
15+
/// Interaction logic for MainWindow.xaml
16+
/// </summary>
17+
public partial class MainWindow : Window
18+
{
19+
public MainWindow()
20+
{
21+
InitializeComponent();
22+
}
23+
}
24+
}

‎WPFStackedArea100Chart/Model/Model.cs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows.Documents;
7+
8+
namespace WPFStackedArea100Chart
9+
{
10+
public class Model
11+
{
12+
public string Year { get; set; }
13+
public double BrazilValue { get; set; }
14+
public double ChinaValue { get; set; }
15+
public double GermanyValue { get; set; }
16+
public double IndiaValue { get; set; }
17+
public double JapanValue { get; set; }
18+
public double UKValue { get; set; }
19+
public double USAValue { get; set; }
20+
21+
public Model(string category, double brazil, double china, double germany, double india, double japan, double uk, double usa)
22+
{
23+
Year = category;
24+
BrazilValue = brazil;
25+
ChinaValue = china;
26+
GermanyValue = germany;
27+
IndiaValue = india;
28+
JapanValue = japan;
29+
UKValue = uk;
30+
USAValue = usa;
31+
}
32+
}
33+
}

‎WPFStackedArea100Chart/ViewModel/ViewModel.cs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
using System.Collections.ObjectModel;
2+
using System.ComponentModel;
3+
using System.IO;
4+
using System.Reflection;
5+
using System.Runtime.CompilerServices;
6+
7+
namespace WPFStackedArea100Chart
8+
{
9+
public class ViewModel : INotifyPropertyChanged
10+
{
11+
private ObservableCollection<Model> collection;
12+
public ObservableCollection<Model> Collection
13+
{
14+
get { return collection; }
15+
set
16+
{
17+
collection = value;
18+
NotifyPropertyChanged();
19+
}
20+
}
21+
22+
23+
public ViewModel()
24+
{
25+
Collection = new ObservableCollection<Model>(ReadCSV("WPFStackedArea100Chart.productionbycountry.csv"));
26+
}
27+
28+
public event PropertyChangedEventHandler? PropertyChanged;
29+
30+
public void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
31+
{
32+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
33+
}
34+
35+
public IEnumerable<Model> ReadCSV(string fileName)
36+
{
37+
Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
38+
Stream inputStream = executingAssembly.GetManifestResourceStream(fileName);
39+
List<string> lines = new List<string>();
40+
List<Model> collection = new List<Model>();
41+
if (inputStream != null)
42+
{
43+
string line;
44+
StreamReader reader = new StreamReader(inputStream);
45+
while ((line = reader.ReadLine()) != null)
46+
{
47+
lines.Add(line);
48+
}
49+
string[] headers = lines[0].Split(',');
50+
lines.RemoveAt(0);
51+
52+
for (int i = 1; i < headers.Length; i++)
53+
{
54+
double[] doubles = new double[lines.Count];
55+
for (int j = 0; j < lines.Count; j++)
56+
{
57+
string[] data = lines[j].Split(',');
58+
if (data[i] == string.Empty)
59+
{
60+
continue;
61+
}
62+
63+
doubles[j] = Convert.ToDouble(data[i]);
64+
65+
}
66+
67+
collection.Add(new Model(headers[i], doubles[0], doubles[1], doubles[2], doubles[3], doubles[4], doubles[5], doubles[6]));
68+
69+
}
70+
71+
}
72+
73+
return collection;
74+
}
75+
}
76+
}

‎WPFStackedArea100Chart/WPFStackedArea100Chart.csproj‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net8.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<ImplicitUsings>enable</ImplicitUsings>
8+
<UseWPF>true</UseWPF>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<None Remove="productionbycountry.csv" />
13+
</ItemGroup>
14+
15+
<ItemGroup>
16+
<EmbeddedResource Include="productionbycountry.csv" />
17+
</ItemGroup>
18+
19+
<ItemGroup>
20+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
21+
</ItemGroup>
22+
23+
</Project>

‎WPFStackedArea100Chart/WPFStackedArea100Chart.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.8.34525.116
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WPFStackedArea100Chart", "WPFStackedArea100Chart.csproj", "{FE10E992-26A4-4BB6-BAF2-DB2389CD74C7}"
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+
{FE10E992-26A4-4BB6-BAF2-DB2389CD74C7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{FE10E992-26A4-4BB6-BAF2-DB2389CD74C7}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{FE10E992-26A4-4BB6-BAF2-DB2389CD74C7}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{FE10E992-26A4-4BB6-BAF2-DB2389CD74C7}.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 = {C1E65F7A-7511-4E81-AA30-FAFFA785ABF6}
24+
EndGlobalSection
25+
EndGlobal

0 commit comments

Comments
 (0)