Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights

Gayathri-github7 - Jun 19 - - Dev Community

TL;DR: Let’s use the Syncfusion .NET MAUI Scatter Chart to visualize the sizes and weights of various sports balls and highlight their differences. This blog guides you through gathering data, preparing it, configuring the chart, and customizing its appearance and interactivity. Explore the GitHub demo for more details.

Welcome to our Chart of the Week blog series!

Today, we’ll visualize the sizes and weights of various sports balls using the Syncfusion .NET MAUI Scatter Chart.

Sports enthusiasts know that most sports use balls, which vary widely in size and weight. Understanding these variations can provide fascinating insights into the design and dynamics of each sport. The lightest ball is a Table Tennis ball, and the largest ball size is Basketball. These differences reflect each sport’s unique demands and rules, providing a deeper appreciation for their diversity.

The Syncfusion .NET MAUI Scatter Chart is ideal for showcasing these differences. A scatter chart plots data points on a two-dimensional graph, making it easy to observe relationships between variables. The chart’s feature set includes data binding, tooltips, titles, and customizable axes, ensuring a clear and engaging visualization.

The following image shows the scatter chart we are going to create.

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

Let’s get started!

Step 1: Gathering the data

First, we need to gather information from the topend sports. We require data on ball Sizes and weights.

Step 2: Prepare the data for the chart

Create a SportsBallModel class to define the structure of our sports ball data and a SportsBallViewModel class to handle the data manipulation and communication between the model and the scatter chart.

First, define the SportsBallModel class with the following properties:

  • Name: Denotes the name of the sports ball, indicating the specific type or variant it represents.
  • Size: Describes the dimensions of the sports ball, specifying its diameter.
  • Weight: Quantifies the mass of the sports ball, measured in units such as grams.

Refer to the following code example.

public class SportsBallModel
{
    public string Name { get; set; }
    public double Size { get; set; }
    public double Weight { get; set; }

    public SportsBallModel(string name, double size, double weight)
    {
        Name = name;
        Size = size;
        Weight = weight;
    }
}
Enter fullscreen mode Exit fullscreen mode

Next, create the SportsBallViewModel class. It acts as an intermediary between the data models and user interface elements (scatter chart), preparing and formatting data for display and interaction.

Refer to the following code example.

public class SportsBallViewModel
{
    public List<SportsBallModel> SportsBallData { get; set; }

