ejHeatMap
11 Jul 201824 minutes to read
Essential HeatMap JS represents tabular data values as gradient colors instead of numbers,low and high values are different colors with different gradients.
Syntax
$(element).ejHeatMap();
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({});
</script>
Requires
- module:ej.heatmap.base.js
- module:ej.heatmap.js
- module:ej.core.js
- module:ej.data.js
- module:ej.globalize.js
- module:ej.touch.js
- module:ej.scroller.js
Members
width object
Specifies the width of the heat map.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
width: "300"
});
</script>
height object
Specifies the width of the heat map.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
height: "300"
});
</script>
id number
Specifies the name of the heat map.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
id: "heatmap"
});
</script>
showTooltip boolean
Enables or disables tooltip of heatmap
Default Value:
- true
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
showtooltip: true
});
</script>
tooltipSettings object
Defines the tooltip that should be shown when the mouse hovers over rows/columns.
tooltipSettings.templateId string
Defines the tooltip that should be shown when the mouse hovers over rows/columns.
Default Value:
- null
Example
<div id="heatmap"></div>
<script type="text/x-jsrender" id="mouseovertoolTipId">
<div class="tooltip-style">
Custom Tooltip
<div style="height:0px;width:100%;border:1px solid white;">
</div>
<table>
<tr>
<td style="width:50px;">Year</td>
<td></td>
</tr>
</table>
</div>
</script>
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
templateId:"mouseovertoolTipId"
}
});
tooltipSettings.associate enum
Defines the tooltip of associate that should be shown when the mouse hovers over rows/columns.
Name | Description |
---|---|
Target | Used to set the associate of tooltip as Target |
MouseFollow | Used to set the associate of tooltip as MouseFollow |
MouseEnter | Used to set the associate of tooltip as MouseEnter |
Default Value:
- mouseFollow
Example
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
templateId:"mouseovertoolTipId",
associate:"mouseFollow"}
});
tooltipSettings.isBalloon boolean
Enables/ disables the balloon for the tooltip to be shown
Default Value:
- true
Example
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
templateId:"mouseovertoolTipId",
isBalloon:true}
});
tooltipSettings.position object
Defines various attributes of the Tooltip position
tooltipSettings.position.target object
Sets the Tooltip position against target.
tooltipSettings.position.target.horizontal enum
Sets the arrow position again popup based on horizontal(x) value
Name | Description |
---|---|
Left | Used to display the tooltip horizontally on left side of rows/columns |
Center | Used to display the tooltip horizontally on center side of rows/columns |
Right | Used to display the tooltip horizontally on right side of rows/columns |
Default Value
- center
tooltipSettings.position.target.vertical enum
Sets the arrow position again popup based on vertical(y) value
Name | Description |
---|---|
Top | Used to display the tooltip horizontally on left side of rows/columns |
Center | Used to display the tooltip horizontally on center side of rows/columns |
Bottom | Used to display the tooltip horizontally on right side of rows/columns |
Default Value
- top
tooltipSettings.position.stem object
Sets the arrow position again popup.
tooltipSettings.position.stem.horizontal enum
Sets the arrow position again popup based on horizontal(x) value
Default Value
- center
tooltipSettings.position.stem.vertical enum
Sets the arrow position again popup based on vertical(y) value
Default Value
- bottom
Example
<script type="text/javascript">
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
position: {
stem: {horizontal: "left"}
};
}
});
</script>
tooltipSettings.trigger enum
Defines the tooltip to be triggered.
Name | Description |
---|---|
hover | Tooltip can be triggered on mouse hovers |
click | Tooltip can be triggered on mouse click |
Default Value:
- hover
Example
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
trigger:"click",
}
});
tooltipSettings.animation object
Defines the animation for the tooltip that should be shown when the mouse hovers over rows/columns.
tooltipSettings.animation.effect enum
Defines the animation effect for the tooltip that should be shown when the mouse hovers over rows/columns.
Name | Description |
---|---|
None | Sets tooltip animation as None |
Fade | Sets tooltip animation as Fade |
Slide | Sets tooltip animation as Slide |
Default Value:
- none
Example
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
animation:{effect:"none"}
}
});
tooltipSettings.animation.speed number
Defines the animation speed for the tooltip that should be shown when the mouse hovers over rows/columns.
Default Value:
- 0
Example
$("#heatmap").ejHeatMap({
//Defines mouse over tooltip
toolTipSettings: {
animation:{effect:"none", speed:0}
}
});
itemsSource object
Specifies the source data of the heat map.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
var columns = ["Vegie-spread", "Tofuaa", "Alice Mutton", "Konbu", "Flytemysost"]
var itemSource = [];
for (var i = 0; i < columns.length; i++) {
for (var j = 0; j < 6; j++) {
var value = Math.floor((Math.random() * 100) + 1);
itemSource.push({ ProductName: columns[i], Year: "Y" + (2011 + j), Value: value })
}
}
$("#heatmap").ejHeatMap({
itemsSource: itemSource
});
</script>
heatMapCell object
Specifies the property of the heat map cell.
Default Value:
- Null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
heatmapCell: { showColor: true }
});
</script>
heatMapCell.showContent enum
Specifies whether the cell content can be visible or not.
Name | Description |
---|---|
Visible | Display the content of the cell |
Hidden | Hide the content of the cell |
Default Value:
- ej.HeatMap.CellVisibility.Visible
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
heatmapCell: { showContent: ej.HeatMap.CellVisibility.Hidden }
});
</script>
heatMapCell.showColor boolean
Specifies whether the cell color can be visible or not.
Default Value:
- true
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
heatmapCell: { showColor: true }
});
</script>
isResponsive boolean
Specifies can enable responsive mode or not for heat map.
Default Value:
- false
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
isResponsive: true
});
</script>
enableVirtualization boolean
Specifies whether the virtualization can be enable or not.
Default Value:
- false
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
enableVirtualization: true
});
</script>
defaultColumnStyle object
Specifies the default column properties for all the column style not specified in column properties.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
defaultColumnStyle: {
textAlign: ej.HeatMap.TextAlign.Left
}
});
</script>
defaultColumnStyle.textAlign object
Specifies the alignment mode of the heat map column.
Enables/disables the bold style
Name | Description |
---|---|
Right | SAlign right to the heat map cell. |
Left | Align left to the heat map cell. |
Center | Align center to the heat map cell. |
Default Value:
- ej.HeatMap.TextAlign.Center
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
defaultColumnStyle: {
textAlign: ej.HeatMap.TextAlign.Left
}
});
</script>
defaultColumnStyle.headerTemplateIDstring
Specifies the template id of the heat map column header.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
defaultColumnStyle: {
headerTemplateID: "columnTemplate"
}
});
</script>
<script type="text/x-jsrender" id="columnTemplate">
<img style="width: 45px; height: 40px" src="2.jpg" alt="" />
<span></span>
</script>
defaultColumnStyle.templateIDstring
Specifies the template id of all individual cell data of the heat map.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
defaultColumnStyle: {
templateID: "template"
}
});
</script>
<script type="text/x-jsrender" id="template">
<img style="width: 45px; height: 40px" src="2.jpg" alt="" />
<span></span>
</script>
legendCollection array
Specifies the no of legends can sync with heat map.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
legendCollection: ["heatmap_legend1", "heatmap_legend2"]
});
</script>
itemsMapping object
Specifies the property and display value of the heat map column.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
column: { "propertyName": "ProductName", "displayName": "Product Name" },
row: { "propertyName": "Year", "displayName": "Year" }
}
});
</script>
itemsMapping.columnStyle object
Column settings for the individual heat map column.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnStyle: {
textAlign: ej.HeatMap.TextAlign.Left
}
}
});
</script>
itemsMapping.columnStyle.width number
Specifies the width of the heat map column.
Default Value:
- 0
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnStyle: {width: 100}
}
});
</script>
itemsMapping.columnStyle.textAlign string
Specifies the text align mode of the heat map column.
Default Value:
- ej.HeatMap.TextAlign.Center
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnStyle: {
textAlign: ej.HeatMap.TextAlign.Left
}
}
});
</script>
itemsMapping.columnStyle.headerTemplateID string
Specifies the template id of the column header.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnStyle: { headerTemplateID: "template"
}
}
});
</script>
<script type="text/x-jsrender" id="template">
<img style="width: 45px; height: 40px" src="2.jpg" alt="" />
<span></span>
</script>
itemsMapping.columnStyle.templateID string
Specifies the template id of all individual cell data.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnStyle: {
templateID: "template"
}
}
});
</script>
<script type="text/x-jsrender" id="template">
<img style="width: 45px; height: 40px" src="2.jpg" alt="" />
<span></span>
</script>
itemsMapping.column object
Specifies the property and display value of the column.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
column: { "propertyName": "ProductName", "displayName": "Product Name" }
}
});
</script>
itemsMapping.column.propertyName string
Specifies the name of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
column: { "propertyName": "ProductName" }
}
});
</script>
itemsMapping.column.displayName string
Specifies the value of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
column: { "displayName": "Product Name" }
}
});
</script>
itemsMapping.row object
Specifies the row property and display value of the heat map.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
row: { "propertyName": "ProductName", "displayName": "Product Name" }
}
});
</script>
itemsMapping.row.propertyName string
Specifies the name of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
row: { "propertyName": "ProductName" }
}
});
</script>
itemsMapping.row.displayName string
Specifies the value of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
row: { "displayName": "Product Name" }
}
});
</script>
itemsMapping.value object
Specifies the property and display value of the column value.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
value: { "propertyName": "Value" }
}
});
</script>
itemsMapping.value.propertyName string
Specifies the name of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
value: { "propertyName": "ProductName" }
}
});
</script>
itemsMapping.value.displayName string
Specifies the value of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
value: { "displayName": "Product Name" }
}
});
</script>
itemsMapping.headerMapping object
Specifies the property and display value of the header.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
headerMapping: { "propertyName": "Year", "displayName": "Year" }
}
});
</script>
itemsMapping.headerMapping.propertyName string
Specifies the name of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
headerMapping: { "propertyName": "Year" }
}
});
</script>
itemsMapping.headerMapping.displayName string
Specifies the value of the column or row.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
headerMapping: { "displayName": "Year" }
}
});
</script>
itemsMapping.headerMapping.columnStyle object
Specifies the property and display value of the header.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
headerMapping: {
"columnStyle": { width: 105, textAlign: "right" }
}
}
});
</script>
itemsMapping.columnMapping array
Specifies the property and display value of the collection of column.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
itemsMapping: {
columnMapping: [
{ "propertyName": "property name1", "displayName": "display name1" },
{ "propertyName": "property name2", "displayName": "display name2" }
]
}
});
</script>
colorMappingCollection array
Specifies the color values of the heat map column data.
Default Value:
- []
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ value: 0, color: "#8ec8f8", label: { text: "0" } },
{ value: 100, color: "#0d47a1", label: { text: "100" } }
]
});
</script>
colorMappingCollection.colorstring
Specifies the color of the heat map column data.
Default Value:
- “white”
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ value: 0, color: "#8ec8f8", label: { text: "0" } },
{ value: 100, color: "#0d47a1", label: { text: "100" } }
]
});
</script>
colorMappingCollection.value number
Specifies the color values of the heat map column data.
Default Value:
- 0
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ value: 0, color: "#8ec8f8", label: { text: "0" } },
{ value: 100, color: "#0d47a1", label: { text: "100" } }
]
});
</script>
colorMappingCollection.label object
Specifies the label properties of the heat map color.
Default Value:
- null
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { bold: true } }
]
});
</script>
colorMappingCollection.label.bold boolean
Enables/disables the bold style of the heat map label.
Default Value:
- false
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { bold: true } }
]
});
</script>
colorMappingCollection.label.italic boolean
Enables/disables the italic style of the heat map label.
Default Value:
- false
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { italic: true } }
]
});
</script>
colorMappingCollection.label.textstring
specifies the text value of the heat map label.
Default Value:
- ””
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { text: "10" } }
]
});
</script>
colorMappingCollection.label.textDecoration enum
Specifies the text style of the heat map label.
Name | Description |
---|---|
Underline | Defines a line below the text |
Overline | Defines a line above the text |
LineThrough | Defines a line through the text |
None | Defines a normal text. This is default |
Default Value:
- ej.HeatMap.TextDecoration.None
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { textDecoration: ej.HeatMap.TextDecoration.None } }
]
});
</script>
colorMappingCollection.label.fontSize number
Specifies the font size of the heat map label.
Default Value:
- 10
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { fontSize: 18 } }
]
});
</script>
colorMappingCollection.label.fontFamilystring
Specifies the font family of the heat map label.
Default Value:
- “Arial”
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { fontFamily: "Arial" } }
]
});
</script>
colorMappingCollection.label.fontColorstring
Specifies the font color of the heat map label.
Default Value:
- “black”
Example
<div id="heatmap"></div>
<script>
$("#heatmap").ejHeatMap({
colorMappingCollection: [
{ label: { fontColor: "red" } }
]
});
</script>
Events
cellMouseOver
Triggered when the mouse over on the cell.
Name | Type | Description |
---|---|---|
cellValue | string | Value displayed on the cell |
source | object | Returns the HeatMap cell data |
cell | object | Returns the specific HeatMap cell |
Example
// cellMouseOver event for HeatMap
$("#heatmapcontent").ejHeatMap({
cellMouseOver: function(args) {}
});
cellMouseEnter
Triggered when the mouse over on the cell.
Name | Type | Description |
---|---|---|
cellValue | string | Value displayed on the cell |
source | object | Returns the HeatMap cell data |
cell | object | Returns the specific HeatMap cell |
Example
// cellMouseEnter event for HeatMap
$("#heatmapcontent").ejHeatMap({
cellMouseEnter: function(args) {}
});
cellMouseLeave
Triggered when the mouse over on the cell.
Name | Type | Description |
---|---|---|
cellValue | string | Value displayed on the cell |
source | object | Returns the HeatMap cell data |
cell | object | Returns the specific HeatMap cell |
Example
// cellMouseLeave event for HeatMap
$("#heatmapcontent").ejHeatMap({
cellMouseLeave: function(args) {}
});
cellSelected
Triggered when the mouse over on the cell.
Name | Type | Description |
---|---|---|
cellValue | string | Value displayed on the cell |
source | object | Returns the HeatMap cell data |
cell | object | Returns the specific HeatMap cell |
Example
// cellSelected event for HeatMap
$("#heatmapcontent").ejHeatMap({
cellSelected: function(args) {}
});