Assigning Custom Triggers : Demos : Heat.js

side_navigation

Assigning Custom Triggers

Explore how to create a Heat.js instance that fires a custom trigger whenever the view is switched. This example demonstrates how to extend Heat.js with event hooks to automate actions and enhance your heat maps functionality.

Include Files

Make sure you include the following files:

<link rel="stylesheet" href="dist/heat.js.min.css">

<script src="dist/heat.min.js"></script>

Create DOM Element

Add a new DOM element to house the Heat.js instance:

<div id="heat-map" id="heat-map" data-heat-js="getBindingOptions()"></div>

Create the Binding Options

Add a new JavaScript function to return to binding options:

function getBindingOptions() {
    return {
        "events": {
            "onViewSwitch": onViewSwitch
        }
    };
}

Create the Custom Trigger Function

Add a new JavaScript function to perform the custom trigger:

function onViewSwitch(element, viewName) {
    console.log(element.id + " instance's view has been switched to: " + viewName);
}

Result

More Information

Need a different custom trigger? Explore the complete Heat.js documentation here to see every supported trigger and learn how to use them in your projects.