    public SportsBallViewModel()
    {

        SportsBallData = new List<SportsBallModel>();
        SportsBallData.Add(new SportsBallModel { Weight = 23, Size = 3.96, Name = "Squash" });
        SportsBallData.Add(new SportsBallModel { Weight = 2.7, Size = 3.99, Name = "Table Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 45.93, Size = 4.27, Name = "Golf" });
        SportsBallData.Add(new SportsBallModel { Weight = 125, Size = 5.59, Name = "Jai Alai" });
        SportsBallData.Add(new SportsBallModel { Weight = 40, Size = 5.72, Name = "Racquetball" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 5.72, Name = "Pool" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 6.35, Name = "Lacrosse" });
        SportsBallData.Add(new SportsBallModel { Weight = 56.0, Size = 6.54, Name = "Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 680, Size = 7.94, Name = "Pétanque" });
        SportsBallData.Add(new SportsBallModel { Weight = 155.9, Size = 7.11, Name = "Cricket" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 7.11, Name = "Field Hockey" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 7.30, Name = "Baseball" });
        SportsBallData.Add(new SportsBallModel { Weight = 22.1, Size = 7.29, Name = "Pickleball" });
        SportsBallData.Add(new SportsBallModel { Weight = 99, Size = 7.62, Name = "Polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 166.6, Size = 8.89, Name = "Softball (slowpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 453.6, Size = 9.21, Name = "Croquet" });
        SportsBallData.Add(new SportsBallModel { Weight = 178, Size = 9.70, Name = "Softball (fastpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 920, Size = 10.67, Name = "Bocce" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 18.03, Name = "Rhythmic gymnastics ball" });
        SportsBallData.Add(new SportsBallModel { Weight = 425, Size = 18.54, Name = "Team Handball" });
        SportsBallData.Add(new SportsBallModel { Weight = 260, Size = 20.70, Name = "Volleyball" });
        SportsBallData.Add(new SportsBallModel { Weight = 420, Size = 21.59, Name = "Football (Soccer)" });
        SportsBallData.Add(new SportsBallModel { Weight = 445, Size = 21.59, Name = "Korfball" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 21.59, Name = "Water polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 397, Size = 22.61, Name = "Netball" });
        SportsBallData.Add(new SportsBallModel { Weight = 623.7, Size = 23.88, Name = "Basketball" });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts

Let’s configure the .NET MAUI 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>
Enter fullscreen mode Exit fullscreen mode

Step 4: Bind data to the .NET MAUI Scatter series

To display the sports ball data effectively, we’ll utilize the Syncfusion ScatterSeries instance and bind our SportsBallData collection to it. Each ball will be represented as a point on the chart, with its corresponding size and weight.

Refer to the following code example.

<chart:ScatterSeries XBindingPath="Weight"
                     YBindingPath="Size" 
                     ItemsSource="{Binding SportsBallData}">
</chart:ScatterSeries>
Enter fullscreen mode Exit fullscreen mode

We’ve bound the SportsBallData collection from the SportsBallViewModel to the ItemSource property. The XBindingPath and YBindingPath properties are bound to the Weight and Size properties.

Step 5: Customize the .NET MAUI Scatter Chart appearance

Let’s customize the appearance of the Syncfusion .NET MAUI Scatter Chart to enhance its readability.

Adding the chart title

Adding a title to the chart enhances its readability and aids users in understanding its content more effectively. By providing a clear and descriptive title, users can quickly grasp the purpose and context of the chart, making it more accessible and informative.

Refer to the following code example.

<chart:SfCartesianChart.Title> 
 <Grid> 
  <Grid.RowDefinitions> 
   <RowDefinition Height="{OnPlatform Android=68,Default=80,iOS=68}"/> 
  </Grid.RowDefinitions> 
  <Grid.ColumnDefinitions> 
   <ColumnDefinition Width="55"/> 
   <ColumnDefinition Width="Auto"/> 
  </Grid.ColumnDefinitions> 
  <Image Grid.Column="0"  
         Grid.RowSpan="2" 
         Source="balls_sports.png" 
         Margin="0,-25,0,0" 
         HeightRequest="70" 
         WidthRequest="50"/> 
  <StackLayout Grid.Column="1" 
               Grid.Row="0" 
               Margin="7,7,0,0"> 
   <Label Text="Exploring Ball Sizes and Weights Across Different Sports"     
          FontSize="{OnPlatform Android=12,Default=16,iOS=12}"                     
          FontAttributes="Bold" 
          TextColor="Black"/> 
   <Label Text="A Comparative Analysis Across Different Sports Ball Sizes and Weights"  
          FontSize="{OnPlatform Android=10,Default=12,iOS=10}"     
          TextColor="Black" 
          Margin="0,2,0,0"/> 
  </StackLayout> 
 </Grid> 
</chart:SfCartesianChart.Title>
Enter fullscreen mode Exit fullscreen mode

Customize the axes

Let’s customize the X- and Y-axes with the Minimum, Maximum, EdgeLabelsDrawingMode, and ShowMajorGridLines properties and the axis Title, LineStyle, and TickStyle properties.

Refer to the following code example.

<chart:SfCartesianChart.XAxes>
 <chart:NumericalAxis ShowMajorGridLines=”True”
                      Maximum=”700”
                      Interval=”100” 
                      EdgeLabelsDrawingMode=”Shift”
                      RangePadding=”Additional”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Weight in Gram” TextColor=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Xaxes>

<chart:SfCartesianChart.Yaxes>
 <chart:NumericalAxis EdgeLabelsDrawingMode=”Center”
                       Maximum=”31”
                       Minimum=”0”
                       Interval=”5”
                       ShowMajorGridLines=”False”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Size in Centimeter” Stroke=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Yaxes>
Enter fullscreen mode Exit fullscreen mode

Customizing the Scatter series

Here, we will enhance the series appearance using the PaletteBrushes, PointHeight, and PointWidth properties.

Refer to the following code example.

<chart:ScatterSeries PaletteBrushes="{Binding PaletteBrushes}"
                     PointHeight="20" 
                     PointWidth="20">
</chart:ScatterSeries>
Enter fullscreen mode Exit fullscreen mode

Adding interactivity to the chart

Now, enable tooltips in the scatter series to enhance data visualization and provide additional insights. Customize the tooltip content to display relevant information, such as the name, size, and weight of a sports ball, that improves user experience by offering immediate, context-specific information and deeper data insights using the TooltipTemplate property.

Refer to the following code example.

<chart:ScatterSeries.TooltipTemplate>
 <DataTemplate>
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width=”Auto”/>
   </Grid.ColumnDefinitions>
   <Label Grid.Row=”0” 
          Grid.Column=”0” LineBreakMode=”WordWrap”  
          MaximumWidthRequest=”100” Text=”{Binding  
          Item.Name,StringFormat=’{0}’}”   
          HorizontalTextAlignment= »Center » HorizontalOptions= »Center »  
          VerticalTextAlignment= »Center » FontAttributes= »Bold »  
          Margin=”0,3,0,3” FontSize=”13.5” TextColor=”White”/>
   <BoxView Grid.Row=”1” Grid.Column=”0” VerticalOptions=”Center” Color=”White” HeightRequest=”1” />
   <StackLayout Grid.Row=”2” Grid.Column=”0” Orientation=”Vertical” VerticalOptions=”Fill” Spacing=”0” Padding=”3” Margin=”0”>
    <Label Text=”{Binding Item.Weight,StringFormat=’Weight : {0} g’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start”
           Margin=”0,0,3,0” FontSize=”13.5” TextColor=”White”/>
    <Label Text=”{Binding Item.Size,StringFormat=’Size : {0} cm’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start” Margin=”0,0,3,0”
           FontSize=”12” TextColor=”White”/>
   </StackLayout>
  </Grid>
 </DataTemplate>
</chart:ScatterSeries.TooltipTemplate>
Enter fullscreen mode Exit fullscreen mode

After executing these code examples, we will get the output that resembles the following image.

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

GitHub reference

Use the .NET MAUI Scatter Chart GitHub demo to visualize different sports ball sizes and weights for more details.

Conclusion

Thanks for reading! In this blog, we’ve seen how to use the Syncfusion MAUI Scatter chart to visualize the different sports ball sizes and weights. We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

The existing customers can download the new version of Essential Studio on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
Do Not Make This Blunder When It Comes To Your Black Fabric Corner Couch
Image
Dynamic Values: Transforming API Testing for Real-World Scenarios

api, testing, tooling, productivity
Image
The Reasons You're Not Successing At How Do I Get A Spare Car Key
Image
Are Spare Car Keys Cost Really As Vital As Everyone Says?
Image
Mobile App Development Company in California: Innovating for the Future

customapp, app, appdeveopment, softwaredevelopment
Image
Top 5 Benefits of PMI-PgMP Certification

pmipgm, projectmanagment, pmi, pgmp
Image
Why Is Replacing A Lost Car Key So Popular?
Image
"Mastering Tajweed: Your Path to Beautiful Quranic Recitation"
Image
Avni dutta one of the best service

kolkataescortagency, escortskolkata, kolkataescort, kolkataescorts
Image
Best 6 Tools for Handling Flaky Tests in Automated Testing

qa, automation, testing, tutorial
Image
📂 Building a Simple File Management System with PHP & MySQL 🚀

webdev, php, mysql, backend
Image
MySQL Database Management | Comprehensive MySQL Tutorial

labex, linux, coding, programming
Image
Luxury Spa in Borivali | Nature Thai Spa Borivali
Image
Cat Flap Double Glazing
Image
Django REST Framework (DRF) - permissions

django, api
Image
Engineering Intimacy: Advanced IoT Architecture and Privacy in Remote-Controlled Devices for Long-Distance Relationships

vibrators, techethics, iot
Image
A Guide to Setting Up Zsh: Improving Your Terminal Experience

terminal, cli, zsh, omz
Image
The Top Companies Not To Be In The Repair Bifold Door Top Roller Industry
Image
5 People You Oughta Know In The Lost Car Key Service Industry
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .