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
10 Must-try Projects for Python Beginners to Boost Skills

python, beginners, programming, webdev
Image
langkah main judi slots online anti rugi
Image
Revolutionizing Healthcare: The Unveiling of Telemedicine

healthcare, webdev, telemedicin, devops
Image
File Cleaner Pro - A Python Learning Project for File Management

ai, opensource, python, learning
Image
An Innovative Way to Create REST APIs

api, testing, tooling, rest
Image
A Beginner's Guide to Using Mirage.js in a React TypeScript Smart Home Dashboard.

tutorial, webdev, learning, frontend
Image
Are You Ready to Unlock Your Potential with Skills Up Academy?
Image
teknik meraih kemenangan di games slots online playtech
Image
c# Clean Code:Guidelines for Object Initializers and Static Members

csharp, cleancode, cleancoding, dotnet
Image
Jak stworzyć wymarzone mieszkanie: Przewodnik krok po kroku
Image
The EU Taxonomy Framework: A Pathway to Sustainable Investments
Image
How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours

showdev, learning, nextjs, vercel
Image
Kubernetes pods
Image
permainan slots online microgaming yang mesti dicoba
Image
Transforming Customs with Intelligent Document Processing

ai, productivity, learning, discuss
Image
Integrating AI-Powered Features in Next.js 15 Applications

nextjs, ai, react19, development
Image
c# advanced: Pattern Matching

csharp, dotnet, tutorial, programming
Image
The Nairobi Securities Exchange (NSE) Joins the Hedera Council to Expedite Tokenization of Securities in Kenya’s Capital Markets

blockchain, cryptocurrency, hashgraph, hedera
Image
Blockchain Wallet Development

blockchain, blockchainwallets, blockchainwallet, blockchainwalletdevelopment
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .