Getting Started
Initialize the HeatMap
Initialize HeatMap to the Html Page as shown in the following code sample.
@*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
[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.
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
ItemsMappingadd it in resource.
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.
<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.
@*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.
<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>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; }
}
}
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page