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

HTML

<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

HTML

<div id="heatmap"></div>
    <script>
        $("#heatmap").ejHeatMap({
            width: "300"
        });
    </script>

height object

Specifies the width of the heat map.

Default Value:

• null

Example

HTML

<div id="heatmap"></div>
    <script>
        $("#heatmap").ejHeatMap({
            height: "300"
        });
    </script>

id number

Specifies the name of the heat map.

Default Value:

• null

Example

HTML

<div id="heatmap"></div>
    <script>
        $("#heatmap").ejHeatMap({
            id: "heatmap"
        });
    </script>

showTooltip boolean

Enables or disables tooltip of heatmap

Default Value:

• true

Example

HTML

<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

HTML

<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

JS

$("#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

JS

$("#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

HTML

<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

JS

$("#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

JS

$("#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

JS

$("#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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

HTML

<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

JAVASCRIPT

// 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

JAVASCRIPT

// 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

JAVASCRIPT

// 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

JAVASCRIPT

// cellSelected event for HeatMap
$("#heatmapcontent").ejHeatMap({
    cellSelected: function(args) {}
});