-
Notifications
You must be signed in to change notification settings - Fork 0
/
iops-single.html
112 lines (88 loc) · 2.18 KB
/
iops-single.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 30px sans-serif;
margin: 0 auto;
display: block;
}
.line {
fill: none;
stroke: #f05c56;
stroke-width: 2px;
}
text {
fill: #37424a;
}
.axis path, .axis line {
fill: none;
stroke: #37424a;
shape-rendering: crispEdges;
}
</style>
<body style="margin:0; padding:0;">
<script src="d3.v3.min.js"></script>
<script>
var n = 40,
random = d3.random.normal(0, .2),
data = d3.range(n).map(function() { return 0;});
var margin = {top: 1, right: 1, bottom: 1, left: 120},
width = 1720 - margin.left - margin.right,
height = 920 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 2500])
.range([height, 0]);
var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
/*
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
*/
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
tick();
function tick() {
d3.json("json/iops.php", function(result) {
// push a new data point onto the back
if (result['ops'] > 0) {
data.push(result['ops']);
} else {
data.push(0);
}
// redraw the line, and slide it to the left
path
.attr("d", line)
.attr("transform", "")
.transition()
.duration(500)
.ease("linear")
.attr("transform", "translate(" + x(-1) + ")")
.each("end", tick);
// pop the old data point off the front
data.shift();
});
}
</script>