How to Create a C# .NET WinForms Heatmap Chart

ComponentOne FlexChart is a powerful tool for creating interactive and insightful data visualizations for .NET applications. One of its most compelling features is the ability to generate heatmaps, perfect for visualizing large datasets using color to represent values. A heatmap is a fantastic way to display patterns and density in data, making complex information digestible at a glance.

In this blog, we'll cover:

• Why FlexChart heatmaps are so useful
• The different types of heatmaps you can create
• A C# example of creating a heatmap

Ready to get started? Download ComponentOne Today!

Why Use FlexChart for Heatmaps?

Heatmaps are excellent for identifying trends and anomalies within data. Imagine you want to visualize website traffic by hour of the day and day of the week. Instead of a dense table of numbers, a heatmap shows you immediately which times have the highest traffic (indicated by a "hot" color) and which have the lowest ("cool" colors). The ComponentOne FlexChart for .NET simplifies this process, allowing you to quickly transform raw data into a clear, visually striking chart.

Types of Heatmaps with FlexChart

FlexChart offers the flexibility to create various kinds of heatmaps to suit your data and application needs.

• A category-based heatmap is ideal for grouping data into distinct, named intervals. It uses the DiscreteColorScale class, allowing you to manually define each color and the specific numeric range it represents. For instance, you could define colors for "Low," "Normal," and "High" values. This method is perfect for providing a clear, categorical legend that makes it easy for users to interpret data based on predefined tiers.

• In contrast, a value-based heatmap is used to visualize the raw, continuous flow of data. It uses the GradientColorScale class to generate a smooth color transition from a minimum to a maximum value. Instead of static intervals, the legend is a continuous gradient, with each color corresponding to a specific numeric value. This approach best shows nuanced changes and exact data points across a range, such as temperature fluctuations or stock price movements.

• Another approach is a gradient legend that visually represents a continuous range of values. This is made possible through the ColorAxis class. By providing an instance of ColorAxis to the Axis property of your GradientColorScale, you can create a small, integrated bar of colors. This bar smoothly transitions across your defined numeric range, with every point on the gradient representing a distinct color and value. This method allows for a highly detailed and nuanced visualization, showing subtle variations in your data that a categorical legend would miss. You can even label the color axis with categories instead of values by providing a data source.

Creating a Heatmap with C# and .NET

Let's walk through a C# example to create a categorical heatmap in a .NET application. This code will visualize weekly store traffic, with hours on the X-axis and days on the Y-axis.

First, you'll need a simple class to hold your data.

public class TwoDDataItem
{
    public double[,] Values { get; set; }
    public string[] CatXData { get; set; }
    public string[] CatYData { get; set; }

    public TwoDDataItem(double[,] values, string[] xData, string[] yData)
    {
        Values = values;
        CatXData = xData;
        CatYData = yData;
    }
}

Next, let's create a method to generate some sample data. This data will be a 2D array of traffic values and separate arrays for the axis labels.

public TwoDDataItem Get2DTrafficData()
{
    var data = new double[24, 7];
    
    // Populate the 2D array with sample data
    for (var j = 0; j < 7; j++)
        for (var i = 0; i < 24; i++)
            data[i, j] = ... // Your data generation logic here
            
    var times = new string[24];
    
    // Populate the hours labels
    var days = Enum.GetNames(typeof(DayOfWeek));

    // Populate the days labels
    return new TwoDDataItem(data, times, days);

}

Now, this code will configure the FlexChart and add a Heatmap series.

private void heatMap()
{
    //Set the FlexChart header
    this.flexChart1.Header.Content = "Weekly Store Traffic";

    //Get data
    var data = Get2DTrafficData();
 
    //Define a discrete color scale
    var discreteScale = new DiscreteColorScale
    {
        Intervals = new List<DiscreteColorScale.Interval>
        {
            new DiscreteColorScale.Interval(0, 25, Color.Blue, "Low"),
            new DiscreteColorScale.Interval(25, 75, Color.Gray, "Normal"),
            new DiscreteColorScale.Interval(75, 100, Color.Red, "High"),
        }
    };

    //Create Heatmap series and bind it to the 2D array
    var heatmap = new Heatmap
    {
        ColorScale = discreteScale,
        DataSource = data.Values,
    };

    //Add Heatmap as series
    this.flexChart1.Series.Add(heatmap);
 
    //Set axis data sources for labels
    this.flexChart1.AxisX.DataSource = data.CatXData;
    this.flexChart1.AxisY.DataSource = data.CatYData;

}

Ready to check it out? Download ComponentOne Today!

Conclusion

The ComponentOne FlexChart for WinForms control provides a straightforward and powerful way to add heatmaps to your C# and .NET applications. By transforming complex numeric data into intuitive visual patterns, you can provide users with a clear understanding of trends, distributions, and anomalies. Whether you're working with a 2D array of values or other data structures, FlexChart gives you the tools to create compelling, informative charts with minimal effort.