forked from Mikhus/canvas-gauges
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example-html-gauge.html
45 lines (40 loc) · 1.28 KB
/
example-html-gauge.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
<!doctype html>
<html>
<head>
<title>Gtest</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge1" width="400" height="400"
data-type="canv-gauge"
data-title="Speed"
data-min-value="0"
data-max-value="220"
data-major-ticks="0 20 40 60 80 100 120 140 160 180 200 220"
data-minor-ticks="2"
data-stroke-ticks="true"
data-units="Km/h"
data-value-format="3.2"
data-glow="true"
data-animation-delay="10"
data-animation-duration="200"
data-animation-fn="bounce"
data-colors-needle="#f00 #00f"
data-highlights="0 30 #eee, 30 60 #ccc, 60 90 #aaa, 90 220 #eaa"
data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue( Math.random() * 220);}, 1000);"
></canvas>
<canvas data-type="canv-gauge" data-value="17.34"></canvas>
<canvas width="300" height="300"
data-type="canv-gauge"
data-title="Hip-Hop"
data-onready="setInterval( function() { Gauge.Collection[2].setValue( Math.random() * 100);}, 1000);"
></canvas>
<canvas width="200" height="200"
data-type="canv-gauge"
data-title="Negative Values"
data-min-value="-50"
data-max-value="50"
data-onready="setInterval( function() { Gauge.Collection[3].setValue( (Math.random()*100) -50 );}, 1000);"
></canvas>
</body>
</html>