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 stage
4
var stage = anychart.graphics.create("container");
5
6
// Create bullet chart
7
var chartB = anychart.bullet([
8
{value: 225} // main marker in a shape of a bar
9
]);
10
11
var chartL = anychart.bullet([
12
{value: 240, type: "line"} // line shaped marker
13
]);
14
15
var chartX = anychart.bullet([
16
{value: 275, type: "x"} // x-shaped marker
17
]);
18
19
var chartE = anychart.bullet([
20
{value: 290, type: "ellipse"} // ellipse shaped marker
21
]);
22
23
chartB
24
.container(stage) // Set chart container
25
.bounds(0, 0, "100%", 120) // Set chart size and position settings
26
.title()
27
.width(90) // Set title width
28
.text("Bar Marker"); // Set chart title
29
30
chartL
31
.container(stage) // Set chart container
32
.bounds(0, 120, "100%", 120) // Set chart size and position settings
33
.title()
34
.width(90) // Set title width
35
.text("Line Marker"); // Set chart title
36
37
chartX
38
.container(stage) // Set chart container
39
.bounds(0, 240, "100%", 120) // Set chart size and position settings
40
.title()
41
.width(90) // Set title width
42
.text("X Marker"); // Set chart title
43
44
chartE
45
.container(stage) // Set chart container
46
.bounds(0, 360, "100%", 120) // Set chart size and position settings
47
.title()
48
.width(90) // Set title width
49
.text("Ellipse Marker"); // Set chart title
50
51
// set bullet ranges
52
chartSettings(chartB);
53
chartSettings(chartL);
54
chartSettings(chartX);
55
chartSettings(chartE);
56
57
//
58
59
// Set chart container
60
61
// Initiate chart drawing
62
chartB.draw();
63
chartL.draw();
64
chartX.draw();
65
chartE.draw();
66
67
});
68
69
function chartSettings (chart){
70
// Set chart ranges
71
chart.range().from(0).to(100);
72
chart.range(1).from(100).to(150);
73
chart.range(2).from(150).to(200);
74
chart.range(3).from(200).to(250);
75
chart.range(4).from(250).to(300);
76
}