Skip to content

Commit 6aff9c4

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/bubbleserie
903598 Update blog sample in MAUI Bubble Chart.
2 parents 6561a71 + 0055ec0 commit 6aff9c4

Some content is hidden

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

80 files changed

+1537
-2
lines changed

‎MarketCap.sln‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.11.35303.130
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MarketCap", "MarketCap\MarketCap.csproj", "{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}"
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+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{656EBEEF-D57A-439E-88BD-2C81A9D8AB2B}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {0714E7C7-5290-45B6-BC11-E0EF41C9A7E0}
26+
EndGlobalSection
27+
EndGlobal

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

‎MarketCap/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace MarketCap
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new MainPage();
10+
}
11+
}
12+
}

‎MarketCap/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="MarketCap.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:MarketCap"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="MarketCap">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎MarketCap/AppShell.xaml.cs‎

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

‎MarketCap/MainPage.xaml‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:model="clr-namespace:MarketCap"
6+
x:Class="MarketCap.MainPage">
7+
8+
<Border Margin="25" Padding="{OnPlatform Default=8, Android=7,iOS=7}" StrokeThickness="3" Stroke="Gray" StrokeShape="RoundRectangle 15">
9+
<chart:SfCartesianChart HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
10+
<chart:SfCartesianChart.Resources>
11+
<ResourceDictionary>
12+
<x:String x:Key="UpTrendIcon">M3.2999878,20.999992 L3.2999878,31.099993 0,31.099993 0,24.300009z
13+
M7.4000244,16.900018 L7.4000244,31.099993 4.0999756,31.099993 4.0999756,20.30001z
14+
M16.400024,16.499994 L18.599976,18.700004 19.700012,17.599998 19.700012,31.099993 16.400024,31.099993z
15+
M23.799988,13.600001 L23.799988,31.199999 20.5,31.199999 20.5,16.900018z
16+
M11.5,12.800013 L11.5,31.099993 8.2000122,31.099993 8.2000122,16.1z
17+
M12.299988,12.400019 L15.599976,15.700006 15.599976,31.099993 12.299988,31.099993z
18+
M27.900024,9.499996 L27.900024,31.199999 24.599976,31.199999 24.599976,12.800013z
19+
M28.700012,9.1000021 L29,9.1000021 32,12.100001 32,31.099993 28.700012,31.099993z
20+
M31.400024,0 L31.099976,7.2000096 28.900024,4.9999983 18.200012,15.700006
21+
17.900024,15.999993 11.700012,9.8000143 0.70001221,20.80001 0.70001221,15.800012
22+
11.599976,4.8000167 17.900024,11.100002 26.400024,2.6000052 24.200012,0.4000244z</x:String>
23+
</ResourceDictionary>
24+
</chart:SfCartesianChart.Resources>
25+
<chart:SfCartesianChart.Title>
26+
<Grid>
27+
<Grid.RowDefinitions>
28+
<RowDefinition Height="{OnPlatform Android=68,Default=80,iOS=68}"/>
29+
</Grid.RowDefinitions>
30+
<Grid.ColumnDefinitions>
31+
<ColumnDefinition Width="55"/>
32+
<ColumnDefinition Width="Auto"/>
33+
</Grid.ColumnDefinitions>
34+
35+
<Path Data="{StaticResource UpTrendIcon}" Fill="#FF000000" Margin="10,15,10,0">
36+
<Path.RenderTransform>
37+
<TransformGroup>
38+
<TransformGroup.Children>
39+
<RotateTransform Angle="0"/>
40+
<ScaleTransform ScaleX="1" ScaleY="1"/>
41+
</TransformGroup.Children>
42+
</TransformGroup>
43+
</Path.RenderTransform>
44+
</Path>
45+
<StackLayout Grid.Column="1" Grid.Row="0" Margin="7,7,0,0">
46+
<Label Text="Visualizing Country GDP and Market Cap Through Public Companies" FontSize="{OnPlatform Android=12,Default=20,iOS=12}" FontAttributes="Bold" TextColor="Black"/>
47+
<Label Text="Detailed Analysis Highlighting Market Capitalization, GDP, and the Number of Publicly Listed Companies" FontSize="{OnPlatform Android=10,Default=16,iOS=10}" TextColor="Black" Margin="0,2,0,0"/>
48+
</StackLayout>
49+
</Grid>
50+
</chart:SfCartesianChart.Title>
51+
52+
<chart:SfCartesianChart.BindingContext>
53+
<model:MarketCapViewModel/>
54+
</chart:SfCartesianChart.BindingContext>
55+
56+
<chart:SfCartesianChart.TooltipBehavior>
57+
<chart:ChartTooltipBehavior/>
58+
</chart:SfCartesianChart.TooltipBehavior>
59+
60+
<chart:SfCartesianChart.XAxes>
61+
<chart:NumericalAxis Minimum="0" Maximum="400" ShowMajorGridLines="False">
62+
<chart:NumericalAxis.Title>
63+
<chart:ChartAxisTitle Text="Countries GDP Levels"/>
64+
</chart:NumericalAxis.Title>
65+
<chart:NumericalAxis.LabelStyle>
66+
<chart:ChartAxisLabelStyle TextColor="Black"/>
67+
</chart:NumericalAxis.LabelStyle>
68+
<chart:NumericalAxis.AxisLineStyle>
69+
<chart:ChartLineStyle Stroke="black"/>
70+
</chart:NumericalAxis.AxisLineStyle>
71+
<chart:NumericalAxis.MajorTickStyle>
72+
<chart:ChartAxisTickStyle Stroke="black"/>
73+
</chart:NumericalAxis.MajorTickStyle>
74+
</chart:NumericalAxis>
75+
</chart:SfCartesianChart.XAxes>
76+
77+
<chart:SfCartesianChart.YAxes>
78+
<chart:NumericalAxis Minimum="0" Maximum="6000" Interval="1000" ShowMajorGridLines="False" LabelCreated="OnLabelCreated" PlotOffsetStart="10">
79+
<chart:NumericalAxis.Title>
80+
<chart:ChartAxisTitle Text="No of Companies"/>
81+
</chart:NumericalAxis.Title>
82+
<chart:NumericalAxis.LabelStyle>
83+
<chart:ChartAxisLabelStyle TextColor="Black"/>
84+
</chart:NumericalAxis.LabelStyle>
85+
<chart:NumericalAxis.AxisLineStyle>
86+
<chart:ChartLineStyle Stroke="black"/>
87+
</chart:NumericalAxis.AxisLineStyle>
88+
<chart:NumericalAxis.MajorTickStyle>
89+
<chart:ChartAxisTickStyle Stroke="black"/>
90+
</chart:NumericalAxis.MajorTickStyle>
91+
</chart:NumericalAxis>
92+
</chart:SfCartesianChart.YAxes>
93+
94+
<model:BubbleExt XBindingPath="Gdp" MaximumRadius="{OnPlatform Android=28, Default=50, iOS=28}" MinimumRadius="5" EnableTooltip="True"
95+
YBindingPath="Company" SizeValuePath="Size" Stroke="Black" StrokeWidth="2"
96+
ItemsSource="{Binding MarketCapData}"
97+
EnableAnimation="True">
98+
99+
<chart:BubbleSeries.TooltipTemplate>
100+
<DataTemplate>
101+
<Grid BackgroundColor="Black">
102+
<Grid.RowDefinitions>
103+
<RowDefinition Height="Auto"/>
104+
<RowDefinition Height="Auto"/>
105+
<RowDefinition Height="Auto"/>
106+
</Grid.RowDefinitions>
107+
<Grid.ColumnDefinitions>
108+
<ColumnDefinition Width="Auto"/>
109+
</Grid.ColumnDefinitions>
110+
<Grid Grid.Row="0" Grid.Column="0" Margin="3,5,10,3">
111+
<HorizontalStackLayout HorizontalOptions="Center">
112+
<Label Text="{Binding Item.Name}" FontSize="18" TextColor="White" HorizontalTextAlignment="Center" Margin="0,0,0,0"/>
113+
</HorizontalStackLayout>
114+
</Grid>
115+
<BoxView Grid.Row="1" Grid.Column="0" VerticalOptions="Center" BackgroundColor="White" HeightRequest="1"/>
116+
<Grid Grid.Row="2" Grid.Column="0" Margin="3,5,10,3">
117+
<StackLayout>
118+
<Label Text="{Binding Item.Gdp,StringFormat='GDP : {0} '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
119+
<Label Text="{Binding Item.Company,StringFormat='Companies listed : {0} '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
120+
<Label Text="{Binding Item.Size,StringFormat='Market Cap : € {0} B '}" TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Start"/>
121+
</StackLayout>
122+
</Grid>
123+
</Grid>
124+
</DataTemplate>
125+
</chart:BubbleSeries.TooltipTemplate>
126+
</model:BubbleExt>
127+
</chart:SfCartesianChart>
128+
</Border>
129+
</ContentPage>

