This repository has been archived by the owner on Nov 15, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
executable file
·51 lines (50 loc) · 1.7 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
<title>Simple areaspline chart for AngularJS</title>
<style>
body, html {
padding: 0;
margin: 0;
}
path {
fill: blue;
}
</style>
</head>
<body id='ng-app' ng-app="ExampleApp">
<div id='areaspline-container' ng-controller="MainCtrl">
<div style="width: {{ containerWidth }}; height: {{ containerHeight }};">
<areaspline data='data' transition="true"></areaspline>
</div>
<button ng-click='randomize()'>Randomize</button>
<span ng-bind="data"></span>
Container width: <input type="text" ng-model="containerWidth" ng-init="containerWidth = '100%'" ng-change="fireResizeEvent()" />
height: <input type="text" ng-model="containerHeight" ng-init="containerHeight = '300px'" ng-change="fireResizeEvent()" />
</div>
<script src="app/components/jquery/jquery.js"></script>
<script src="app/components/d3/d3.js"></script>
<script src="app/components/angular/angular.js"></script>
<script src="app/components/angular-d3/dist/angular-d3.js"></script>
<script src="src/angular-areaspline.js"></script>
<script>
var doc = null;
angular.module('ExampleApp', ['vr.directives.areaspline'])
.controller('MainCtrl', ['$scope', '$document', function($scope, $document) {
$scope.data = [0,0,1,3,1,0,0];
$scope.randomize = function() {
var randLength = Math.ceil(Math.random()*9)+1;
var newData = [];
for(var i=0;i<randLength;i++) {
newData[i] = Math.ceil(Math.random()*20);
}
$scope.data = newData;
};
$scope.fireResizeEvent = function() {
console.log('hmm');
$scope.$broadcast('resizeAreaSpline');
}
}]);
</script>
</body>
</html>