javascript - How can I render heatmap on svg image? -
currently working on web application using angularjs. need show heat-map on svg in order show analytics. can suggest me javascript library?
you can create custom directive same. have used angularjs minified file...
(url: https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js)
i not find more relevant on github or anywhere else! if find something, please update same here.
anyway, tried create small heatmap using external file, hope helps!
var myapp = angular.module('myapp', []); myapp .controller('heatmapctrl', function($scope) { //random data var points = []; var max = 0; var width = 840; var height = 400; var len = 200; while (len--) { var val = math.floor(math.random() * 100); max = math.max(max, val); var point = { x: math.floor(math.random() * width), y: math.floor(math.random() * height), value: val }; points.push(point); } // heatmap data format $scope.heat_data = { max: max, data: points }; }) .directive('heatmap', function() { return { restrict: 'e', scope: { data: '=' }, template: '<div container></div>', link: function(scope, ele, attr) { scope.heatmapinstance = h337.create({ container: ele.find('div')[0] }); scope.heatmapinstance.setdata(scope.data); } }; }); heat-map { width: 600px; height: 300px; display: block; } heat-map div { height: 100%; } <script src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="heatmapctrl"> <heat-map data="heat_data"></heat-map> </div> </div>
Comments
Post a Comment