-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
101 lines (100 loc) · 3.22 KB
/
index.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
</style>
</head>
<body>
<svg id="fillgauge1" width="97%" height="250"></svg>
<svg id="fillgauge2" width="19%" height="200"></svg>
<svg id="fillgauge3" width="19%" height="200"></svg>
<svg id="fillgauge4" width="19%" height="200"></svg>
<svg id="fillgauge5" width="19%" height="200"></svg>
<svg id="fillgauge6" width="19%" height="200"></svg>
<script src="http://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="liquidFillGauge.js" type="text/javascript"></script>
<script type="text/javascript">
d3.select("#fillgauge1").call(d3.liquidfillgauge, 55);
d3.select("#fillgauge2").call(d3.liquidfillgauge, 28, {
circleColor: "#FF7777",
textColor: "#FF4444",
waveTextColor: "#FFAAAA",
waveColor: "#FFDDDD",
circleThickness: 0.2,
textVertPosition: 0.2,
waveAnimateTime: 1000,
backgroundColor: "#e0e0e0",
valueCountUpAtStart: false,
waveRiseAtStart: false
});
d3.select("#fillgauge3").call(d3.liquidfillgauge, 60.1, {
circleColor: "#3CA55C",
textColor: "#553300",
waveTextColor: "#805615",
waveColor: "#AA7D39",
circleThickness: 0.1,
circleFillGap: 0.2,
textVertPosition: 0.8,
waveAnimateTime: 2000,
waveHeight: 0.3,
waveCount: 1,
fillWithGradient: true,
gradientPoints: [0.2, 0, 0.9, 1],
gradientFromColor: "#3CA55C",
gradientToColor: "#B5AC49"
});
d3.select("#fillgauge4").call(d3.liquidfillgauge, 50, {
textVertPosition: 0.8,
waveAnimateTime: 5000,
waveHeight: 0.15,
waveAnimate: false,
waveOffset: 0.25,
valueCountUp: false,
displayPercent: false
});
d3.select("#fillgauge5").call(d3.liquidfillgauge, 60.44, {
circleThickness: 0.15,
circleColor: "#808015",
textColor: "#555500",
waveTextColor: "#FFFFAA",
waveColor: "#AAAA39",
textVertPosition: 0.8,
waveAnimateTime: 1000,
waveHeight: 0.05,
waveAnimate: true,
waveRise: false,
waveOffset: 0.25,
textSize: 0.75,
waveCount: 3
});
d3.select("#fillgauge6").call(d3.liquidfillgauge, 120, {
circleThickness: 0.4,
circleColor: "#6DA398",
textColor: "#0E5144",
waveTextColor: "#6DA398",
waveColor: "#246D5F",
textVertPosition: 0.52,
waveAnimateTime: 5000,
waveHeight: 0,
waveAnimate: false,
waveCount: 2,
waveOffset: 0.25,
textSize: 1.2,
minValue: 30,
maxValue: 150,
displayPercent: false
});
setInterval(function() {
d3.select("#fillgauge1").on("valueChanged")(Math.floor(Math.random() * 100));
d3.select("#fillgauge2").on("valueChanged")(Math.floor(Math.random() * 100));
d3.select("#fillgauge3").on("valueChanged")(Math.floor(Math.random() * 100));
d3.select("#fillgauge4").on("valueChanged")(Math.floor(Math.random() * 100));
d3.select("#fillgauge5").on("valueChanged")(Math.floor(Math.random() * 100));
d3.select("#fillgauge6").on("valueChanged")(Math.floor(Math.random() * 150));
}, 2000);
</script>
</body>
</html>