Chart of the Week: Creating a .NET MAUI Box and Whisker Chart for Machine Impact Test Analysis
Tags: dotnetmaui, chart, mobile, desktop
Published: 2023-08-10 15:09:29

---
title: Chart of the Week: Creating a .NET MAUI Box and Whisker Chart for Machine Impact Test Analysis
published: true
date: 2023-08-10 10:29:04 UTC
tags: dotnetmaui, chart, mobile, desktop
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-box-and-whisker-chart-machine-impact-test.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/varbr7r8w69xnaubtxow.png
---
Welcome to our Chart of the Week blog series!

In this blog, we’ll visualize machine impact test results using the [Syncfusion .NET MAUI Box and Whisker Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-box-and-whisker-chart ".NET MAUI Box and Whisker Chart"). This control is supported on desktop (Windows and Mac) and mobile platforms (Android and iOS).

A machine impact test is used to find the total energy absorbed by raw materials under high strain rates. This test assesses the material’s strength, resilience, and durability under real-world conditions where sudden impacts or shock loading may occur.

Let’s explore the steps to visualize the machine impact test results using the Syncfusion .NET MAUI Box and Whisker Chart.

## Step 1: Gather the machine impact test data

Before creating the chart, let’s gather the data on the [machine’s impact results](https://www.itl.nist.gov/div898/handbook/datasets/SPLETT2.DAT "Machine’s impact test results").

## Step 2: Prepare the data for the chart

Create the **ImpactTestModel** class with the **MachineName** property to store the name of the machine and the **AbsorbedEnergy** property to store a list of energy absorption values for that machine. The constructor of the **ImpactTestResultModel** class allows us to initialize these properties.

Refer to the following code example.

```csharp
public class ImpactTestModel
{
    public string MachineName { get; set; }

    public List<double> AbsorbedEnergy { get; set; }

    public ImpactTestModel(string machineName, List<double> absorbedEnergy)
    {
        MachineName = machineName;
        AbsorbedEnergy = absorbedEnergy;
    }
}
```

Next, create the impact test results collection using the **ImpactTestViewModel** class and store the collection in an observable collection using the **ImpactTestResults** property.

Refer to the following code example.

```csharp
public class ImpactTestViewModel
{
    public ObservableCollection<ImpactTestModel> ImpactTestResults { get; set; }
       
    public List<Brush> CustomBrushes { get; set; }

    public ImpactTestViewModel()
    {
      ImpactTestResults = new ObservableCollection<ImpactTestModel> 
      {
         new ImpactTestModel("Tinius 1", new List<double> { 67.4,65.5,72.0,73.6,65.2,67.0,66.3,67.9,65.8,69.9,64.5,66.0,66.8,67.0,69.9,70.1,69.7,68.3,67.0,68.2,65.0,66.6,65.4,68.1 }),
         new ImpactTestModel("Tinius 2", new List<double> { 69.0,66.2,70.0,68.5,66.0,67.5,68.5,66.5,73.0,69.0,69.0,74.5,68.0,68.5,67.5,70.0,69.0,72.5,68.0,69.0,69.0,71.0,68.0,75.0,67.0 }),
         new ImpactTestModel("Satec", new List<double> { 73.0,78.9,75.0,72.3,72.4,74.1,72.0,70.9,74.5,72.0,72.5,72.4,74.0,75.0,70.9,70.9,76.6,74.2,69.5,68.8,68.5,70.1,73.0,70.9 }),
         new ImpactTestModel("Tokyo", new List<double> { 67.6,64.2,65.9,65.9,68.2,71.1,67.6,71.6,72.8,68.2,67.6,67.1,67.1,68.2,65.4,66.5,67.6,67.1,71.1,67.1,65.4,67.6,67.6,70.5,70.5 }),  
      };
   }
}
```

## Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts

Configure the Syncfusion .NET MAUI Cartesian Charts using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started "Getting started with .NET MAUI Cartesian Charts control").

Refer to the following code example.

```xml
<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 the Box and Whisker Chart

To display the machine impact test results, we’ll use the Syncfusion **BoxAndWhiskerSeries** instance.

```xml
<chart:BoxAndWhiskerSeries ItemsSource="{Binding ImpactTestResults}"
                           XBindingPath="MachineName"
                           YBindingPath="AbsorbedEnergy"/>
```

In the previous code example, we’ve bound the **ItemsSource** property with the impact test results data collection. The **XBindingPath** and **YBindingPath** properties are bound with the **MachineName** and **AbsorbedEnergy** properties.

## Step 5: Customizing the chart appearance

Let’s see how to customize the elements of the .NET MAUI Box and Whisker Chart to get a pleasing appearance.

### Customizing the chart title

To customize the chart title, set the **Title** property of the SfCartesianChart control. Define the text, alignment, line break mode, font size, and font attributes for the title.

Refer to the following code example.

```xml
<chart:SfCartesianChart.Title>
 <Border Background="#6699cc" StrokeThickness="1" Margin="0">
  <Label Text="Analyzing the Machines' Impact Test Results"
         HorizontalTextAlignment="Center"
         VerticalTextAlignment="Center"
         TextColor="White" 
         FontSize="17"
         FontAttributes="Bold"
         Margin="10"/>
 </Border>
</chart:SfCartesianChart.Title>
```

### Customizing the chart axes

Refer to the following code example to customize the x- and y-axes of the chart using the **Text** , **TextColor** , and **Interval** properties.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis ShowMajorGridLines="False">
  <chart:CategoryAxis.Title>
   <chart:ChartAxisTitle Text="Machine Names" TextColor="Black"/>
  </chart:CategoryAxis.Title>
  <chart:CategoryAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Interval="2" Maximum="80"
                      ShowMajorGridLines="False">
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="Absorbed Energy (in foot-pounds) "
                         TextColor="Black"/>
  </chart:NumericalAxis.Title>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

### Customizing the Box and Whisker series

Refer to the following code examples to customize the **BoxAndWhiskerSeries**. In it, we customize the tooltip to display the maximum, minimum, median, lower quartile (Q1), and upper quartile (Q3) values.

```xml
<chart:BoxAndWhiskerSeries ShowMedian="True"
                            Stroke="Black"
                            StrokeWidth="2"
                            EnableTooltip="True"
                            EnableAnimation="True">
</chart:BoxAndWhiskerSeries>
```

### Customizing the chart color

We can apply colors to differentiate the data for each machine using the [PalettedBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.htm#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes "PalettedBrushes Property of .NET MAUI Charts") property.

**C#**

```csharp
public List<Brush> CustomBrushes { get; set; }

public ImpactTestAnalysisViewModel()
 {
     CustomBrushes = new List<Brush>();

     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(138, 161, 120)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(90, 116, 140)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(89, 89, 89)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(222, 149, 110)));      
 }
```

**XML**

```xml
<chart:BoxAndWhiskerSeries PaletteBrushes="{Binding CustomBrushes}"
                           Opacity="0.7">
</chart:BoxAndWhiskerSeries>
```

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Visualizing-the-Machine-Impact-Test-Analysis-Using-the-Syncfusion-.NET-MAUI-Box-and-Whisker-Chart.png" alt="Visualizing the Machine Impact Test Analysis Using the Syncfusion .NET MAUI Box and Whisker Chart" style="width:100%">

  <figcaption>Visualizing the Machine Impact Test Analysis Using the Syncfusion .NET MAUI Box and Whisker Chart</figcaption>

</figure>

## GitHub reference

For more information, refer to the [project on GitHub](https://github.com/SyncfusionExamples/Creating-a-Box-and-Whisker-Chart-for-Analyzing-the-Machine-Impact-Test "Creating .NET MAUI Box and Whisker Chart for analyzing the machine impact test GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize a machine impact test analysis using Syncfusion’s [.NET MAUI Box and Whisker Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-box-and-whisker-chart ".NET MAUI Box and Whisker Chart"). We encourage you to follow the steps discussed and share your thoughts in the comments below.

You can also contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Develop a Loan Interest Calculator App in .NET MAUI](https://www.syncfusion.com/blogs/post/loan-interest-calculator-dotnet-maui.aspx "Blog: Develop a Loan Interest Calculator App in .NET MAUI")
- [Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution](https://www.syncfusion.com/blogs/post/dotnet-maui-pyramid-chart-visualize-global-wealth-distribution.aspx "Blog: Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution")
- [Chart of the Week: Creating a Doughnut Chart for the World’s Top Coffee-Producing Countries](https://www.syncfusion.com/blogs/post/dotnet-maui-doughnut-chart-visualize-coffee-production.aspx "Blog: Chart of the Week: Creating a Doughnut Chart for the World’s Top Coffee-Producing Countries")
- [Introducing the New .NET MAUI Accordion Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-accordion-control.aspx "Blog: Introducing the New .NET MAUI Accordion Control")