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