Getting Started with HeatMap for ASP.NET MVC

18 Sep 202012 minutes to read

This section explains briefly about how to create a HeatMap in your application with ASP.NET MVC.

Initialize the HeatMap

1. Create Syncfusion ASP.NET MVC application. You can refer MVC Getting Started documentation to create new project and add necessary dll’s and script files.
2. Add a HeatMap control in View file as like as follows.

razor

<div>
    @Html.EJ().HeatMap("heatmap", ViewData["HeatMapModel"] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)
</div>

Prepare and Populate data

Populate product information in a collection

c#

public ActionResult Default()
{
    CellMapping CellMapping = new CellMapping();
    CellMapping.Column = new PropertyMapping() { PropertyName = "ProductName", DisplayName = "Product Name" };
    CellMapping.Row = new PropertyMapping() { PropertyName = "Year", DisplayName = "Year" };
    CellMapping.Value = new PropertyMapping() { PropertyName = "Value" };
    Collection columnMapping = new Collection();
    columnMapping.Add(new HeaderMapping() { PropertyName = "Veggie-spread", DisplayName = "Veggie-spread" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Tofu", DisplayName = "Tofu" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Alice Mutton", DisplayName = "Alice Mutton" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Donut", DisplayName = "Donut" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Burger", DisplayName = "Burger" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Perth Pasties", DisplayName = "Perth Pasties" });
    CellMapping.ColumnMapping = columnMapping;
    HeaderMapping headerMapping = new HeaderMapping() { PropertyName = "Year", DisplayName = "Year", ColumnStyle = new ColumnStyle() { Width = 105, TextAlign = HeatMapTextAlign.Right } };
    CellMapping.HeaderMapping = headerMapping;
    ViewData["HeatMapModel"] = Heatmap;
    return View();
}

Map data into HeatMap

Now data is ready, next we need to configure data source and map rows and columns to visualize.

• Prepare ItemsMapping add it in resource.

c#

public ActionResult Default()
{

    CellMapping CellMapping = new CellMapping();
    CellMapping.Column = new PropertyMapping() { PropertyName = "ProductName", DisplayName = "Product Name" };
    CellMapping.Row = new PropertyMapping() { PropertyName = "Year", DisplayName = "Year" };
    CellMapping.Value = new PropertyMapping() { PropertyName = "Value" };
    Collection columnMapping = new Collection();
    columnMapping.Add(new HeaderMapping() { PropertyName = "Veggie-spread", DisplayName = "Veggie-spread" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Tofu", DisplayName = "Tofu" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Alice Mutton", DisplayName = "Alice Mutton" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Donut", DisplayName = "Donut" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Burger", DisplayName = "Burger" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Perth Pasties", DisplayName = "Perth Pasties" });
    CellMapping.ColumnMapping = columnMapping;
    HeaderMapping headerMapping = new HeaderMapping() { PropertyName = "Year", DisplayName = "Year", ColumnStyle = new ColumnStyle() { Width = 105, TextAlign = HeatMapTextAlign.Right } };
    CellMapping.HeaderMapping = headerMapping;
    Heatmap.ItemsMapping = CellMapping;
    ViewData["HeatMapModel"] = Heatmap;
    return View();
}

• Set items source and mapping

c#

public ActionResult Default()
{
    Heatmap.ItemsMapping = CellMapping;
    ViewData["HeatMapModel"] = Heatmap;
    return View();
}

public Collection GetCellSource()
{
    Collection collection = new Collection();
    string[] name = { "Veggie-spread", "Tofu", "Alice Mutton", "Donut", "Burger", "Perth Pasties" };
    Random random = new Random();

    foreach (string item in name)
    {
        for (int i = 0; i < 6; i++)
        {
            double value = random.Next(0, random.Next(0, 100));
            collection.Add(new SampleCellData() { ProductName = item, Year = "Y" + (2011 + i), Value = value });
        }
    }
    return collection;
}

Color Mapping

Next we can configure color range for these values using color mapping

• Configure items mapping based on items source.

c#

public ActionResult Default()
{
    HeatMapProperties Heatmap = new HeatMapProperties();
    List<HeatMapColorMapping> colorCollection = new List<HeatMapColorMapping>();
    colorCollection.Add(new HeatMapColorMapping() { Color = "#8ec8f8", Label = new HeatMapLabel() { Text = "0" }, Value = 0 });
    colorCollection.Add(new HeatMapColorMapping() { Color = "#0d47a1", Label = new HeatMapLabel() { Text = "100" }, Value = 100 });
    Heatmap.ColorMappingCollection = colorCollection;
    ViewData["HeatMapModel"] = Heatmap;
    return View();
}

• This will show the grid data with color based on the range given.

Legend

A legend control is used to represent range value in a gradient, create a legend with the same color mapping as shown below.

html

<div>
    @Html.EJ().HeatMapLegend("heatmapLegend", ViewData["HeatMapLegendModel"] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapLegendProperties)
</div>

• Final code files looks like this.

c#

public ActionResult Default()
{
    HeatMapProperties Heatmap = new HeatMapProperties();
    List<HeatMapColorMapping> colorCollection = new List<HeatMapColorMapping>();
    colorCollection.Add(new HeatMapColorMapping() { Color = "#8ec8f8", Label = new HeatMapLabel() { Text = "0" }, Value = 0 });
    colorCollection.Add(new HeatMapColorMapping() { Color = "#0d47a1", Label = new HeatMapLabel() { Text = "100" }, Value = 100 });
    Heatmap.ColorMappingCollection = colorCollection;
    Heatmap.LegendCollection.Add("heatmapLegend");
    Heatmap.Width = "830"; 
    CellMapping CellMapping = new CellMapping();
    CellMapping.Column = new PropertyMapping() { PropertyName = "ProductName", DisplayName = "Product Name" };
    CellMapping.Row = new PropertyMapping() { PropertyName = "Year", DisplayName = "Year" };
    CellMapping.Value = new PropertyMapping() { PropertyName = "Value" };
    Collection columnMapping = new Collection();
    columnMapping.Add(new HeaderMapping() { PropertyName = "Veggie-spread", DisplayName = "Veggie-spread" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Tofu", DisplayName = "Tofu" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Alice Mutton", DisplayName = "Alice Mutton" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Donut", DisplayName = "Donut" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Burger", DisplayName = "Burger" });
    columnMapping.Add(new HeaderMapping() { PropertyName = "Perth Pasties", DisplayName = "Perth Pasties" });
    CellMapping.ColumnMapping = columnMapping;
    HeaderMapping headerMapping = new HeaderMapping() { PropertyName = "Year", DisplayName = "Year", ColumnStyle = new ColumnStyle() { Width = 105, TextAlign = HeatMapTextAlign.Right } };
    CellMapping.HeaderMapping = headerMapping;
    Heatmap.ItemsSource = GetCellSource();
    Heatmap.ItemsMapping = CellMapping;
    Heatmap.IsResponsive = true;
    ViewData["HeatMapModel"] = Heatmap;

    HeatMapLegendProperties legend = new HeatMapLegendProperties();
    legend.ColorMappingCollection = colorCollection;
    legend.Orientation = HeatMapLegendOrientation.Horizontal;
    legend.LegendMode = Syncfusion.JavaScript.DataVisualization.HeatMapEnums.HeatMapLegendMode.Gradient;
    legend.Height = "50px";
    legend.Width = "75%";
    legend.IsResponsive = true;
    ViewData["HeatMapLegendModel"] = legend;
    return View();
}

public Collection GetCellSource()
{
    Collection collection = new Collection();
    string[] name = { "Veggie-spread", "Tofu", "Alice Mutton", "Donut", "Burger", "Perth Pasties" };
    Random random = new Random();

    foreach (string item in name)
    {
        for (int i = 0; i < 6; i++)
        {
            double value = random.Next(0, random.Next(0, 100));
            collection.Add(new SampleCellData() { ProductName = item, Year = "Y" + (2011 + i), Value = value });
        }
    }
    return collection;
}

html

<div>
    @Html.EJ().HeatMap("heatmap", ViewData["HeatMapModel"] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)
</div>
<div style="height: 15px; width: 100%;"></div>
<div>
    @Html.EJ().HeatMapLegend("heatmapLegend", ViewData["HeatMapLegendModel"] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapLegendProperties)
</div>