HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create a stage
4
var stage = anychart.graphics.create("container");
5
6
// create data
7
var data = [170, 210, 130, 310];
8
9
// set the gauge type
10
linear = anychart.gauges.linear();
11
12
// set the layout
13
linear.layout("horizontal");
14
15
// set data for the gauge
16
linear.data(data);
17
18
// add the default pointer
19
linear.addPointer(0);
20
21
// set the size and position
22
linear.bounds(0, 0, "100%", "25%");
23
24
// set the container id
25
linear.container(stage);
26
27
// initiate drawing the gauge
28
linear.draw();
29
30
// set the gauge type
31
tank = anychart.gauges.tank();
32
33
// set the layout
34
tank.layout("horizontal");
35
36
// set data for the gauge
37
tank.data(data);
38
39
// add the default pointer
40
tank.addPointer(1);
41
42
// set the size and position
43
tank.bounds(0, "25%", "100%", "25%");
44
45
// set the container id
46
tank.container(stage);
47
48
// initiate drawing the gauge
49
tank.draw();
50
51
// set the gauge type
52
led = anychart.gauges.led();
53
54
// set the layout
55
led.layout("horizontal");
56
57
// set data for the gauge
58
led.data(data);
59
60
// add the default pointer
61
led.addPointer(2);
62
63
// set the size and position
64
led.bounds(0, "50%", "100%", "25%");
65
66
// set the container id
67
led.container(stage);
68
69
// initiate drawing the gauge
70
led.draw();
71
72
// set the gauge type
73
thermometer = anychart.gauges.thermometer();
74
75
// set the layout
76
thermometer.layout("horizontal");
77
78
// set data for the gauge
79
thermometer.data(data);
80
81
// add the default pointer
82
thermometer.addPointer(3);
83
84
// set the size and position
85
thermometer.bounds(0, "75%", "100%", "25%");
86
87
// set the container id
88
thermometer.container(stage);
89
90
// initiate drawing the gauge
91
thermometer.draw();
92
});