Data Visualization with a Heat Map Using .NET MAUI Scheduler
Tags: mobile, scheduler, maui, data
Published: 2023-05-15 13:02:39

---
title: Data Visualization with a Heat Map Using .NET MAUI Scheduler
published: true
date: 2023-05-15 11:05:46 UTC
tags: mobile, scheduler, maui, data
canonical_url: https://www.syncfusion.com/blogs/post/heat-map-dotnet-maui-scheduler.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7kqkjpkq8ezd0x54yew.png
---
A heat map is a visual representation of data over time. [Heat maps](https://en.wikipedia.org/wiki/Heat_map "Wikipedia page for Heat Map") are widely used in various fields, including finance, healthcare, and education. Colors in a heat map represent a range of values, such as a user’s activity level throughout the day or week.

Using a heat map on a calendar, users can quickly determine which days are typically busier. This information can be used to modify their schedule or organize their work more efficiently.

This blog post will explore designing a heat map calendar using the [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler"). In this example, we will use the Scheduler to track daily support ticket traffic. Support traffic refers to the volume of requests for information or problem fixes a company or organization receives. The Syncfusion [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler") provides customization options and allows users to design a heat map calendar by customizing the month cells.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Heat-map-calendar-using-.NET-MAUI-Scheduler.png" alt="Heat map calendar using .NET MAUI Scheduler" style="width:100%">

  <figcaption>Heat map calendar using .NET MAUI Scheduler</figcaption>

</figure>

**Note:** If you are new to our .NET MAUI Scheduler control, please refer to its [getting started](https://help.syncfusion.com/maui/scheduler/getting-started "Getting Started with .NET MAUI Scheduler") documentation before proceeding.

## Choosing a color scheme to visualize support traffic

In this example, we chose a sequential color scheme, which uses a range of colors from light to dark to represent increasing values. The color scheme uses increasingly dark shades of blue to represent increasing numbers of support requests. This can help clarify the information presented in the heat map.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/The-color-scheme-for-the-.NET-MAUI-Scheduler-heat-map-calendar.png" alt="The color scheme for the .NET MAUI Scheduler heat map calendar" style="width:100%">

  <figcaption>The color scheme for the .NET MAUI Scheduler heat map calendar</figcaption>

</figure>

## Importing the support data to the Scheduler

Import the support data to the Scheduler in the following steps:

1. [Create the support data model.](#model)
2. [Create the support data collection.](#collection)
3. [Map the support data to the Scheduler.](#Scheduler)

###<a name="model">Create the support data model</a>

We first need to define a data model that includes the necessary support details, such as the date of the support request and the corresponding request count.

```csharp
public class SupportDetails
{
    /// <summary>
    /// Date of the support detail.
    /// </summary>
    public DateTime Date { get; set; }

    /// <summary>
    /// Support count for the date.
    /// </summary>
    public int Value { get; set; }
}
```

###<a name="collection">Create the support data collection</a>

Support traffic details can be stored in various formats, depending on your organization’s available resources and tools. For demonstration purposes, we have manually provided support data for the last 100 days, which will be used to render the month cell background color in the Scheduler.

```csharp
public class HeatmapViewModel
{
    public List<SupportDetails> SupportDetails { get; set; }

    public DateTime MaxDate { get; set; }

    public HeatmapViewModel()
    {
        this.MaxDate = DateTime.Today;
        this.GenerateSupportDetails();
    }

    private void GenerateSupportDetails()
    {
        this.SupportDetails = new List<SupportDetails>();
        for (int startDate = -100; startDate <= 0; startDate++)
        {
            DateTime date = DateTime.Today.AddDays(startDate);
            int supportCount = this.GetSupportCount(date);
            SupportDetails supportDetails = new SupportDetails()
            {
                Date = date,
                SupportCount = supportCount
            };
            this.SupportDetails.Add(supportDetails);
        }
    }

    private int GetSupportCount(DateTime date)
    {
        if (date.Month % 2 == 0)
        {
            if (date.Day % 6 == 0)
            {
                // 6, 12, 18, 24, 30
                return 2248;
            }
            else if (date.Day % 5 == 0)
            {
                // 5, 10, 15, 20, 25
                return 1364;
            }
            else if (date.Day % 4 == 0)
            {
                // 4, 8, 16, 24, 28
                return 1976;
            }
            else if (date.Day % 3 == 0)
            {
                // 3, 9, 18, 21, 27
                return 417;
            }
            else
            {
                // 1, 2, 7, 11, 13, 19, 22, 23, 26, 29
                return 891;
            }
        }
        else
        {
            if (date.Day % 6 == 0)
            {
                // 6, 12, 18, 24, 30
                return 891;
            }
            else if (date.Day % 5 == 0)
            {
                // 5, 10, 15, 20, 25
                return 417;
            }
            else if (date.Day % 4 == 0)
            {
                // 4, 8, 16, 24, 28
                return 1364;
            }
            else if (date.Day % 3 == 0)
            {
                // 3, 9, 18, 21, 27
                return 2248;
            }
            else
            {
                // 1, 2, 7, 11, 13, 19, 22, 23, 26, 29
                return 1976;
            }
        }
    }
}
```

###<a name="Scheduler">Map the support data to the Scheduler</a>

To link the custom support data object to the Scheduler, configure the [AppointmentMapping](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_AppointmentMapping "AppointmentMapping property of .NET MAUI Scheduler") property in it. Once the mapping is complete, assign the collection of support data objects to the [AppointmentsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SfScheduler.html#Syncfusion_Maui_Scheduler_SfScheduler_AppointmentsSource "AppointmentsSource property of .NET MAUI Scheduler") property.

This generates the appointment details in the MonthCell, which displays the support traffic details for each day. The background color of the MonthCell is determined based on the number of support tickets received on that day.

```xml
<schedule:SfScheduler x:Name="Scheduler" View="Month" AppointmentsSource="{Binding SupportDetails}" MaximumDateTime="{Binding MaxDate}" CellBorderBrush="Transparent">
 <schedule:SfScheduler.AppointmentMapping>
  <schedule:SchedulerAppointmentMapping StartTime="Date" EndTime="Date"/>
 </schedule:SfScheduler.AppointmentMapping>
```

## Designing the heat map calendar

Designing a heat map calendar involves visualizing data in a calendar format, where each cell represents a day, and the background color represents the data’s intensity or value.

In the Syncfusion .NET MAUI Scheduler, you can customize the month cell’s appearance based on data using the [CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html?tabs=tabid-5%2Ctabid-15%2Ctabid-1#Syncfusion_Maui_Scheduler_SchedulerMonthView_CellTemplate "CellTemplate property of .NET MAUI Scheduler") property in [CalendarMonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html "CalendarMonthView property of .NET MAUI Scheduler"). To avoid appointments rendering on the month cells, set the [AppointmentDisplayMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html#Syncfusion_Maui_Scheduler_SchedulerMonthView_AppointmentDisplayMode "AppointmentDisplayMode property of .NET MAUI Scheduler") property in [CalendarMonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html "SchedulerMonthView property of .NET MAUI Scheduler") to None.

Refer to the following code to design a heat map calendar using the [CellTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html?tabs=tabid-5%2Ctabid-15%2Ctabid-1#Syncfusion_Maui_Scheduler_SchedulerMonthView_CellTemplate "CellTemplate property of .NET MAUI Scheduler") in [CalendarMonthView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Scheduler.SchedulerMonthView.html "CalendarMonthView property of .NET MAUI Scheduler").

```xml
<schedule:SfScheduler x:Name="Scheduler" View="Month" AppointmentsSource="{Binding SupportDetails}" MaximumDateTime="{Binding MaxDate}" CellBorderBrush="Transparent">
 <schedule:SfScheduler.AppointmentMapping>
  <schedule:SchedulerAppointmentMapping StartTime="Date" EndTime="Date"/>
 </schedule:SfScheduler.AppointmentMapping>
 <schedule:SfScheduler.MonthView>
  <schedule:SchedulerMonthView AppointmentDisplayMode="None" ShowLeadingAndTrailingDates="False">
   <schedule:SchedulerMonthView.CellTemplate>
    <DataTemplate>
     <Grid x:Name="cellGrid" Background="{Binding Appointments, Converter={StaticResource colorConverter}}" Margin="0.25">
      <Label Text="{Binding DateTime.Day}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="{Binding Appointments, Converter={StaticResource textColorConverter}}">
      </Label>
     </Grid>
    </DataTemplate>
   </schedule:SchedulerMonthView.CellTemplate>
  </schedule:SchedulerMonthView>
 </schedule:SfScheduler.MonthView>
</schedule:SfScheduler>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Heatmap-calendar-designed-using-.NET-MAUI-Scheduler.png" alt="Heatmap calendar designed using .NET MAUI Scheduler" style="width:100%">

  <figcaption>Heatmap calendar designed using .NET MAUI Scheduler</figcaption>

</figure>

## GitHub reference

For more information, refer to [designing a heat map using the .NET MAUI Scheduler demo](https://github.com/SyncfusionExamples/Heatmap-calendar-with-maui-scheduler "Heatmap Calendar with .NET MAUI Scheduler demo on GitHub").

## Conclusion

Thank you for your time! This blog post briefly overviewed designing a heat map calendar using the Syncfusion [.NET MAUI Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler"). With it, you can create visually stunning and highly functional heat map calendars that provide valuable insights into complex data sets.

Check out our other [.NET MAUI controls](https://www.syncfusion.com/maui-controls ".NET MAUI controls") and [demos on GitHub](https://github.com/syncfusion/maui-demos ".NET MAUI controls GitHub demos") and share your feedback or ask questions in the comments section below.

If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio Products") to see how our components can enhance your projects.

You can also reach us through 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/home "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-shimmer-control.aspx "Blog: Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control")
- [Introducing the New .NET MAUI Popup Control](https://www.syncfusion.com/blogs/post/dotnet-maui-popup-control.aspx "Blog: Introducing the New .NET MAUI Popup Control")
- [Introducing the New .NET MAUI Masked Entry Control](https://www.syncfusion.com/blogs/post/dotnet-maui-masked-entry-control.aspx "Blog: Introducing the New .NET MAUI Masked Entry Control")
- [Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-template-studio.aspx "Blog: Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio")