-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
96 lines (79 loc) · 1.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gauge</title>
<link rel="stylesheet" href="css/gauge.css">
<style>
* {
font-family: sans-serif;
}
#gauge {
width: 250px;
height: 250px;
}
#gauge-jquery {
width: 400px;
height: 400px;
}
.gauge-segment-1 {
stroke: #e0e0e0;
}
.gauge-segment-2 {
stroke: #a0a0a0;
}
.gauge-segment-3 {
stroke: #4060c0;;
}
.gauge-segment-4 {
stroke: #a02040;
}
#gauge-jquery .gauge-arrow,
#gauge-jquery .gauge-arrow:before {
background: #e0b030;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/gauge.js"></script>
</head>
<body>
<input id="gauge-val" type="number" value="20" min="0" max="100">
<div id="gauge"></div>
<input id="gauge-jquery-val" type="number" value="-0.7" min="-1" max="1">
<div id="gauge-jquery"></div>
<script>
var el = document.getElementById('gauge');
var gauge = new Gauge(el, {
label: 'VanillaJS',
angle: 270,
segments: [40, 80],
value: 20
});
var $gauge = $('#gauge-jquery').gauge({
label: 'jQuery',
angle: 180,
from: 1,
to: -1,
step: 0.2,
markFormat: function(v) {
return Math.round(v * 100) / 100;
},
segments: [0.2, 0.4, 0.6],
inset: true
});
$gauge.gauge(-0.7);
$('#gauge-val').change(function() {
gauge.setValue($(this).val());
});
$('#gauge-jquery-val').change(function() {
$gauge.gauge($(this).val());
});
// Trigger chande on enter (IE)
$('input').keypress(function(evt) {
if (evt.keyCode === 13) {
$(this).trigger('change');
}
});
</script>
</body>
</html>