Migration from Essential JS 1

25 Feb 20225 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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.Width = “830”;		 Property: width

@Html.EJS().HeatMap(“container”).Width(“300px”).Render()
Specifies the height of the heat map Property: height

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.Height = “830”;		 Property: height

@Html.EJS().HeatMap(“container”).Height(“300px”).Render()
Enables or disables tooltip of heat map Property: showtooltip

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.ShowTooltip = true;		 Property: showtooltip

@Html.EJS().HeatMap(“container”).ShowTooltip(true).Render()
Defines the tooltip that should be shown when the mouse hovers over cells. Property: toolTipSettings.templateId

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.ToolTipSettings = new ToolTipSettings() { templateId = “mouseovertoolTipId” };		 Property: tooltipRender

@Html.EJS().HeatMap(“container”).TooltipRender(“tooltipRender”).Render()
var tooltipRender = function (args) {};
Specifies the source data of the heat map. Property: itemsSource

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.ItemsSource = [];		 Property: dataSource

@Html.EJS().HeatMap(“container”).DataSource(ViewBag.dataSource).Render()
Specifies whether the cell content can be visible or not. Property: heatmapCell.showContent

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.HeatMapCell = new HeatMapCell() { showContent = “Hidden” }		 Property: cellSettings.showLabel

@Html.EJS().HeatMap(“container”).CellSettings(cs => cs.ShowLabel(false)).Render()
Specifies the color of the heat map column data. Property: colorMappingCollection.color

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
List colorCollection = new List(); colorCollection.Add(new HeatMapColorMapping() { Color = “#8ec8f8” });
Heatmap.ColorMappingCollection = colorCollection;		 Property: paletteSettings.palette.color

@Html.EJS().HeatMap(“container”).PaletteSettings(ps => ps.Palette(palette => { palette.Value(0).Color(“rgb(238,238,238)”).Add(); })).Render()
Specifies the color values of the heat map column data. Property: colorMappingCollection.value

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties(); List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Value = 0 });
Heatmap.ColorMappingCollection = colorCollection;		 Property: paletteSettings.palette.value

@Html.EJS().HeatMap(“container”).PaletteSettings(ps => ps.Palette(palette => { palette.Value(20).Add(); })).Render()
Specifies the label text of the heat map color. Property: colorMappingCollection.label.text

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties(); List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Label = new HeatMapLabel() { Text = “Moderate” } });
Heatmap.ColorMappingCollection = colorCollection;		 Property: paletteSettings.palette.label

@Html.EJS().HeatMap(“container”).PaletteSettings(ps => ps.Palette(palette => { palette.Label(“no contributions”).Add(); })).Render()
Specifies the style of the heat map color label. Property: colorMappingCollection.label.bold Property: colorMappingCollection.label.italic

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Label = new HeatMapLabel() { Bold = true } });
Heatmap.ColorMappingCollection = colorCollection;		 Property: legendSettings.textStyle.fontStyle

@Html.EJS().HeatMap(“container”).LegendSettings(ls => ls.TextStyle(ViewBag.textStyle)).Render()

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties(); List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Label = new HeatMapLabel() { FontSize = 18 } });
Heatmap.ColorMappingCollection = colorCollection;		 Property: legendSettings.textStyle.size

@Html.EJS().HeatMap(“container”).LegendSettings(ls => ls.TextStyle(ViewBag.textStyle)).Render()

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties(); List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Label = new HeatMapLabel() { FontFamily = “Arial” } });
Heatmap.ColorMappingCollection = colorCollection;		 Property: legendSettings.textStyle.fontFamily

@Html.EJS().HeatMap(“container”).LegendSettings(ls => ls.TextStyle(ViewBag.textStyle)).Render()

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
List colorCollection = new List();
colorCollection.Add(new HeatMapColorMapping() { Label = new HeatMapLabel() { FontColor = “red” } });
Heatmap.ColorMappingCollection = colorCollection;		 Property: legendSettings.textStyle.fontFamily

@Html.EJS().HeatMap(“container”).LegendSettings(ls => ls.TextStyle(ViewBag.textStyle)).Render()

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
TableMapping TableMapping = new TableMapping();
TableMapping.ColumnMapping.Add(new HeaderMapping() { PropertyName = “Y2010” });
Heatmap.ItemsMapping = TableMapping;		 Property: dataSource.yDataMapping

@Html.EJS().HeatMap(“container”).DataSource(ViewBag.dataSource).Render()

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
TableMapping TableMapping = new TableMapping();
TableMapping.RowMapping.Add(new HeaderMapping() { PropertyName = “Y2010” });
Heatmap.ItemsMapping = TableMapping;		 Property: dataSource.xDataMapping

@Html.EJS().HeatMap(“container”).DataSource(ViewBag.dataSource).Render()

ViewBag.dataSource = new { data: heatmapData, xDataMapping: ‘rowid’ };
Specifies the mapping name of the row. Property: itemsMapping.value.propertyName

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
TableMapping TableMapping = new TableMapping();
TableMapping.ValueMapping.Add(new HeaderMapping() { PropertyName = “Y2010” });
Heatmap.ItemsMapping = TableMapping;		 Property: dataSource.valueMapping

@Html.EJS().HeatMap(“container”).DataSource(ViewBag.dataSource).Render()

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

Events

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

@Html.EJ().HeatMap(“heatmap”, ViewData[“HeatMapModel”] as Syncfusion.JavaScript.DataVisualization.Models.HeatMapProperties)

HeatMapProperties Heatmap = new HeatMapProperties();
Heatmap.CellSelected = function(args) {};		 Property: cellClick

@Html.EJS().HeatMap(“container”).CellClick(“cellClick”).Render()

var cellClick = function (args) {};