Ej1 api migration in EJ2 JavaScript Heatmap chart control

18 Apr 20235 minutes to read

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 </br> </br> $("#heatmap").ejHeatMap({ width: "300" }); Property:width </br> </br> var heatmap = new ej.heatmap.HeatMap({ width: '650px' }); heatmap.appendTo('#heatmap');
Specifies the height of the heat map Property:height </br> </br> $("#heatmap").ejHeatMap({ height: "300" }); Property:height </br> </br> var heatmap = new ej.heatmap.HeatMap({ height: '650px' }); heatmap.appendTo('#heatmap');
Enables or disables tooltip of heat map Property:showtooltip </br> </br> $("#heatmap").ejHeatMap({ showtooltip: true }); Property:showTooltip </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ toolTipSettings: { templateId:"mouseovertoolTipId" } }); Property:tooltipRender </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ itemsSource: [] }); Property:dataSource </br> </br> var heatmap = new ej.heatmap.HeatMap({ dataSource: [] }); heatmap.appendTo('#heatmap');
Specifies whether the cell content can be visible or not. Property:heatmapCell.showContent </br> </br> $("#heatmap").ejHeatMap({ heatmapCell: { showContent: ej.HeatMap.CellVisibility.Hidden } }); Property:cellSettings.showLabel </br> </br> var heatmap = new ej.heatmap.HeatMap({ cellSettings: { showLabel: false }, }); heatmap.appendTo('#heatmap');
Specifies the color of the heat map column data. Property:colorMappingCollection.color </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { color: "#8ec8f8" }, { color: "#0d47a1" } ] }); Property:paletteSettings.palette.color </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { value: 0 }, { value: 100 } ] }); Property:paletteSettings.palette.value </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { text: "Low" } }, { label: { text: "Moderate" } } ] }); Property:paletteSettings.palette.label </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { bold: true } }, { label: { italic: true } }, ] }); Property:legendSettings.textStyle.fontStyle </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontSize: 18 } } ] }); Property:legendSettings.textStyle.size </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontFamily: "Arial" } } ] }); Property:legendSettings.textStyle.fontFamily </br> </br> 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 </br> </br> $("#heatmap").ejHeatMap({ colorMappingCollection: [ { label: { fontColor: "red" } } ] }); Property:legendSettings.textStyle.fontFamily </br> </br> var heatmap = new ej.heatmap.HeatMap({ legendSettings: { textStyle: { color: 'red' } } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the column. Property:itemsMapping.column.propertyName </br> </br> $("#heatmap").ejHeatMap({ itemsMapping: { column: { "propertyName": "ProductName" } } }); Property:dataSource.yDataMapping </br> </br> var heatmap = new ej.heatmap.HeatMap({ dataSource: heatmapData, dataSourceSettings: { yDataMapping: 'columnid' } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the row. Property:itemsMapping.row.propertyName </br> </br> $("#heatmap").ejHeatMap({ itemsMapping: { row: { "displayName": "Product Name" } } }); Property:dataSource.xDataMapping </br> </br> var heatmap = new ej.heatmap.HeatMap({ dataSource: heatmapData, dataSourceSettings: { xDataMapping: 'rowid' } }); heatmap.appendTo('#heatmap');
Specifies the mapping name of the row. Property:itemsMapping.value.displayName </br> </br> $("#heatmap").ejHeatMap({ itemsMapping: { value: { "displayName": "Product Name" } } }); Property:dataSource.valueMapping </br> </br> var heatmap = new ej.heatmap.HeatMap({ dataSource: heatmapData, dataSourceSettings: { 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 </br> </br> $("#heatmap").ejHeatMap({ cellSelected: function(args) {} }); Property:cellClick </br> </br> var heatmap = new ej.heatmap.HeatMap({ cellClick: function (args) {}, }); heatmap.appendTo('#heatmap');