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 data set on our data
4
var dataSet = anychart.data.set([50,400]);
5
6
// set the gauge type
7
var gauge = anychart.gauges.circular();
8
9
// gauge settings
10
gauge.data(dataSet);
11
gauge.padding("10%");
12
gauge.startAngle(270);
13
gauge.sweepAngle(180);
14
15
// axis settings
16
var axis = gauge.axis()
17
.radius(95)
18
.width(1);
19
20
// scale settings
21
axis.scale()
22
.minimum(0)
23
.maximum(120)
24
.ticks({interval: 10})
25
.minorTicks({interval: 1});
26
27
// ticks settings
28
axis.ticks()
29
.type("trapezium")
30
.length(8);
31
32
// minor ticks settings
33
axis.minorTicks()
34
.enabled(true)
35
.length("1");
36
37
// second axis settings
38
var axis_1 = gauge.axis(1)
39
.radius(50)
40
.width(3);
41
42
// second scale settings
43
axis_1.scale()
44
.minimum(0)
45
.maximum(600)
46
.ticks({interval: 100})
47
.minorTicks({interval: 20});
48
49
// second ticks settings
50
axis_1.ticks()
51
.type("trapezium")
52
.length(8);
53
54
// second minor ticks settings
55
axis_1.minorTicks()
56
.enabled(true)
57
.length("3");
58
59
// needle
60
gauge.needle(0)
61
.enabled(true)
62
.startRadius("-5%")
63
.endRadius("80%")
64
.middleRadius(0)
65
.startWidth("0.1%")
66
.endWidth("0.1%")
67
.middleWidth("5%");
68
69
// marker
70
gauge.marker(0)
71
.axisIndex(1)
72
.dataIndex(1)
73
.size(7)
74
.type("triangle-down")
75
.position("outside")
76
.radius(50);
77
78
// bar
79
gauge.bar(0)
80
.axisIndex(1)
81
.position("inside")
82
.dataIndex(1)
83
.width(3)
84
.radius(50)
85
.zIndex(10);
86
87
// gap
88
gauge.cap()
89
.radius("6%");
90
91
// gauge label
92
gauge.label()
93
.text("ALBANY")
94
.anchor("center") // set the position of the label
95
.adjustFontSize(true)
96
.hAlign("center")
97
.offsetY("15%")
98
.offsetX("50%")
99
.width("50%")
100
.height("10%")
101
.zIndex(10);
102
103
104
// range
105
gauge.range()
106
.radius(70)
107
.from(0).to(120)
108
.endSize("18%");
109
110
// draw the chart
111
gauge.container("container").draw();
112
});