Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (214)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (227)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (946)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (661)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (618)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers

Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers

Welcome to our Chart of the Week blog series.

This time, we’ll visualize the global distribution of cloud provider data centers using the Syncfusion WinUI 100% stacked column chart control.

Microsoft, Amazon, Google, Alibaba, and IBM have spread their global cloud data centers across Asia, North America, and Europe. Refer to the following chart image.

Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chartLet’s see the steps to recreate this chart using the Syncfusion 100% stacked column chart.

Step 1: Gather the data

Let’s gather the data on data center providers from Cloud Myths. Specifically, we are using page 16.

Step 2: Prepare the data for the chart

Next, define the CloudDataCenter class with the Cloud, South-East Asia, North America, Europe, and other properties to store the count for cloud providers.

public class CloudDataCenter
{
   public string Cloud { get; set; }
   public double SoutheastAsia { get; set; }
   public double NorthAmerica { get; set; }
   public double Europe { get; set; }
   public double Others { get; set; }
}

Generate the data collection demonstrating the data providers’ source using the DataCenterPercentage class.

public class DataCenterPercentage
{
   public ObservableCollection<CloudDataCenter> CloudData { get; set; }
   public DataCenterPercentage()
   {
       CloudData = new ObservableCollection<CloudDataCenter>()
       {
             new CloudDataCenter() { Cloud = "Microsoft", SoutheastAsia = 31,NorthAmerica = 37,Europe = 32, Others = 18},
             new CloudDataCenter() { Cloud = "Amazon", SoutheastAsia = 21, NorthAmerica = 25,Europe = 18, Others = 12},
             new CloudDataCenter() { Cloud = "Google", SoutheastAsia = 24, NorthAmerica = 25, Europe = 18, Others = 6 },
             new CloudDataCenter() { Cloud = "Alibaba", SoutheastAsia = 49, NorthAmerica = 4, Europe = 4, Others = 3},
             new CloudDataCenter() { Cloud = "IBM", SoutheastAsia = 8, NorthAmerica = 28, Europe = 18, Others = 6 },
        };
   }
}

Step 3: Configure the Syncfusion WinUI Cartesian Charts control

Let’s configure the Syncfusion WinUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>
            
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>   
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

Step 4: Bind the data to WinUI 100% stacked column chart

Create multiple 100 % stacked column series to display the number and percentage for the distribution of data centers.

The following code example demonstrates how to bind the cloud data to our chart.

<!--Series 1 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="SoutheastAsia" Label="East and South East Asia">
</chart:StackedColumn100Series>

<!--Series 2 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="NorthAmerica" Label="North America">
</chart:StackedColumn100Series>

<!--Series 3 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Europe" Label="Europe">
</chart:StackedColumn100Series>

<!--Series 4 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Others" Label="Rest of the World">
</chart:StackedColumn100Series>

Step 5: Customize the chart appearance

We can enhance the appearance of our chart by customizing its features, such as the title, axis elements, column colors, legend, and data labels.

We can more easily understand the data plotted on the chart by adding a title. Refer to the following code example.

<chart:SfCartesianChart.Header>
 <Border Margin="0,-10,0,20" Padding="7" BorderThickness="2,0,2,2" CornerRadius="0,0,7,7" Border-Brush="#79747E">
  <StackPanel Orientation="Horizontal">
   <Path Data="{StaticResource PathData}" Fill="Black" VerticalAlignment="Center" HorizontalAlign-ment="Center"/>
   <TextBlock Text="Global Cloud Data Centers" Margin="10,0,0,0"/>
  </StackPanel>
 </Border>
</chart:SfCartesianChart.Header>

Let’s customize the axis label style and set the interval type, font size, and other properties.

<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False" TickLineSize="0">
  <chart:CategoryAxis.LabelStyle>
   <chart:LabelStyle FontSize="13"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
            
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Interval="20" ShowMajorGridLines="False">
  <chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle LabelFormat="0'%" FontSize="13"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

Refer to the following code example to configure the 100% stacked column chart color.

XML

<chart:SfCartesianChart PaletteBrushes="{Binding CustomBrushes}">
</chart:SfCartesianChart>

C#

public class DataCenterPercentage
{
   public List<Brush> CustomBrushes{ get; set; }

   public DataCenterPercentage ()
   {
      CustomBrushes = new List<Brush>()
      {
         new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0x81, 0xFF)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0x8C, 0xDB, 0x07)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0xAF, 0x00, 0xFB)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0xFF, 0xC5, 0x1E)),
      };        
   }
}

Refer to the following code example to enable and customize the legend, which indicates the region of the data centers.

<chart:SfCartesianChart.Legend>
 <chart:ChartLegend Placement="Right" ItemMargin="4"/>
</chart:SfCartesianChart.Legend>

Then, enable and customize the data labels for each series in the chart, as shown in the following code example.

<!--Series 1 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.SoutheastAsiaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>        
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 2 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.NorthAmericaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>     
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 3 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.EuropeValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 4 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.OthersValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

Here, we have created the SoutheastAsiaValue, NorthAmericaValue, EuropeValue, and OthersValue properties to store the number of cloud providers with their respective percentage values.

public class CloudDataCenter
{
    private double Total => SoutheastAsia + NorthAmerica + Europe + Others;
    public string SoutheastAsiaValue => $"{SoutheastAsia} ({((SoutheastAsia / Total) * 100):F0}%)";
    public string NorthAmericaValue => $"{NorthAmerica} ({((NorthAmerica / Total) * 100):F0}%)";
    public string EuropeValue => $"{Europe} ({((Europe / Total) * 100):F0}%)";
    public string OthersValue => $"{Others} ({((Others / Total) * 100):F0}%)";     }

After executing these code examples, we’ll get output like in the following image.

Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chart
Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chart

GitHub reference

For more details, refer to the demo on GitHub.

Conclusion

Thanks for reading! In this blog, we have shown how to visualize the global distribution of cloud provider data centers using the Syncfusion WinUI 100 % stacked column chart. We encourage you to follow the steps outlined in this blog and share your valuable feedback in the comments section below.

If you have questions, please contact us via our support forumsupport portal, or feedback portal. We are always eager to help you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed