Chart of the Week: Creating a .NET MAUI Range Column Chart to Compare Average Temperature Variations in Rome

Jollen Moyani - Oct 3 '23 - - Dev Community

Welcome to our Chart of the Week blog series!

Today, we’ll analyze and compare average monthly temperature variations in Rome for 2021 and 2022 using the Syncfusion .NET MAUI Range Column Chart.

The .NET MAUI Range Column Chart is a powerful tool for visualizing data ranges. It plots two y-values per data point, representing a column’s upper and lower bounds. This allows for a dynamic and comprehensive view of your data. With features like real-time updates, high performance, and interactive elements such as zooming, panning, trackball, tooltip, and selection, your data analysis becomes an engaging experience.

This versatile control is aesthetically pleasing and compatible with desktop (Windows and Mac Catalyst) and mobile platforms (Android and iOS), making it a go-to choice for cross-platform data visualization needs.

The following image shows the chart we’re going to build. .NET MAUI Range Column Chart Comparing Average Temperatures in Rome

Let’s begin creating a range graph that illustrates temperature variations using the Syncfusion .NET MAUI Range Column Chart.

Step 1: Gathering the average temperature data

First, we need to gather data from the Weather Underground website. We’ll focus on obtaining the monthly temperature range in degrees Celsius for Rome (Sallustiano), Italy, for 2021 and 2022. Once we have this data, we will save it as a CSV file. After that, we can create the chart.

Step 2: Preparing the data for the chart

Create the Model class to hold the temperature data with the help of the Month, High2021, Low2021, High2022, and Low2022 properties.

Refer to the following code example.

Public class Model
{
    public Model(string month, double high2021, double low2021, double high2022, double low2022)
    {
        Month = month;
        High2021 = high2021;
        Low2021 = low2021;
        High2022 = high2022;
        Low2022 = low2022;
    }

    public string Month { get; set; }
    public double High2021 { get; set; }
    public double Low2021 { get; set; }
    public double High2022 { get; set; }
    public double Low2022 { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Then, we generate the average temperature collection using the ViewModel class and its TemperatureCollection property. Assign the CSV data to the temperature range data collection using the ReadCSV method and store it in the TemperatureCollection property.

Refer to the following code example.

public class ViewModel 
{
    List<Model> temperatureCollection;
    public List<Model> TemperatureCollection
    {
        get
        {
            return temperatureCollection;
        }
        set
        {
            temperatureCollection = value;
        }
    }

    public ViewModel()
    {
        TemperatureCollection = new List<Model>(ReadCSV());
    }

    public IEnumerable<Model> ReadCSV()
    {
        Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
        Stream inputStream = executingAssembly.GetManifestResourceStream("RangeColumnSample.Resources.Raw.Rome monthly data.csv");

        string? line;
        List<string> lines = new List<string>();

        using StreamReader reader = new StreamReader(inputStream);
        while ((line = reader.ReadLine()) != null)
        {
            lines.Add(line);
        }

        return lines.Select(line =>
        {
            string[] data = line.Split(',');
            return new Model(data[0], Convert.ToDouble(data[1]), Convert.ToDouble(data[2]), Convert.ToDouble(data[4]), Convert.ToDouble(data[5]));
        });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configuring the Syncfusion .NET MAUI Cartesian Charts

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

Refer to the following code example.

<chart:SfCartesianChart>  

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

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

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

Step 4: Bind the monthly temperature data to the range column chart

To compare the monthly average temperature variations for 2021 and 2022, we’ll use the Syncfusion RangeColumnSeries instance.

Refer to the following code example.

<chart:RangeColumnSeries ItemsSource="{Binding TemperatureCollection}" 
                          XBindingPath="Month" High="High2021" Low="Low2021">
</chart:RangeColumnSeries>

<chart:RangeColumnSeries ItemsSource="{Binding TemperatureCollection}" 
                          XBindingPath="Month" High="High2022" Low="Low2022">
</chart:RangeColumnSeries>
Enter fullscreen mode Exit fullscreen mode

In the above code example, we’ve bound the ItemSource with the TemperatureCollection property. We have specified the XBindingPath with the Month property for 2021 and 2022. The High and Low properties are bound with the respective high and low values for 2021 and 2022, respectively.

Step 5: Customizing the chart appearance

Let’s enhance the look of the range column chart. To do this, we will create a layout with a bordered container specifically for the range graph. We will use a Label to display the necessary content.

Refer to the following code example.

<Border BackgroundColor="White" Stroke="#BEB1AE" Margin="10,20,10,10" Padding="10">

 <Border.StrokeShape>
  <RoundRectangle CornerRadius="30"/>
 </Border.StrokeShape>

 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="8*"/>
   <RowDefinition Height="20"/>
  </Grid.RowDefinitions>

  <chart:SfCartesianChart>
  </chart:SfCartesianChart>

  <Label Grid.Row="1" FontSize="Caption" FontAttributes="Italic" 
         Text="Monthly temperature range at a weather station in Rome (Sallustiano), Italy, in 2021 and 2022, in °C.">
  </Label>

 </Grid>

</Border>
Enter fullscreen mode Exit fullscreen mode

Customizing range column series placement

We can place the range column series side by side or overlap them using the EnableSideBySideSeriesPlacement property. Additionally, we can personalize the chart by setting a background color and margins.

Refer to the following code example.

<chart:SfCartesianChart Margin="10" BackgroundColor="White" EnableSideBySideSeriesPlacement="True">
</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

Adding a title to the chart

We can easily enhance the readability of the plotted data by adding a Title to the chart, as shown in the following code example.

<chart:SfCartesianChart.Title>
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <HorizontalStackLayout Grid.Column="0">
   <Image Source="cloud.jpg" WidthRequest="40" HeightRequest="40"/>
   <Label VerticalOptions="Center"  
          Text="Average Temperature Variations in Rome: 2021 vs. 2022" FontSize="18"/>
  </HorizontalStackLayout>
 </Grid>
</chart:SfCartesianChart.Title>
Enter fullscreen mode Exit fullscreen mode

Customizing the chart legend

Refer to the following code to enable and customize the Legend to represent the years for which the range column series is plotted.

<chart:SfCartesianChart.Legend>
 <chart:ChartLegend ItemTemplate="{StaticResource LegendTemplate}">
 </chart:ChartLegend>
</chart:SfCartesianChart.Legend>

<chart:SfCartesianChart.Resources>
 <ResourceDictionary>
  <DataTemplate x:Key="LegendTemplate">
   <Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="5">
    <HorizontalStackLayout>
     <Ellipse HorizontalOptions="Center" VerticalOptions="Center" 
              HeightRequest="13" WidthRequest="13" Margin="0,3,3,0"
              Fill="{Binding IconBrush}"/>
     <Label Grid.Column="1" FontSize="16" VerticalTextAlignment="Center" Text="{Binding Item.Label}" TextColor="Black" HorizontalOptions="Center" HorizontalTextAlignment="Start"/>
    </HorizontalStackLayout>
   </Grid>
  </DataTemplate>
 </ResourceDictionary>
</chart:SfCartesianChart.Resources>

<chart:RangeColumnSeries Label="2021">                     
</chart:RangeColumnSeries>

<chart:RangeColumnSeries Label="2022">
</chart:RangeColumnSeries>
Enter fullscreen mode Exit fullscreen mode

Customizing the axes and gridlines

Let’s customize the x- and y-axes using properties such as LabelPlacement, LabelStyle, and ShowMajorGridLines, and adjust the y-axis range using the Minimum and Maximum properties.

<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis LabelPlacement="BetweenTicks">
  <chart:CategoryAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Minimum="-5" Maximum="40" ShowMajorGridLines="False">
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black" FontSize="Caption"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
Enter fullscreen mode Exit fullscreen mode

Customizing the chart series

We can also customize the chart series by adjusting the chart segment Width and applying colors using the Fill property. Refer to the following code example.

<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#98fb98>
</chart:RangeColumnSeries>

<chart:RangeColumnSeries Width="{x:OnPlatform Android='0.9', iOS='0.9', Default='0.8'}" Fill="#ff1493">
</chart:RangeColumnSeries>
Enter fullscreen mode Exit fullscreen mode

Adding data labels

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

<chart:RangeColumnSeries ShowDataLabels="True" >
 <chart:RangeColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle TextColor="Black"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:RangeColumnSeries.DataLabelSettings>
</chart:RangeColumnSeries>

<chart:RangeColumnSeries ShowDataLabels="True" >
 <chart:RangeColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings UseSeriesPalette="False">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle TextColor="White" FontAttributes="Bold"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:RangeColumnSeries.DataLabelSettings>
</chart:RangeColumnSeries>
Enter fullscreen mode Exit fullscreen mode

After executing all these code examples, we will get output like the following image.

Comparing the Monthly Average Temperature Variations in Rome Using a .NET MAUI Range Column Chart

Comparing the Monthly Average Temperature Variations in Rome Using a .NET MAUI Range Column Chart

GitHub reference

For more details, refer to the demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve compared the average monthly temperature variations in Rome using the Syncfusion .NET MAUI Range Column Chart. We encourage you to follow the steps and share your experience in the comments section below.

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

Related blogs

Image
Jak stworzyć wymarzoną sypialnię: Meble, które zmieniają przestrzeń
Image
Form Validation Using JavaScript and HTML 📝✨
Image
15 Ideas For Gifts For Your Chesterfield Leather Sofa 2 Seater Lover In Your Life
Image
The Callback Hell, Writing Cleaner Asynchronous JavaScript

webdev, javascript, programming, learning
Image
Designing Reliable CI CD Pipelines for Faster, Error-Free Software Releases

cicd, software
Image
Companion Diagnosticss Market Estimated to Experience a Hike in Growth by 2035

healthydebate
Image
The king ultimet power

javascript, programming, tutorial, ai
Image
Netex Server ve Netex Sensör Kurulumu

liman, netex
Image
What Is Car Replacement Keys And Why You Should Be Concerned
Image
Data Science Courses in Chennai
Image
AI in Law and Governance: Mohammad S A A Alothman and AI Tech Solutions Lead the Discussion

webdev, ai
Image
A Comprehensive Guide to Choosing Between Appium and XCTest (UI) for iOS App Testing

testing, mobile, ios, webdev
Image
Building an FAQ Generator API with Next.js, GPT-4, and Unkey: Making Rate Limiting Fun!

webdev, nextjs, unkey, api
Image
The Reason Why Bifold Door Glass Replacement Has Become Everyone's Obsession In 2024
Image
SQLCODE and SQLERRM in EXCEPTION
Image
Working on Prismio
Image
Sai Domestic Packers and Movers,
Image
How to configure Swiftproxy proxy server in Puppeteer?

puppeteer, proxy, swiftproxy, crawler
Image
Watch Out: How Travel Foldable Wheelchair Is Taking Over And What We Can Do About It
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .