Search results

Migration from Essential JS 1

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

Members

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

$("#heatmap").ejHeatMap({ width: "300" });
Property:width

var heatmap = new ej.heatmap.HeatMap({ width: '650px' }); heatmap.appendTo('#heatmap');
Specifies the height of the heat map Property:height

$("#heatmap").ejHeatMap({ height: "300" });
Property:height

var heatmap = new ej.heatmap.HeatMap({ height: '650px' }); heatmap.appendTo('#heatmap');
Enables or disables tooltip of heat map Property:showtooltip

$("#heatmap").ejHeatMap({ showtooltip: true });
Property:showTooltip

var heatmap = new ej.heatmap.HeatMap({ showTooltip: true }); heatmap.appendTo('#heatmap');
Defines the tooltip that should be shown when the mouse hovers over cells. Property:toolTipSettings.templateId

$("#heatmap").ejHeatMap({ toolTipSettings: { templateId:"mouseovertoolTipId" } });
Property:tooltipRender

var heatmap = new ej.heatmap.HeatMap({ tooltipRender: function (args) { args.content = [args.yLabel + ' | ' + args.xLabel + ' : ' + args.value ]; } }); heatmap.appendTo('#heatmap');
Specifies the source data of the heat map. Property:itemsSource

$("#heatmap").ejHeatMap({ itemsSource: [] });
Property:dataSource

var heatmap = new ej.heatmap.HeatMap({ dataSource: [] }); heatmap.appendTo('#heatmap');
Specifies whether the cell content can be visible or not. Property:heatmapCell.showContent

$("#heatmap").ejHeatMap({ heatmapCell: { showContent: ej.HeatMap.CellVisibility.Hidden } });
Property:cellSettings.showLabel

var heatmap = new ej.heatmap.HeatMap({ cellSettings: { showLabel: false }, }); heatmap.appendTo('#heatmap');
Specifies the color of the heat map column data. Property:colorMappingCollection.color

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { color: "#8ec8f8" }, { color: "#0d47a1" } ] });
Property:paletteSettings.palette.color

var heatmap = new ej.heatmap.HeatMap({ paletteSettings: { palette: [ { color: '#C06C84'}, ] } }); heatmap.appendTo('#heatmap');
Specifies the color values of the heat map column data. Property:colorMappingCollection.value

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { value: 0 }, { value: 100 } ] });
Property:paletteSettings.palette.value

var heatmap = new ej.heatmap.HeatMap({ paletteSettings: { palette: [ { value: 50 }, { value: 100 } ] } }); heatmap.appendTo('#heatmap');
Specifies the label text of the heat map color. Property:colorMappingCollection.label.text

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { text: "Low" } }, { label: { text: "Moderate" } } ] });
Property:paletteSettings.palette.label

var heatmap = new ej.heatmap.HeatMap({ paletteSettings: { palette: [ { label:'Low' }, { label:'Moderate' } ] } }); heatmap.appendTo('#heatmap');
Specifies the style of the heat map color label. Property:colorMappingCollection.label.bold Property:colorMappingCollection.label.italic

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { bold: true } }, { label: { italic: true } }, ] });
Property:legendSettings.textStyle.fontStyle

var heatmap = new ej.heatmap.HeatMap({ legendSettings: { textStyle: { fontStyle:'bold' } } }); heatmap.appendTo('#heatmap');
Specifies the font size of the heat map label. Property:colorMappingCollection.label.fontSize

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontSize: 18 } } ] });
Property:legendSettings.textStyle.size

var heatmap = new ej.heatmap.HeatMap({ legendSettings: { textStyle: { size: 18 } } }); heatmap.appendTo('#heatmap');
Specifies the font family of the heat map label. Property:colorMappingCollection.label.fontFamily

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontFamily: "Arial" } } ] });
Property:legendSettings.textStyle.fontFamily

var heatmap = new ej.heatmap.HeatMap({ legendSettings: { textStyle: { fontFamily: 'Arial' } } }); heatmap.appendTo('#heatmap');
Specifies the font color of the heat map label. Property:colorMappingCollection.label.fontColor

$("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontColor: "red" } } ] });
Property:legendSettings.textStyle.fontFamily

var heatmap = new ej.heatmap.HeatMap({ legendSettings: { textStyle: { color: 'red' } } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the column. Property:itemsMapping.column.propertyName

$("#heatmap").ejHeatMap({ itemsMapping: { column: { "propertyName": "ProductName" } } });
Property:dataSource.yDataMapping

var heatmap = new ej.heatmap.HeatMap({ dataSource: { data: heatmapData, yDataMapping: 'columnid' } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the row. Property:itemsMapping.row.propertyName

$("#heatmap").ejHeatMap({ itemsMapping: { row: { "displayName": "Product Name" } } });
Property:dataSource.xDataMapping

var heatmap = new ej.heatmap.HeatMap({ dataSource: { data: heatmapData, xDataMapping: 'rowid' } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the row. Property:itemsMapping.value.displayName

$("#heatmap").ejHeatMap({ itemsMapping: { value: { "displayName": "Product Name" } } });
Property:dataSource.valueMapping

var heatmap = new ej.heatmap.HeatMap({ dataSource: { data: heatmapData, valueMapping: 'value' } }); heatmap.appendTo('#heatmap');

Events

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

$("#heatmap").ejHeatMap({ cellSelected: function(args) {} });
Property:cellClick

var heatmap = new ej.heatmap.HeatMap({ cellClick: function (args) {}, }); heatmap.appendTo('#heatmap');
Contents
Contents