Migration from Essential JS 1

23 Feb 20224 minutes to read

This article describes the API migration process of heat map component from Essential JS 1 to Essential JS 2.

Members

Behavior API in Essential JS 1 API in Essential JS 2
Specifies the width of the heat map Property: width

<ej-heatmap id="HeatMap" width="810px">
</ej-heatmap> 		Property: width

<ejs-heatmap id='heatmap-container' width="300px">
</ejs-heatmap>
Specifies the height of the heat map Property: height

<ej-heatmap id="HeatMap" height="810px">
</ej-heatmap> 		Property: height

<ejs-heatmap id='heatmap-container' height="300px">
</ejs-heatmap>
Enables or disables tooltip of heat map Property: showtooltip

<ej-heatmap id="HeatMap" showTooltip="true">
</ej-heatmap> 		Property: showTooltip

<ejs-heatmap id='heatmap-container' showTooltip = "true">
</ejs-heatmap>
Defines the tooltip that should be shown when the mouse hovers over cells. Property: toolTipSettings.templateId

<ej-heatmap id="HeatMap">
<e-heatmap-tooltip-settings template-id="mouseovertoolTipId">
</e-heatmap-tooltip-settings>
</ej-heatmap> 		Property: tooltipRender

<ejs-heatmap id='heatmap-container' tooltipRender="window.ontooltipRender">
</ejs-heatmap>

window.ontooltipRender = function (args) { }
Specifies the source data of the heat map. Property: itemsSource

<ej-heatmap id="HeatMap" items-source="ViewBag.itemsource">
</ej-heatmap>

ViewBag.itemsource = []		 Property: dataSource

<ejs-heatmap id='heatmap-container' dataSource="ViewBag.dataSource">
</ejs-heatmap>

ViewBag.dataSource = []
Specifies whether the cell content can be visible or not. Property: heatmapCell.showContent

<ej-heatmap id="HeatMap" heat-map-cell="ViewBag.heatmapCell">
</ej-heatmap>

ViewBag.heatmapCell = new { showContent: “Hidden” }		 Property: cellSettings.showLabel

<ejs-heatmap id='heatmap-container'>
<e-heatmap-cellsettings showLabel="true"></e-heatmap-cellsettings>
</ejs-heatmap>
Specifies the color of the heat map column data. Property: colorMappingCollection.color

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping color="#8ec8f8">
</e-color-mapping>
</ej-heatmap> 		Property: paletteSettings.palette.color

<ejs-heatmap id='heatmap-container'>
<e-heatmap-palettesettings type="Fixed" emptyPointColor="white">
<e-palettes>
<e-palette color="rgb(238,238,238)">
</e-palette>
</e-palettes>
</e-heatmap-palettesettings>
</ejs-heatmap>
Specifies the color values of the heat map column data. Property: colorMappingCollection.value

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping value="0">
</e-color-mapping>
</ej-heatmap> 		Property: paletteSettings.palette.value

<ejs-heatmap id='heatmap-container'>
<e-heatmap-palettesettings type="Fixed" emptyPointColor="white">
<e-palettes>
<e-palette value="0">
</e-palette>
</e-palettes>
</e-heatmap-palettesettings>
</ejs-heatmap>
Specifies the label text of the heat map color. Property: colorMappingCollection.label.text

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping>
<e-label text="0">
</e-label>
</e-color-mapping>
</ej-heatmap> 		Property: paletteSettings.palette.label

<ejs-heatmap id='heatmap-container'>
<e-heatmap-palettesettings type="Fixed" emptyPointColor="white">
<e-palettes>
<e-palette label="No contributions">
</e-palette>
</e-palettes>
</e-heatmap-palettesettings>
</ejs-heatmap>
Specifies the style of the heat map color label. Property: colorMappingCollection.label.bold

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping>
<e-label bold="true">
</e-label>
</e-color-mapping>
</ej-heatmap> 		Property: legendSettings.textStyle.fontStyle

<e-heatmap-legendsettings textStyle="ViewBag.legendSettings">
</e-heatmap-legendsettings>

ViewBag.legendSettings = new {textStyle: { fontStyle:’bold’ }}
Specifies the font size of the heat map label. Property: colorMappingCollection.label.fontSize

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping>
<e-label font-size="16">
</e-label>
</e-color-mapping>
</ej-heatmap> 		Property: legendSettings.textStyle.size

<e-heatmap-legendsettings textStyle="ViewBag.legendSettings">
</e-heatmap-legendsettings>

ViewBag.legendSettings = new {textStyle: { size: 18 }}
Specifies the font family of the heat map label. Property: colorMappingCollection.label.fontFamily

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping>
<e-label font-family="Arial">
</e-label>
</e-color-mapping>
</ej-heatmap> 		Property: legendSettings.textStyle.fontFamily

<e-heatmap-legendsettings textStyle="ViewBag.legendSettings">
</e-heatmap-legendsettings>

ViewBag.legendSettings = new {textStyle: { fontFamily: ‘Arial’ }}
Specifies the font color of the heat map label. Property: colorMappingCollection.label.fontColor

<ej-heatmap id="HeatMap">
<e-colorMappingCollection>
<e-color-mapping>
<e-label font-color="red">
</e-label>
</e-color-mapping>
</ej-heatmap> 		Property: legendSettings.textStyle.color

<e-heatmap-legendsettings textStyle="ViewBag.legendSettings">
</e-heatmap-legendsettings>

ViewBag.legendSettings = new {textStyle: { color: ‘red’ }}
Specifies the mapping name of the column. Property: itemsMapping.column.propertyName

<ej-heatmap items-mapping="ViewBag.itemsmapping">
</ej-heatmap>

ViewBag.itemsmapping = new {column: { “propertyName”: “ProductName” }}		 Property: dataSource.yDataMapping

<ejs-heatmap id='heatmap-container' dataSource="ViewBag.dataSource">
</ejs-heatmap>

ViewBag.dataSource = new {data: heatmapData,yDataMapping: ‘columnid’}
Specifies the mapping name of the row. Property: itemsMapping.row.propertyName

<ej-heatmap items-mapping="ViewBag.itemsmapping">
</ej-heatmap>

ViewBag.itemsMapping = new {row: { “displayName”: “Product Name” }}		 Property: dataSource.xDataMapping

<ejs-heatmap id='heatmap-container' dataSource="ViewBag.dataSource">
</ejs-heatmap>

ViewBag.dataSource = new {data: heatmapData,xDataMapping: ‘rowid’}
Specifies the mapping name of the row.</b> Property: itemsMapping.value.displayName

<ej-heatmap items-mapping="ViewBag.itemsmapping">
</ej-heatmap>

ViewBag.itemsMapping = new {value: { “displayName”: “Product Name” }}		 Property: dataSource.valueMapping

<ejs-heatmap id='heatmap-container' dataSource="ViewBag.dataSource">
</ejs-heatmap>

ViewBag.dataSource = new {data: heatmapData,valueMapping: ‘value’}

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggered when the cell get clicked. Property: cellSelected

<ej-heatmap actionComplete="window.actionComplete">
</ej-heatmap>

window.actionComplete = function(args) {}		 Property: cellClick

<ejs-heatmap id='heatmap-container' cellClick="window.cellClick">
</ejs-heatmap>

window.cellClick = function (args) { }