Chart of the Week: Creating a .NET MAUI Radial Bar Chart for the Most and Least Powerful Passports in 2023

Jollen Moyani - Oct 29 '23 - - Dev Community

Welcome to our Chart of the Week blog series!

Today, we’re venturing into the intriguing world of passport power in 2023, using the Syncfusion .NET MAUI Radial Bar Chart control.

In our globalized society, passport strength (defined by the number of countries one can visit without a visa or with minimal visa requirements) holds considerable importance. To bring this data to life, we’ve designed a dynamic radial bar chart that spotlights the most and least powerful passports in 2023.

The Syncfusion .NET MAUI Radial Bar Chart is a potent visualization tool. Join us as we navigate through creating this chart, uncovering insights into the evolving dynamics of international travel and diplomacy. Visualizing the most and least powerful passports in 2023 using Syncfusion’s .NET MAUI Radial Bar Chart

Let’s see the step-by-step guide to visualize the most and least powerful passports using the .NET MAUI Radial Bar Chart.

Step 1: Gather data on the most and least powerful passports

First, gather the data on most and least powerful passports in 2023.

Step 2: Prepare the data for the chart

Create a class model named PassportModel with the Country and Access properties to hold the data related to most and least powerful passports for the chart.

Refer to the following code example.

public class PassportModel
{
    public string Country { get; set; }
    public double Access { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Then, generate the data collection that illustrates the most and least powerful passport sources using the PassportViewModel class with the WorldMostData** , **** AsianMostData ***,* EuropeanMostData** , **** WorldLeastData ***,* AsianLeastData** , and EuropeanLeastData** properties.

Refer to the following code example.

public string[] Region => new string[] { "Asia", "Europe", "World" };
public ObservableCollection<PassportModel> WorldMostData { get; set; } = new ObservableCollection< PassportModel >();
public ObservableCollection< PassportModel > AsianMostData { get; set; } = new ObservableCollection< PassportModel >();
public ObservableCollection< PassportModel > EuropeanMostData { get; set; } = new ObservableCollection< PassportModel >();
public ObservableCollection< PassportModel > WorldLeastData { get; set; } = new ObservableCollection< PassportModel >();
public ObservableCollection< PassportModel > AsianLeastData { get; set; } = new ObservableCollection< PassportModel >();
public ObservableCollection< PassportModel > EuropeanLeastData { get; set; } = new ObservableCollection< PassportModel >();

public PassportViewModel()
 {
     // Populate WorldMostData
     PopulateData(WorldMostData, new[]
     {
         ("Japan", 190),("Austria", 189),("Belgium",188),("Canada",187),("Greece",186)
     }); 

     // Populate AsianMostData
     PopulateData(AsianMostData, new[]
     {
         ("Singapore", 193), ("Malaysia", 181), ("UAE", 179),
         ("Hong Kong", 167), ("Israel", 159)
     });

     // Populate EuropeanMostData
     PopulateData(EuropeanMostData, new[]
     {
         ("Finland", 190), ("Austria", 189), ("Denmark", 189),
         ("Bulgaria", 176), ("Norway", 188)
     });

     // Populate WorldLeastData
     PopulateData(WorldLeastData, new[]
     {
         ("Iran", 43), ("Libya", 40), ("Sudan", 44),
         ("Yemen", 34), ("Somalia", 35)
     });

     // Populate AsianLeastData
     PopulateData(AsianLeastData, new[]
     {
         ("Afghanistan", 27), ("Syria", 28), ("Iraq", 29),
         ("Pakistan", 33), ("Nepal", 39)
     });

     // Populate EuropeanLeastData
     PopulateData(EuropeanLeastData, new[]
     {
         ("Belarus", 79), ("Albania", 119), ("Montenegro", 124),
         ("Moldova", 121), ("Kosovo", 40)
     });

     private void PopulateData(ObservableCollection< PassportModel > collection, IEnumerable<(string Country, int Access)> data)
     {
       foreach (var (country, access) in data)
       {
           collection.Add(new PassportModel { Country = country, Access = access });
       }
     }

}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure the Syncfusion .NET MAUI Circular Charts

Now, configure the Syncfusion .NET MAUI Circular Charts control using this documentation.

Refer to the following code example.

<chart:SfCircularChart> 
</chart:SfCircularChart>
Enter fullscreen mode Exit fullscreen mode

Step 4: Bind data to the .NET MAUI Radial Bar Chart

Let’s use the Syncfusion Radial Bar Chart to visualize the data.

Refer to the following code example. In it, bind the ItemsSource property with each region’s most and least powerful passport data. Then, bind the XBindingPath and YBindingPath properties with the Country and Access properties, respectively.

<chart:RadialBarSeries ItemsSource="{Binding AsiaMostData}"
                       XBindingPath="Country"
                       YBindingPath="Access"/>
Enter fullscreen mode Exit fullscreen mode 
<chart:RadialBarSeries ItemsSource="{Binding AsiaLeastData}"
                       XBindingPath="Country"
                       YBindingPath="Access"/>
Enter fullscreen mode Exit fullscreen mode

Step 5: Customizing the chart appearance

Let‘s elevate the aesthetics of the .NET MAUI Radial Bar Chart by tailoring its components, including the legend, center view, and tooltip.

a. Add ComboBox to select the different regions in the Radial Bar Chart

We’ll separately display the data on the most and least powerful passports. We’ll also implement a combo box to select the required regions: Asia, Europe, and the World.

Refer to the following code examples.

<Picker Grid.Row="0" Grid.Column="1" VerticalOptions="End" Margin="0,0,100,0" ItemsSource="{Binding Source={x:Reference viewModel},Path=Region}" SelectedItem="{Binding Source={x:Reference viewModel},Path=Region[0]}" SelectedIndex="0" SelectedIndexChanged="Picker_SelectedIndexChanged" HorizontalOptions="End">
</Picker>
Enter fullscreen mode Exit fullscreen mode 
private void Picker_SelectedIndexChanged(object sender, EventArgs e)
 {
     var picker = sender as Picker;
     string selectedRegion = picker.SelectedIndex switch
     {
         0 => "Asia's",
         1 => "Europe's",
         _ => "World's"
     };

     label.Text = selectedRegion;
     label1.Text = selectedRegion;

     var mostData = picker.SelectedIndex switch
     {
         0 => viewModel.AsianMostData,
         1 => viewModel.EuropeanMostData,
         _ => viewModel.WorldMostData
     };

     var leastData = picker.SelectedIndex switch
     {
         0 => viewModel.AsianLeastData,
         1 => viewModel.EuropeanLeastData,
         _ => viewModel.WorldLeastData
     };

     series.ItemsSource = mostData;
     series1.ItemsSource = leastData;
 }
Enter fullscreen mode Exit fullscreen mode

b. Customize the chart legend

Refer to the following code example to enable and customize the legend to indicate which countries are associated with each color.

Refer to the following code example.

<chart:SfCircularChart.Legend>
 <chart:ChartLegend Placement="Right ">
 </chart:ChartLegend>
</chart:SfCircularChart.Legend>
Enter fullscreen mode Exit fullscreen mode

c. Customize the chart color and size

Next, customize the chart’s size and color using the PaletteBrushes , InnerRadius , GapRatio, and other properties.

Refer to the following code example.

public List<Brush> CustomBrushes { get; set; }
CustomBrushes = new List<Brush>
 {
     new SolidColorBrush(Color.FromArgb("#F6991E")),
     new SolidColorBrush(Color.FromArgb("#439772")),
     new SolidColorBrush(Color.FromArgb("#A4382D")),
     new SolidColorBrush(Color.FromArgb("#2A78F4")),
     new SolidColorBrush(Color.FromArgb("#D82591")),
 };
CustomBrushes1 = new List<Brush>
{
    new SolidColorBrush(Color.FromArgb("#70ad47")),
    new SolidColorBrush(Color.FromArgb("#dd8abd")),
    new SolidColorBrush(Color.FromArgb("#7f84e8")),
    new SolidColorBrush(Color.FromArgb("#7bb4eb")),
    new SolidColorBrush(Color.FromArgb("#ea7a57"))
};
Enter fullscreen mode Exit fullscreen mode 
<chart:RadialBarSeries x:Name="series"
                       ItemsSource="{Binding AsianMostData}"
                       XBindingPath="Country"
                       YBindingPath="Access"
                       MaximumValue="220"
                       InnerRadius="0.3"
                       GapRatio="0.3"
                       EnableTooltip="True"
                       TooltipTemplate="{StaticResource tooltipTemplate}"
                       Radius="1"
                       PaletteBrushes="{Binding CustomBrushes}">
Enter fullscreen mode Exit fullscreen mode

d. Add text at the center of the chart

Let’s add a center view to demonstrate the region that has contributed the data for the chart. The center view will be updated based on the item selected in the combo box.

Refer to the following code example.

<chart:RadialBarSeries.CenterView>
 <VerticalStackLayout>
  <Label Text="Asia's" Style="{StaticResource style}" FontSize="{OnPlatform Android=10,iOS='10',Default=20}" x:Name="label1"></Label>
  <Label Text="Least" Style="{StaticResource style}" FontSize="{OnPlatform Android='10',iOS='10',Default=20}"/>
  <Label Text="powerful" Style="{StaticResource style}" FontSize="{OnPlatform Android='10',iOS='10',Default=20}"/>
  <Label Text="passport" Style="{StaticResource style}" FontSize="{OnPlatform Android='10',iOS='10',Default=20}"/>
 </VerticalStackLayout>
</chart:RadialBarSeries.CenterView>
Enter fullscreen mode Exit fullscreen mode

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

Visualizing the most and least powerful passports in 2023 using Syncfusion’s .NET MAUI Radial Bar Chart

Visualizing the most and least powerful passports in 2023 using Syncfusion’s .NET MAUI Radial Bar Chart

GitHub reference

For more details, refer to the project on the GitHub repository.

Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize the data on the most and least powerful passports using the Syncfusion .NET MAUI Radial Bar Chart. We strongly encourage you to follow the steps outlined in this blog and share your feedback in the comments section below.

If you require any assistance, please don’t hesitate to contact us via our support forum, support portal, or feedback portal. We are always happy to help you!

Related blogs

Image
The Journey From a CSV File to Apache Hive Table

hadoop, hive, bigdata, dataengineering
Image
How to Integrate Crypto Payments in Your Apps & Build Your Own Crypto Payment Gateway with ZinariPays OpenAPI

api, webdev, tutorial, payments
Image
Implementing Webpack from Scratch, But in Rust - [1] Parsing and Modifying JS Code Using Oxc

webpack, rust
Image
Through Wall Cat Flap
Image
LabEx Trending: Add Student Personal Information and More

labex, programming, projects
Image
17 Signs To Know If You Work With Leather Sofas Chesterfield
Image
Plugin Release GitLab Master Plugin - Enhance Your GitLab Experience in IntelliJ IDEA

ide, plugin
Image
Stwórz Idealną Przestrzeń: Meble do Sypialni, Które Zachwycą Każdego
Image
What Is a NoSQL Database and When Should You Use It?

database, sql, nosql, mysql
Image
Python基础速查

python
Image
What's The Current Job Market For Tan Chesterfield Sofa Professionals?
Image
15 Interesting Facts About ADHD Assessment UK That You Didn't Know
Image
✨“New Feature Unveiled! Claude 3.5 Sonnet & Haiku for Ultimate Productivity!”🌍

claudeai, haiku, newfeatures, ai
Image
Asynchronous Programming in JavaScript: The Role of Callbacks Explained
Image
8 Tips To Enhance Your Folding Reclining Wheelchair Game
Image
The 12 Most Popular Get Car Key Cut Accounts To Follow On Twitter
Image
ROS Code Editor

codepen
Image
Automating Azure Documentation with an AI Assistant

azure, python, ai, agents
Image
Why You Should Concentrate On Making Improvements To ADHD In Adults Diagnosis
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .