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

@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) {};
Contents
Contents