Visualize matrix data using ASP.NET Core HeatMap Chart

Overview

The ASP.NET Core HeatMap Chart is a graphical representation of two-dimensional data where values are represented with gradient or solid color variations. The data points are rendered as HeatMap cells using Scalable Vector Graphics (SVG) or canvas UI rendering.

Dealing with large data

Though the ASP.NET Core HeatMap chart can render data points using both SVG and canvas modes, it uses canvas rendering mode while displaying large volumes of data for the best initial load performance and optimized memory usage.

• Rendering mode documentation

Data binding

The HeatMap Chart can be bound to data using JSON or an array of objects. JSON data can be local or remote, and it can be retrieved using different adaptors. The JSON data can be nested as well.

• Data binding documentation

Selection

In the HeatMap Chart, the cell selection is used to select single or multiple cells at runtime. The selected cell details are obtained via the built-in event and can be used for external processing.

• Selection documentation

Bubble HeatMap Chart

The ASP.NET Core bubble HeatMap Chart or the matrix bubble chart, visualizes data using variations in bubble attributes such as size, color, and sector.

• More details on Bubble HeatMap

Calendar HeatMap

The ASP.NET Core calendar HeatMap visualizes time series data with each data point representing a value bound to a specific time.

Cell color range customization

Color ranges allow a color to be applied to specific ranges in heatmap cells.

Other supported frameworks

The HeatMap Chart is also available in Blazor, Angular, React, Vue, and JavaScript frameworks. Check out the different HeatMap Chart platforms from the links below,

• Blazor HeatMap Chart
• JavaScript HeatMap Chart
• Angular HeatMap Chart
• React HeatMap Chart
• Vue HeatMap Chart

ASP.NET Core HeatMap Chart Code Example

Easily get started with the ASP.NET Core HeatMap Chart using a few simple lines of CSHTML and C# code, as demonstrated below. Also explore our ASP.NET Core HeatMap Chart Example that shows you how to render and configure the HeatMap Chart in ASP.NET Core.

<div>
    <ejs-heatmap id='container' dataSource="ViewBag.dataSource">
        <e-heatmap-titlesettings text="Sales Revenue per Employee (in 1000 US$)">
        </e-heatmap-titlesettings>
        <e-heatmap-xaxis labels="ViewBag.xlabels">
        </e-heatmap-xaxis>
        <e-heatmap-yaxis labels="ViewBag.yLabels">
        </e-heatmap-yaxis>
    </ejs-heatmap>
</div>

using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Newtonsoft.Json;
namespace ApplicationName.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            string[] xlabels = new string[12] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Paul", "Karin", "Mario" };
            ViewBag.xLabels = xlabels;
            string[] yLabels = new string[6] { "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat" };
            ViewBag.yLabels = yLabels;
            ViewBag.dataSource = GetDataSource();
            return View();
        }
        private int[,] GetDataSource()
        {
            int[,] data = new int[,]
                   {
                {73, 39, 26, 39, 94, 0},
                {93, 58, 53, 38, 26, 68},
                {99, 28, 22, 4, 66, 90},
                {14, 26, 97, 69, 69, 3},
                {7, 46, 47, 47, 88, 6},
                {41, 55, 73, 23, 3, 79},
                {56, 69, 21, 86, 3, 33},
                {45, 7, 53, 81, 95, 79},
                {60, 77, 74, 68, 88, 51},
                {25, 25, 10, 12, 78, 14},
                {25, 56, 55, 58, 12, 82},
                {74, 33, 88, 23, 86, 59}
                   };
            return data;
        }
    }
}