<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Angular Heatmap Directive Example | heatmap.js</title>
    <style>
      body, html { margin:0; padding:0; height:100%;}
      body { font-family:sans-serif; }
      #heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
      #heatmapContainer { width:100%; height:100%;}
      h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
      #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
      heatmap { width:100%; height:100%; position:absolute;}
    </style>
  </head>
  <body ng-app="heatmapApp">
    <div ng-controller="HeatmapCtrl">
      <heatmap id="heatmap-1" data="heatmapData" config="heatmapConfig" ng-click="updateData()"></heatmap>
    </div>
    <h1>Angular Heatmap Directive Example</h1>
        <div id="all-examples-info">
          <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="/build/heatmap.js"></script>
    <script src="/plugins/angular-heatmap.js"></script>
    <script>
    angular.module('heatmapApp', ['heatmap'])
      .controller('HeatmapCtrl', ['$scope', '$heatmap', function($scope, $heatmap) {
        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
          }
        };

        $scope.heatmapData = generateRandomData(1000);
        $scope.heatmapConfig = {
          blur: .9,
          opacity:.5
        };

        $scope.updateData = function() {
          $scope.heatmapData = generateRandomData(1000);
        };
      }])
      .run();
    </script>
  </body>
</html>
Add angular heatmap plugin example
Add angular heatmap plugin example
