Angular Heatmap Directive Example

1. heatmap.js
2. Heatmap Examples
3. Angular Heatmap Directive Plugin Example

In this example you will learn how to use the AngularJS Heatmap Directive and its service to dynamically update heat map data.
The heatmap directive can be integrated by using
<heatmap [... optional parameters e.g. width, height, data, config ]></heatmap>
thank you, this example was useful

Demo

Code

// add <heatmap></heatmap> somewhere
angular.module('heatmapApp', ['heatmap'])
  .controller('HeatmapCtrl', ['$scope', '$heatmap', function($scope, $heatmap) {
  // $heatmap is the service that makes heatmap instances accessible by name
  // e.g. $heatmap.getInstance('heatmapId') will return the heatmap.js instance to access it manually
    function generateRandomData(len) {
      var max = 100;
      var min = 1;
      var maxX = document.body.clientWidth;
      var maxY = document.body.clientHeight;
      var data = [];
      while (len--) {
        data.push({
          x: ((Math.random() * maxX) >> 0),
          y: ((Math.random() * maxY) >> 0),
          value: ((Math.random() * max + min) >> 0),
          radius: ((Math.random() * 50 + min) >> 0)
        });
      }
      return {
        max: max,
        min: min,
        data: data
      }
    };
    // data can be set manually with the heatmap data attribute
    $scope.heatmapData = generateRandomData(1000);
    // the config attribute will configure the heatmap directive instance
    $scope.heatmapConfig = {
      blur: .9,
      opacity:.5
    };
  })
  .run();