heatmap.js
Version:
Dynamic JavaScript Heatmaps for the Web
64 lines (62 loc) • 2.6 kB
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 & 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/angular-heatmap.js"></script>
<script>
angular.module('heatmapApp', ['heatmap'])
.controller('HeatmapCtrl', ['$scope', '$heatma
value: ((Math.random() * max + min) >> 0),p', 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),
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>