-
Notifications
You must be signed in to change notification settings - Fork 32
/
Dynamic polyline.html
61 lines (53 loc) · 2.53 KB
/
Dynamic polyline.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
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10; IE=Edge" />
<title>05 Update polyline</title>
<link rel="stylesheet" type="text/css" href="../dist/idd.css" />
<link rel="stylesheet" type="text/css" href="../src/css/IDDTheme.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="../dist/idd.min.js"></script>
<script type="text/javascript">
var n = 1000;
var t = 0;
function getData() {
var x = new Array(n);
var y = new Array(n);
for (var i = 0; i < n; i++) {
var d = i * 0.003;
x[i] = d;
var k = 1 + 0.5 * Math.sin(t / 100 * Math.PI);
y[i] = d == 0 ? k : k * Math.sin(d * k * Math.PI) / (d * k * Math.PI);
}
t++;
return { x: x, y: y };
}
function polyline() {
var data = getData();
InteractiveDataDisplay.asPlot('chart').polyline("p2", { x: data.x, y: data.y, stroke: 'Green', thickness: 3 });
setTimeout(polyline, 25);
}
$(document).ready(function () {
var chart = InteractiveDataDisplay.asPlot('chart');
polyline();
});
</script>
</head>
<body>
<div id="chart" data-idd-plot="chart" style="width: 800px; height: 600px;">
<div data-idd-placement="bottom" class="idd-horizontalTitle">X</div>
<div data-idd-placement="left" class="idd-verticalTitle" style="width: 20px">
<div style="position: absolute; top: 50%; margin-top: -0.5em; height: 10em; width: 100px;">
Y
</div>
</div>
</div>
</body>
</html>