Search results

EJ1 API in JavaScript HeatMap control

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ width: "300" });
Property:width

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ height: "300" });
Property:height

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ showtooltip: true });
Property:showTooltip

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ toolTipSettings: { templateId:"mouseovertoolTipId" } });
Property:tooltipRender

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ itemsSource: [] });
Property:dataSource

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ heatmapCell: { showContent: ej.HeatMap.CellVisibility.Hidden } });
Property:cellSettings.showLabel

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { color: "#8ec8f8" }, { color: "#0d47a1" } ] });
Property:paletteSettings.palette.color

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { value: 0 }, { value: 100 } ] });
Property:paletteSettings.palette.value

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { label: { text: "Low" } }, { label: { text: "Moderate" } } ] });
Property:paletteSettings.palette.label

let heatmap: HeatMap = new 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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { label: { bold: true } }, { label: { italic: true } }, ] });
Property:legendSettings.textStyle.fontStyle

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { label: { fontSize: 18 } } ] });
Property:legendSettings.textStyle.size

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { label: { fontFamily: "Arial" } } ] });
Property:legendSettings.textStyle.fontFamily

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ colorMappingCollection: [ { label: { fontColor: "red" } } ] });
Property:legendSettings.textStyle.fontFamily

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ itemsMapping: { column: { "propertyName": "ProductName" } } });
Property:dataSource.yDataMapping

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ itemsMapping: { row: { "displayName": "Product Name" } } });
Property:dataSource.xDataMapping

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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ itemsMapping: { value: { "displayName": "Product Name" } } });
Property:dataSource.valueMapping

let heatmap: HeatMap = new 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

var heatmap = new ej.datavisualization.HeatMap($("#heatmap"),{ cellSelected: function(args) {} });
Property:cellClick

let heatmap: HeatMap = new HeatMap({ cellClick: (args: ICellClickEventArgs) => {}, }); heatmap.appendTo('#heatmap');
Contents
Contents