‎MarketCap/MainPage.xaml.cs‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
using Syncfusion.Maui.Charts;
2+
3+
namespace MarketCap
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
8+
public MainPage()
9+
{
10+
InitializeComponent();
11+
}
12+
private void OnLabelCreated(object sender, Syncfusion.Maui.Charts.ChartAxisLabelEventArgs e)
13+
{
14+
// Check if the value is in thousands
15+
if (e.Position is double value && value >= 1000)
16+
{
17+
// Divide by 1000 and append "k"
18+
e.Label = (value / 1000).ToString("0") + "K";
19+
}
20+
}
21+
}
22+
23+
public class BubbleExt : BubbleSeries
24+
{
25+
protected override ChartSegment CreateSegment()
26+
{
27+
return new BubbleSegmentExt();
28+
}
29+
30+
}
31+
public class BubbleSegmentExt : BubbleSegment
32+
{
33+
protected override void Draw(ICanvas canvas)
34+
{
35+
base.Draw(canvas);
36+
37+
if (Series is BubbleExt && Series.BindingContext is MarketCapViewModel viewModel)
38+
{
39+
40+
float imageX = CenterX - (Radius / 2);
41+
float imageY = CenterY - (Radius / 2);
42+
43+
float diameter = Radius * 2; // Since radius is half of the diameter
44+
canvas.DrawImage(viewModel.MarketCapData[Index].ImageIcon, CenterX - Radius, CenterY - Radius, diameter, diameter);
45+
}
46+
}
47+
}
48+
49+
}

0 commit comments

Comments
 (0)