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([60,120]);
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(0);
13
gauge.sweepAngle(360);
14
15
// axis settings
16
var axis = gauge.axis(0);
17
axis.radius(95);
18
axis.width(1);
19
20
// scale settings
21
var scale = gauge.axis(0).scale();
22
scale.minimum(0);
23
scale.maximum(360);
24
var ticks = gauge.axis(0).scale().ticks();
25
ticks.interval(20);
26
var minorTicks = gauge.axis(0).scale().minorTicks();
27
minorTicks.interval(1);
28
29
// ticks settings
30
var axisTicks = gauge.axis(0).ticks();
31
axisTicks.enabled(true);
32
axisTicks.type("trapezium");
33
axisTicks.length(8);
34
35
// minor ticks settings
36
var axisMinorTicks = gauge.axis(0).minorTicks();
37
axisMinorTicks.enabled(true);
38
axisMinorTicks.length(1);
39
40
// second axis settings
41
var axis_1 = gauge.axis(1);
42
axis_1.radius(50);
43
axis_1.width(3);
44
45
// second scale settings
46
var scale_1 = gauge.axis(1).scale();
47
scale_1.minimum(0);
48
scale_1.maximum(300);
49
var ticks_1 = gauge.axis(1).scale().ticks();
50
ticks_1.interval(30);
51
var minorTicks_1 = gauge.axis(1).scale().minorTicks();
52
minorTicks_1.interval(10);
53
54
// second ticks settings
55
var axisTicks_1 = gauge.axis(1).ticks();
56
axisTicks_1.enabled(true);
57
axisTicks_1.type("trapezium");
58
axisTicks_1.length(8);
59
60
// second minor ticks settings
61
var axisMinorTicks_1 = gauge.axis(1).minorTicks();
62
axisMinorTicks_1.enabled(true);
63
axisMinorTicks_1.length(3);
64
65
// marker
66
var marker = gauge.marker();
67
marker.enabled(true);
68
marker.dataIndex(0);
69
marker.axisIndex(0);
70
marker.size(7);
71
72
// bar
73
var bar = gauge.bar();
74
bar.width(3);
75
bar.dataIndex(1);
76
bar.axisIndex(1);
77
78
// draw the chart
79
gauge.container("container");
80
gauge.draw();
81
});