Angular Heatmap Directive Plugin

1. heatmap.js
2. Heatmap Plugins
3. Angular Heatmap

A wrapper for heatmap.js so it can be used as an AngularJS directive

This plugin is maintained within the actual heatmap.js repository. If you download heatmap.js you will also download the latest version of angular-heatmap.js.

Documentation

Setup

Add the angular-heatmap.js right under heatmap.js (either in the header or right before closing the body) and inject the 'heatmap' module in your application. A <heatmap> directive can take take the following attributes: id, data, config, width, height, where data is a typical heatmap.js data object (as explained in the main documentation), config is the typical configuration object.

API

The angular-heatmap.js plugin exposes a service called '$heatmap' that provides direct access to your heatmap instances

• getInstance(id)
  returns the heatmap instance with id=[id]
  
  
• getAllInstances()
  returns all existing heatmap instances.

Example

Check out the live example.

// full example directive usage
// <heatmap id="myHeatmapInstance" data="myHeatmapData" config="myHeatmapCfg"></heatmap>

// => the heatmap directive will react to changes to myHeatmapData & myHeatmapCfg automatically!
// => you can manually access the heatmap instance by $heatmap.getInstance('myHeatmapInstance')