Skip to content

Commit 460e7d6

Browse files
VimalaThirumalaikumarVimalaThirumalaikumar
authored
Merge pull request #1 from SyncfusionExamples/Add_Sample
Attach the Treemap Chart blog sample
2 parents b440d64 + bd355ca commit 460e7d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1585
-2
lines changed

‎README.md‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,45 @@
1-
# Visualizing-ICC-Trophy-Wins-by-Team-Using-Syncfusion-.NET-MAUI-Treemap-Chart
2-
Explore how to visualize ICC trophy wins by cricket teams using the Syncfusion .NET MAUI Treemap Chart. This guide demonstrates data binding, chart customization, and interactive features for building engaging sports data dashboards.
1+
# Visualizing ICC Trophy Wins by Team Using Syncfusion .NET MAUI Treemap Chart
2+
3+
## Overview
4+
5+
This .NET MAUI application visualizes the ICC trophy wins of various cricketing nations using Syncfusion's data visualization controls. It features an interactive `TreeMap chart` to compare total title wins by country and a `Circular Chart` to drill down into the types of trophies (ODI, T20, Test) won by each team.
6+
7+
## Features
8+
9+
### TreeMap Chart (SfTreeMap)
10+
- **Purpose**:
11+
The TreeMap chart is used to display hierarchical or grouped data as a set of nested rectangles. In this application, it visualizes the total ICC title wins by country, where each rectangle represents a country and its size corresponds to the number of titles won.
12+
13+
- **Control**:
14+
`SfTreeMap` is a Syncfusion control that supports various layout types (like Squarified, Slice and Dice) and allows for color mapping, tooltips, and drill-down interactions.
15+
16+
- **Interactivity**:
17+
Users can tap on a country to trigger navigation or display a detailed breakdown of that country’s trophy wins in another chart (like a Circular Chart).
18+
19+
### Circular Chart (SfCircularChart)
20+
- **Purpose**:
21+
This chart provides a category-wise breakdown of a selected country’s ICC trophies—such as ODI World Cups, T20 World Cups, and Test Championships.
22+
23+
- **Control**:
24+
`SfCircularChart` is a versatile charting control from Syncfusion that supports pie, doughnut, and radial bar charts. In this case, the doughnut chart format is used for a clean and modern look.
25+
26+
- **Color Mapping**:
27+
Each trophy category is assigned a distinct color, making it easy to visually differentiate between them at a glance.
28+
29+
After executing these code examples, we will get the output that resembles the following image.
30+
31+
![TreeMap Chart](https://github.com/user-attachments/assets/30de8bc2-37ff-4ed7-b65a-9d20109d7b65)
32+
33+
## Resources
34+
35+
- [Syncfusion .NET MAUI TreeMap Documentation](https://help.syncfusion.com/maui/treemap/overview)
36+
- [Syncfusion .NET MAUI Circular Chart Documentation](https://help.syncfusion.com/maui/cartesian-charts/overview)
37+
- [Syncfusion MAUI Controls](https://help.syncfusion.com/maui/introduction/overview)
38+
39+
## Troubleshooting
40+
41+
### Path Too Long Exception
42+
43+
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.
44+
45+
For a step-by-step procedure, refer to the [Visualizing ICC Trophy Wins by Team Using Syncfusion .NET MAUI Treemap Chart](#).

‎TreeMapChart/TreeMapChart.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}") = "TreeMapChart", "TreeMapChart\TreeMapChart.csproj", "{F79FF125-B33F-4F0B-8B3B-0100B7696170}"
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+
{F79FF125-B33F-4F0B-8B3B-0100B7696170}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{F79FF125-B33F-4F0B-8B3B-0100B7696170}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{F79FF125-B33F-4F0B-8B3B-0100B7696170}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{F79FF125-B33F-4F0B-8B3B-0100B7696170}.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 = {51B713FF-7F9C-4A8E-B2DC-9009C52BB0A1}
24+
EndGlobalSection
25+
EndGlobal

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

‎TreeMapChart/TreeMapChart/App.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace TreeMapChart
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+
}

‎TreeMapChart/TreeMapChart/AppShell.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+
<Shell
3+
x:Class="TreeMapChart.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:TreeMapChart"
7+
FlyoutBehavior="Disabled"
8+
Title="TreeMap Chart">
9+
10+
<ShellContent
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</Shell>

‎TreeMapChart/TreeMapChart/AppShell.xaml.cs‎

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

‎TreeMapChart/TreeMapChart/MainPage.xaml‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap"
5+
xmlns:local="clr-namespace:TreeMapChart"
6+
x:Class="TreeMapChart.MainPage">
7+
8+
<ContentPage.Content>
9+
<!-- Border around entire content -->
10+
<Border Margin="10,18,10,10" Padding="5" Stroke="{OnPlatform Default=Black, iOS=White}" StrokeThickness="2" StrokeShape="RoundRectangle 10">
11+
12+
<Grid RowDefinitions="Auto,*">
13+
<!-- Title Section -->
14+
<HorizontalStackLayout Grid.Row="0">
15+
<Image Source="cup.png" WidthRequest="50" HeightRequest="60" VerticalOptions="Center" HorizontalOptions="Center"/>
16+
<Label Text="ICC Men's World Cup Winners 1975 - 2025"
17+
VerticalTextAlignment="Center"
18+
HorizontalTextAlignment="Center"
19+
FontSize="{OnPlatform Default=25, Android=15, iOS=15}"
20+
Padding="3"
21+
FontAttributes="Bold"/>
22+
</HorizontalStackLayout>
23+
24+
<!-- TreeMap Section -->
25+
<treemap:SfTreeMap x:Name="treeMapChart"
26+
DataSource="{Binding CountryTitles}"
27+
Grid.Row="1"
28+
Margin="8"
29+
RangeColorValuePath="TotalTitles"
30+
PrimaryValuePath="TotalTitles"
31+
ShowToolTip="True"
32+
SelectionMode="Single"
33+
SelectionChanged="TreeMapChart_SelectionChanged">
34+
35+
<!-- Leaf Item Settings -->
36+
<treemap:SfTreeMap.LeafItemSettings>
37+
<treemap:TreeMapLeafItemSettings LabelPath="Country" Spacing="3">
38+
<treemap:TreeMapLeafItemSettings.TextStyle>
39+
<treemap:TreeMapTextStyle TextColor="White" FontSize="{OnPlatform Default=18, Android=12, iOS=11}" FontAttributes="Bold"/>
40+
</treemap:TreeMapLeafItemSettings.TextStyle>
41+
</treemap:TreeMapLeafItemSettings>
42+
</treemap:SfTreeMap.LeafItemSettings>
43+
44+
<!-- Tooltip Template -->
45+
<treemap:SfTreeMap.ToolTipTemplate>
46+
<DataTemplate>
47+
<StackLayout Orientation="Horizontal">
48+
<Rectangle HeightRequest="30" WidthRequest="8" Fill="{Binding Background}"/>
49+
<StackLayout Orientation="Vertical">
50+
<Label Text="{Binding PrimaryValueText}" FontSize="12.5" Padding="5,0,0,0" FontAttributes="Bold" TextColor="White"/>
51+
<Label Text="{Binding Item.TotalTitles, StringFormat='Titles : {0}'}" FontSize="12" Padding="5,0,0,0" Margin="0,2,0,0" TextColor="White"/>
52+
</StackLayout>
53+
</StackLayout>
54+
</DataTemplate>
55+
</treemap:SfTreeMap.ToolTipTemplate>
56+
57+
</treemap:SfTreeMap>
58+
</Grid>
59+
</Border>
60+
</ContentPage.Content>
61+
</ContentPage>
62+

‎TreeMapChart/TreeMapChart/MainPage.xaml.cs‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
using Syncfusion.Maui.TreeMap;
2+
3+
namespace TreeMapChart
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
private readonly ViewModel _viewModel;
8+
9+
public MainPage()
10+
{
11+
InitializeComponent();
12+
_viewModel = new ViewModel();
13+
this.BindingContext = _viewModel;
14+
15+
treeMapChart.LeafItemBrushSettings = new TreeMapPaletteBrushSettings()
16+
{
17+
Brushes = new List<Brush>()
18+
{
19+
new SolidColorBrush(Color.FromArgb("#FFB100")),
20+
new SolidColorBrush(Color.FromArgb("#1E90FF")),
21+
new SolidColorBrush(Color.FromArgb("#800000")),
22+
new SolidColorBrush(Color.FromArgb("#006600")),
23+
new SolidColorBrush(Color.FromArgb("#35CAFE")),
24+
new SolidColorBrush(Color.FromArgb("#0033A0")),
25+
new SolidColorBrush(Color.FromArgb("#2F4F4F")),
26+
new SolidColorBrush(Color.FromArgb("#228B22")),
27+
}
28+
};
29+
}
30+
31+
private void TreeMapChart_SelectionChanged(object sender, TreeMapSelectionChangedEventArgs e)
32+
{
33+
if (sender is SfTreeMap treeMap)
34+
{
35+
// Retrieve the selected item's country name
36+
string? selectedCountry = treeMap.SelectedItems.FirstOrDefault()?.PrimaryValueText;
37+
38+
if (selectedCountry != null)
39+
{
40+
// Update data based on the selected country
41+
UpdateDataBasedOnSelection(selectedCountry);
42+
_viewModel.SelectedCountry = selectedCountry;
43+
44+
// Navigate to DrillDownPage with updated data
45+
Navigation.PushAsync(new TitleBreakDownPage(_viewModel));
46+
}
47+
}
48+
}
49+
50+
/// <summary>
51+
/// Updates the ViewModel's data based on the selected country.
52+
/// </summary>
53+
/// <param name="country">The selected country.</param>
54+
private void UpdateDataBasedOnSelection(string country)
55+
{
56+
_viewModel.SelectedCountryTotalTitles = country switch
57+
{
58+
"Australia" => 10,
59+
"India" => 7,
60+
"England" => 3,
61+
"West Indies" => 5,
62+
"Pakistan" => 3,
63+
"Sri Lanka" => 3,
64+
"South Africa" => 2,
65+
"New Zealand" => 2,
66+
_ => 0
67+
};
68+
69+
_viewModel.SelectedCountryDetails = country switch
70+
{
71+
"Australia" =>
72+
[
73+
new() { Category = "ODI World Cups", Titles = 6 },
74+
new() { Category = "Champions Trophies", Titles = 2 },
75+
new() { Category = "T20 World Cups", Titles = 1 },
76+
new() { Category = "WTC", Titles = 1 }
77+
],
78+
"India" =>
79+
[
80+
new() { Category = "Champions Trophies", Titles = 3 },
81+
new() { Category = "ODI World Cups", Titles = 2 },
82+
new() { Category = "T20 World Cups", Titles = 2 },
83+
],
84+
"England" =>
85+
[
86+
new() { Category = "T20 World Cups", Titles = 2 },
87+
new() { Category = "ODI World Cups", Titles = 1 },
88+
],
89+
"West Indies" =>
90+
[
91+
new() { Category = "ODI World Cups", Titles = 2 },
92+
new() { Category = "T20 World Cups", Titles = 2 },
93+
new() { Category = "Champions Trophies", Titles = 1 },
94+
],
95+
"Pakistan" =>
96+
[
97+
new() { Category = "ODI World Cups", Titles = 1 },
98+
new() { Category = "T20 World Cups", Titles = 1 },
99+
new() { Category = "Champions Trophies", Titles = 1 },
100+
],
101+
"Sri Lanka" =>
102+
[
103+
new() { Category = "ODI World Cups", Titles = 1 },
104+
new() { Category = "T20 World Cups", Titles = 1 },
105+
new() { Category = "Champions Trophies", Titles = 1 },
106+
],
107+
"South Africa" =>
108+
[
109+
new() { Category = "Champions Trophies", Titles = 1 },
110+
new() { Category = "WTC", Titles = 1 }
111+
],
112+
"New Zealand" =>
113+
[
114+
new() { Category = "Champions Trophies", Titles = 1 },
115+
new() { Category = "WTC", Titles = 1 }
116+
],
117+
_ => throw new NotImplementedException()
118+
};
119+
}
120+
}
121+
}

‎TreeMapChart/TreeMapChart/MauiProgram.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
namespace TreeMapChart
4+
{
5+
public static class MauiProgram
6+
{
7+
public static MauiApp CreateMauiApp()
8+
{
9+
var builder = MauiApp.CreateBuilder();
10+
builder
11+
.UseMauiApp<App>()
12+
.ConfigureSyncfusionCore()
13+
.ConfigureFonts(fonts =>
14+
{
15+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
16+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
17+
});
18+
19+
#if DEBUG
20+
builder.Logging.AddDebug();
21+
#endif
22+
23+
return builder.Build();
24+
}
25+
}
26+
}

‎TreeMapChart/TreeMapChart/Model/WorldCupStats.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace TreeMapChart
2+
{
3+
public class WorldCupStats
4+
{
5+
public string? Country { get; set; }
6+
public int TotalTitles { get; set; }
7+
public string? Category { get; set; }
8+
public int Titles { get; set; }
9+
}
10+
}

0 commit comments

Comments
 (0)