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
// set the data
4
table = anychart.data.table();
5
table.addData([
6
['2004-01-02', 92.86, 93.05, 91.20, 91.55],
7
['2004-01-05', 92.00, 93.09, 92.00, 93.05],
8
['2004-01-06', 92.20, 93.19, 92.14, 93.06],
9
['2004-01-07', 93.14, 93.38, 92.47, 92.78],
10
['2004-01-08', 93.21, 93.21, 92.03, 93.04],
11
['2004-01-09', 91.75, 92.35, 91.00, 91.21],
12
['2004-01-12', 91.21, 92.14, 91.21, 91.55],
13
['2004-01-13', 91.45, 91.51, 89.01, 89.70],
14
['2004-01-14', 89.90, 90.46, 89.75, 90.31],
15
['2004-01-15', 95.07, 95.65, 93.55, 94.02],
16
['2004-01-16', 95.00, 95.35, 94.71, 95.32],
17
['2004-01-20', 96.00, 97.44, 95.73, 97.10],
18
['2004-01-21', 97.23, 98.04, 96.64, 97.70],
19
['2004-01-22', 97.84, 98.16, 97.32, 97.51],
20
['2004-01-23', 97.82, 98.21, 97.10, 97.90],
21
['2004-01-26', 97.90, 99.85, 97.56, 99.85],
22
['2004-01-27', 99.40, 99.67, 98.70, 98.80],
23
['2004-01-28', 99.15, 99.42, 97.28, 97.38],
24
['2004-01-29', 98.10, 98.60, 96.55, 98.01],
25
['2004-01-30', 98.02, 99.33, 97.84, 99.23],
26
['2004-02-02', 99.15, 99.94, 98.50, 99.39],
27
['2004-02-03', 99.00, 99.00, 98.95, 99.00],
28
['2004-02-04', 99.38, 99.43, 99.30, 99.19],
29
['2004-02-05', 99.00, 99.09, 98.26, 98.86],
30
['2004-02-06', 98.85, 99.24, 98.25, 98.94],
31
['2004-02-09', 99.31, 99.44, 98.60, 98.95],
32
['2004-02-10', 98.45, 99.97, 98.41, 99.61],
33
['2004-02-11', 99.20, 99.31, 98.80, 99.96],
34
['2004-02-12', 99.06, 99.30, 99.30, 99.30],
35
['2004-02-13', 99.10, 99.99, 99.08, 99.71],
36
['2004-02-17', 99.99, 99.00, 99.32, 99.37],
37
['2004-02-18', 99.31, 99.77, 98.15, 98.42],
38
['2004-02-19', 98.42, 99.23, 97.52, 97.80],
39
['2004-02-20', 98.60, 98.60, 97.19, 97.31],
40
['2004-02-23', 97.40, 97.51, 95.46, 95.96],
41
['2004-02-24', 95.20, 97.46, 95.20, 96.79],
42
['2004-02-25', 96.50, 97.09, 96.23, 96.54],
43
['2004-02-26', 96.27, 97.26, 96.25, 96.79],
44
['2004-02-27', 96.80, 97.38, 96.10, 96.50],
45
['2004-03-01', 96.50, 97.25, 96.15, 97.04],
46
['2004-03-02', 97.60, 97.60, 96.62, 96.82],
47
['2004-03-03', 96.57, 96.89, 95.60, 96.84],
48
['2004-03-04', 96.58, 96.92, 96.13, 96.39],
49
['2004-03-05', 95.95, 96.98, 95.56, 96.45],
50
['2004-03-08', 96.49, 96.88, 94.59, 94.59],
51
['2004-03-09', 94.30, 95.28, 93.77, 94.53],
52
['2004-03-10', 94.38, 94.74, 92.68, 93.06],
53
['2004-03-11', 92.00, 92.98, 91.15, 91.21],
54
['2004-03-12', 92.00, 93.38, 91.68, 93.30],
55
['2004-03-15', 92.60, 92.69, 90.88, 91.82],
56
['2004-03-16', 92.40, 92.70, 91.42, 92.45],
57
['2004-03-17', 92.57, 93.79, 92.45, 93.39],
58
['2004-03-18', 93.05, 93.18, 91.90, 92.85],
59
['2004-03-19', 92.86, 92.97, 91.51, 91.62],
60
['2004-03-22', 91.27, 91.48, 90.28, 91.02],
61
['2004-03-23', 91.60, 92.16, 90.68, 91.32],
62
['2004-03-24', 91.57, 92.49, 91.04, 91.77],
63
['2004-03-25', 92.15, 92.63, 91.45, 92.39],
64
['2004-03-26', 92.39, 93.25, 92.16, 92.77],
65
['2004-03-29', 92.99, 93.61, 92.18, 92.68],
66
['2004-03-30', 92.67, 92.67, 91.35, 92.32],
67
['2004-03-31', 92.07, 92.24, 91.51, 91.84]
68
]);
69
70
// map the data
71
mapping = table.mapAs();
72
mapping.addField('open', 1);
73
mapping.addField('high', 2);
74
mapping.addField('low', 3);
75
mapping.addField('close', 4);
76
77
// chart type
78
var chart = anychart.stock();
79
80
// set the series
81
var series = chart.plot(0).candlestick(mapping);
82
series.name("ACME Corp. stock prices");
83
84
chart.title('Stock Candlestick Demo: ACME Corp. Stock prices \n(Array data notation)');
85
chart.container('container');
86
87
chart.draw();
88
});