ejHeatMap

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