side_navigation

Custom Triggers

Explore the complete list of custom triggers supported in Heat.js. These event hooks are activated by specific user actions, helping developers extend functionality, automate workflows, and build interactive heat map experiences.

Example

<div id="heat-map" id="heat-map" data-heat-js="getBindingOptions()"></div>
function getBindingOptions() {
    return {
        "events": {
            "onViewSwitch": onViewSwitch
        }
    };
}
function onViewSwitch(element, viewName) {
    console.log(element.id + " instance's view has been switched to: " + viewName);
}

For Rendering

options.events.onRefresh( element ):

Fires when a rendered heat map is refreshed.
Parameter: element: Object - The Heat.js element.

options.events.onBeforeRender( element ):

Fires before the rendering of an element.
Parameter: element: Object - The Heat.js element.

options.events.onRenderComplete( element ):

Fires when the rendering of an element is complete.
Parameter: element: Object - The Heat.js element.

options.events.onDestroy( element ):

Fires when the element is destroyed (reverted back to its original state).
Parameter: element: Object - The Heat.js element.

options.events.onMapDayToolTipRender( element, date, count, year, isHoliday ):

Fires when a tooltip for a specific day on the "map" view is rendered.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date of the day.
Parameter: count: number - The number of activities for the day.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the date is a holiday.

options.events.onLineDayToolTipRender( element, date, count, year, isHoliday ):

Fires when a tooltip for a specific day on the "line" view is rendered.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date of the day.
Parameter: count: number - The number of activities for the day.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the date is a holiday.

options.events.onChartDayToolTipRender( element, date, count, year, isHoliday ):

Fires when a tooltip for a specific day on the "chart" view is rendered.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date of the day.
Parameter: count: number - The number of activities for the day.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the date is a holiday.

For Year Selections

options.events.onBackYear( element, year ):

Fires when the year is moved back.
Parameter: element: Object - The Heat.js element.
Parameter: year: number - The year that is now being viewed.

options.events.onNextYear( element, year ):

Fires when the year is moved forward.
Parameter: element: Object - The Heat.js element.
Parameter: year: number - The year that is now being viewed.

options.events.onSetYear( element, year ):

Fires when the year is manually set.
Parameter: element: Object - The Heat.js element.
Parameter: year: number - The year that is now being viewed.

For View Item Clicking

options.events.onMapDayClick( element, date, count, year, isHoliday ):

Fires when an item is clicked in the "map" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onMapDayDblClick( element, date, count, year, isHoliday ):

Fires when an item is double-clicked in the "map" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onLineDayClick( element, date, count, year, isHoliday ):

Fires when an item is clicked in the "line" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onLineDayDblClick( element, date, count, year, isHoliday ):

Fires when an item is double-clicked in the "line" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onChartDayClick( element, date, count, year, isHoliday ):

Fires when an item is clicked in the "chart" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onChartDayDblClick( element, date, count, year, isHoliday ):

Fires when an item is double-clicked in the "chart" view.
Parameter: element: Object - The Heat.js element.
Parameter: date: Date - The date that was clicked.
Parameter: count: number - The number of items for the date available.
Parameter: year: number - The year that is currently being viewed.
Parameter: isHoliday: boolean - States if the day clicked is a holiday.

options.events.onWeekDayClick( element, dayNumber, count, year ):

Fires when an item is clicked in the "days" view.
Parameter: element: Object - The Heat.js element.
Parameter: dayNumber: number - The week day number.
Parameter: count: number - The number of items for the weekday available.
Parameter: year: number - The year that is currently being viewed.

options.events.onWeekDayDblClick( element, dayNumber, count, year ):

Fires when an item is double-clicked in the "days" view.
Parameter: element: Object - The Heat.js element.
Parameter: dayNumber: number - The week day number.
Parameter: count: number - The number of items for the weekday available.
Parameter: year: number - The year that is currently being viewed.

options.events.onMonthClick( element, monthNumber, count, year ):

Fires when an item is clicked in the "months" view.
Parameter: element: Object - The Heat.js element.
Parameter: monthNumber: number - The month number.
Parameter: count: number - The number of items for the month available.
Parameter: year: number - The year that is currently being viewed.

options.events.onMonthDblClick( element, monthNumber, count, year ):

Fires when an item is double-clicked in the "months" view.
Parameter: element: Object - The Heat.js element.
Parameter: monthNumber: number - The month number.
Parameter: count: number - The number of items for the month available.
Parameter: year: number - The year that is currently being viewed.

options.events.onColorRangeClick( element, colorRange, count, year ):

Fires when an item is clicked in the "color ranges" view.
Parameter: element: Object - The Heat.js element.
Parameter: colorRange: Object - The color range details.
Parameter: count: number - The number of items for the color range available.
Parameter: year: number - The year that is currently being viewed.

options.events.onColorRangeDblClick( element, colorRange, count, year ):

Fires when an item is double-clicked in the "color ranges" view.
Parameter: element: Object - The Heat.js element.
Parameter: colorRange: Object - The color range details.
Parameter: count: number - The number of items for the color range available.
Parameter: year: number - The year that is currently being viewed.

For Data

options.events.onAddType( element, type ):

Fires when a trend type is added.
Parameter: element: Object - The Heat.js element.
Parameter: type: string - The trend type.

options.events.onRemoveType( element, type ):

Fires when a trend type is removed.
Parameter: element: Object - The Heat.js element.
Parameter: type: string - The trend type.

options.events.onAddDate( element ):

Fires when data for an element is added.
Parameter: element: Object - The Heat.js element.

options.events.onRemoveDate( element ):

Fires when data for an element is reset.
Parameter: element: Object - The Heat.js element.

options.events.onReset( element ):

Fires when the data for an element is exported.
Parameter: element: Object - The Heat.js element.

options.events.onExport( element ):

Fires when the data for an element is exported.
Parameter: element: Object - The Heat.js element.

options.events.onImport( element ):

Fires when data for an element is imported.
Parameter: element: Object - The Heat.js element.

options.events.onDataFetch( element ):

Fires when an element requests a data pull (will return all the data in an object). When set, all data adding/removing is disabled, including Local Storage support.
Parameter: element: Object - The Heat.js element.
Returns: Object - An object of data.

options.events.onClearDate( element ):

Fires when a date for an element is cleared.
Parameter: element: Object - The Heat.js element.

options.events.onUpdateDate( element ):

Fires when a date for an element is updated.
Parameter: element: Object - The Heat.js element.

options.events.onClearViewableData( element ):

Fires when the viewable data is cleared.
Parameter: element: Object - The Heat.js element.

For Views

options.events.onTypeSwitch( element, type ):

Fires when the trend type being viewed is switched.
Parameter: element: Object - The Heat.js element.
Parameter: type: string - The trend type selected.

options.events.onViewSwitch( element, view ):

Fires when the view is switched.
Parameter: element: Object - The Heat.js element.
Parameter: view: string - The view selected.

options.events.onColorRangeTypeToggle( element, id, visible ):

Fires when a color range type is toggled on/off.
Parameter: element: Object - The Heat.js element.
Parameter: id: string - The ID of the color range.
Parameter: visible: boolean - States if the color range is visible.

options.events.onZoomLevelChange( element, zoomLevel ):

Fires when the zoom level is changed.
Parameter: element: Object - The Heat.js element.
Parameter: zoomLevel: number - The zoom level.

For Binding Options

options.events.onBindingOptionsUpdate( element, bindingOptions ):

Fires when a date for an element is updated.
Parameter: element: Object - The Heat.js element.
Parameter: bindingOptions: Object - The updated binding options.