Getting Started with EJ 1 ASP.NET Core HeatMap

Initialize the HeatMap

Initialize HeatMap to the Html Page as shown in the following code sample.

razor

@*Initializes heat map control*@




     <ej-heatmap is-responsive="true" id="heatmap" width="830" items-source="ViewBag.itemsource" items-mapping="ViewBag.itemsmapping" legend-collection="ViewBag.legendcollection">
     </ej:heatMap>

Prepare data

Populate product information in a collection

c#

[Serializable]

     public class SampleTableData
      {
            private string productName;
            [JsonProperty("ProductName")]
            [DefaultValue("")]
            public string ProductName
            {
                get { return productName; }
                set { productName = value; }
            }

            private double y2010;
            [JsonProperty("Y2010")]
            [DefaultValue("")]
            public double Y2010
            {
                get { return y2010; }
                set { y2010 = value; }
            }

            private double y2011;
            [JsonProperty("Y2011")]
            [DefaultValue("")]
            public double Y2011
            {
                get { return y2011; }
                set { y2011 = value; }
            }

            private double y2012;
            [JsonProperty("Y2012")]
            [DefaultValue("")]
            public double Y2012
            {
                get { return y2012; }
                set { y2012 = value; }
            }

            private double y2013;
            [JsonProperty("Y2013")]
            [DefaultValue("")]
            public double Y2013
            {
                get { return y2013; }
                set { y2013 = value; }
            }

            private double y2014;
            [JsonProperty("Y2014")]
            [DefaultValue("")]
            public double Y2014
            {
                get { return y2014; }
                set { y2014 = value; }
            }

            private double y2015;
            [JsonProperty("Y2015")]
            [DefaultValue("")]
            public double Y2015
            {
                get { return y2015; }
                set { y2015 = value; }
            }
  }

Populate data

Populate product information in a collection.

c#

public void CreateTableHeatmap()
     {
     List<string> collection = new List<string>();
     collection.Add("heatmapLegend");
     ViewBag.legendcollection = collection;
     ViewBag.itemsource = GetTableSource();
     return View();
     }

       public Collection GetTableSource()
       {
            Collection collection = new Collection();
            Random random = new Random();
            string[] rows = { "Vegie-spread", "Tofuaa", "Alice Mutton", "Konbu", "Fløtemysost", "Perth Pasties", "Boston Crab Meat", "Raclette Courdavault" };
            for (int i = 0; i < 8; i++)
            {
                collection.Add(new SampleTableData()
                {
                    ProductName = rows[i],
                    Y2010 = random.Next(0, 100),
                    Y2011 = random.Next(0, 100),
                    Y2012 = random.Next(0, 100),
                    Y2013 = random.Next(0, 100),
                    Y2014 = random.Next(0, 100),
                    Y2015 = random.Next(0, 100)
                });
            }
            return collection;
         }

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#

TableMapping TableMapping = new TableMapping();
     TableMapping.HeaderMapping = new HeaderMapping() { PropertyName = "ProductName", DisplayName = "Product Name", ColumnStyle = new ColumnStyle() { Width = 140, TextAlign = HeatMapTextAlign.Right } };
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2010", DisplayName = "Y2010" });
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2011", DisplayName = "Y2011" });
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2012", DisplayName = "Y2012" });
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2013", DisplayName = "Y2013" });
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2014", DisplayName = "Y2014" });
     TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = "Y2015", DisplayName = "Y2015" });
     ViewBag.itemsmapping = TableMapping;

##Color Mapping

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

• Configure items mapping based on items source.

razor

<ej-heatmap is-responsive="true" id="heatmap" width="830" items-source="ViewBag.itemsource" items-mapping="ViewBag.itemsmapping" legend-collection="ViewBag.legendcollection">
    <e-colorMappingCollection>
    <e-color-mapping value="0" color="#8ec8f8">
    <e-label text="0"></e-label>
    </e-color-mapping>
    <e-color-mapping value="100" color="#0d47a1">
    <e-label text="100"></e-label>
    </e-color-mapping>
    </e-colorMappingCollection>
    </ej-heatmap>

• 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.

razor

@*Initializes heat map control*@
      
        <ej-heatmaplegend is-responsive="true" id="heatmapLegend" width="75%" height="50px" legend-mode="Gradient" orientation="Horizontal">
            <e-colorMappingCollection>
                <e-color-mapping value="0" color="#8ec8f8">
                    <e-label text="0"></e-label>
                </e-color-mapping>
                <e-color-mapping value="100" color="#0d47a1">
                    <e-label text="100"></e-label>
                </e-color-mapping>
            </e-colorMappingCollection>
        </ej-heatmaplegend>

Final script file looks like this.

razor

<div style="width: 950px; margin: 0 auto; text-align: center;">
        <ej-heatmap is-responsive="true" id="heatmap" width="830" items-source="ViewBag.itemsource" items-mapping="ViewBag.itemsmapping" legend-collection="ViewBag.legendcollection">
            <e-colorMappingCollection>
                <e-color-mapping value="0" color="#8ec8f8">
                    <e-label text="0"></e-label>
                </e-color-mapping>
                <e-color-mapping value="100" color="#0d47a1">
                    <e-label text="100"></e-label>
                </e-color-mapping>
            </e-colorMappingCollection>
        </ej-heatmap>
    <div style="height: 15px; width: 100%;"></div>
        <ej-heatmaplegend is-responsive="true" id="heatmapLegend" width="75%" height="50px" legend-mode="Gradient" orientation="Horizontal">
            <e-colorMappingCollection>
                <e-color-mapping value="0" color="#8ec8f8">
                    <e-label text="0"></e-label>
                </e-color-mapping>
                <e-color-mapping value="100" color="#0d47a1">
                    <e-label text="100"></e-label>
                </e-color-mapping>
            </e-colorMappingCollection>
        </ej-heatmaplegend>
    </div>

c#

public class TableMapBinding : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            
            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 = "Vegie-spread", DisplayName = "Vegie-spread" });
            columnMapping.Add(new HeaderMapping() { PropertyName = "Tofuaa", DisplayName = "Tofuaa" });
            columnMapping.Add(new HeaderMapping() { PropertyName = "Alice Mutton", DisplayName = "Alice Mutton" });
            columnMapping.Add(new HeaderMapping() { PropertyName = "Konbu", DisplayName = "Konbu" });
            columnMapping.Add(new HeaderMapping() { PropertyName = "Fløtemysost", DisplayName = "Fløtemysost" });
            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;
            ViewBag.itemsource = GetCellSource();
            ViewBag.itemsmapping = CellMapping;
            List<string> collection = new List<string>();
            collection.Add("heatmapLegend");
            ViewBag.legendcollection = collection;
            return View();

        }
    }

    public Collection GetCellSource()
    {
        Collection collection = new Collection();
            string[] name = { "Vegie-spread", "Tofuaa", "Alice Mutton", "Konbu", "Fløtemysost", "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;
         }
     }

[Serializable]

        public class SampleCellData
        {
            private string productName;

            [JsonProperty("ProductName")]
            [DefaultValue("")]
            public string ProductName
            {
                get { return productName; }
                set { productName = value; }
            }

            private string year;
            [JsonProperty("Year")]
            [DefaultValue("")]
            public string Year
            {
                get { return year; }
                set { year = value; }
            }

            private Double valuex;
            [JsonProperty("Value")]
            [DefaultValue("")]
            public Double Value
            {
                get { return valuex; }
                set { valuex = value; }
            }
         }