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
['2016-04-01', 43.05, 41.20, 29.36, 28.18],
7
['2016-04-02', 43.09, 42.00, 29.89, 29.00],
8
['2016-04-03', 43.19, 42.14, 29.15, 28.43],
9
['2016-04-06', 43.38, 42.47, 28.76, 28.27],
10
['2016-04-07', 43.21, 42.03, 29.14, 28.63],
11
['2016-04-08', 42.35, 41.00, 29.62, 28.96],
12
['2016-04-09', 42.14, 41.21, 29.70, 29.22],
13
['2016-04-13', 41.51, 39.01, 29.85, 29.37],
14
['2016-04-14', 40.46, 39.75, 29.55, 29.00],
15
['2016-04-15', 45.65, 43.55, 29.25, 28.51],
16
['2016-04-16', 45.35, 44.71, 29.78, 28.99],
17
['2016-04-17', 47.44, 45.73, 29.69, 29.00],
18
['2016-04-20', 48.04, 46.64, 28.95, 28.57],
19
['2016-04-21', 48.16, 47.32, 29.08, 28.57],
20
['2016-04-22', 48.21, 47.10, 29.19, 28.70],
21
['2016-04-23', 49.85, 47.56, 28.94, 28.47],
22
['2016-04-24', 49.67, 48.70, 31.20, 29.50],
23
['2016-04-27', 49.42, 47.28, 30.82, 30.28],
24
['2016-04-28', 48.60, 46.55, 30.27, 29.79],
25
['2016-04-29', 49.33, 47.84, 30.89, 30.06],
26
['2016-04-30', 49.94, 48.50, 31.10, 30.01],
27
['2016-05-01', 50.00, 48.95, 30.35, 29.86],
28
['2016-05-04', 50.43, 49.30, 30.40, 29.98],
29
['2016-05-05', 50.09, 48.26, 30.24, 29.64],
30
['2016-05-06', 49.24, 48.25, 30.07, 29.61],
31
['2016-05-07', 49.44, 48.60, 29.99, 29.14],
32
['2016-05-08', 49.97, 48.41, 29.64, 29.14],
33
['2016-05-11', 50.31, 48.80, 29.73, 29.01],
34
['2016-05-12', 50.60, 49.30, 30.06, 29.47],
35
['2016-05-13', 50.09, 49.08, 30.00, 29.67],
36
['2016-05-14', 42.67, 41.35, 30.23, 29.80],
37
['2016-05-15', 42.24, 41.51, 30.50, 29.98],
38
['2016-05-18', 42.68, 41.62, 30.60, 30.24],
39
['2016-05-19', 44.55, 43.33, 30.74, 30.25],
40
['2016-05-20', 44.37, 43.51, 30.69, 30.22],
41
['2016-05-21', 43.79, 43.02, 30.23, 29.51],
42
['2016-05-22', 43.58, 42.51, 30.17, 29.47],
43
['2016-05-26', 44.39, 42.55, 30.45, 29.45],
44
['2016-05-27', 44.36, 43.40, 30.60, 30.07],
45
['2016-05-28', 44.04, 42.50, 30.63, 30.05],
46
['2016-05-29', 44.09, 43.06, 30.94, 30.30],
47
['2016-06-01', 42.35, 41.04, 31.50, 30.86],
48
['2016-06-02', 42.30, 41.70, 31.98, 31.20],
49
['2016-06-03', 42.48, 40.65, 31.76, 31.29],
50
['2016-06-04', 41.42, 40.69, 31.90, 31.58],
51
['2016-06-05', 41.51, 39.70, 32.31, 31.81],
52
['2016-06-08', 41.61, 40.36, 32.32, 31.63],
53
['2016-06-09', 41.56, 40.35, 32.32, 31.88],
54
['2016-06-10', 41.99, 40.56, 32.62, 32.12],
55
['2016-06-11', 40.98, 40.21, 33.26, 32.57],
56
['2016-06-12', 39.20, 38.01, 33.38, 32.74],
57
['2016-06-15', 38.52, 37.20, 33.54, 33.02],
58
['2016-06-16', 39.74, 38.00, 34.11, 33.44],
59
['2016-06-17', 39.75, 38.51, 33.82, 33.17],
60
['2016-06-18', 39.10, 37.59, 33.69, 33.30],
61
['2016-06-19', 39.40, 37.62, 34.34, 33.75],
62
['2016-06-22', 38.10, 36.37, 33.95, 33.25],
63
['2016-06-23', 38.15, 36.82, 33.66, 33.21],
64
['2016-06-24', 37.25, 35.12, 33.75, 33.36],
65
['2016-06-25', 37.41, 36.26, 33.92, 33.20],
66
['2016-06-26', 37.35, 36.07, 33.69, 33.32],
67
['2016-06-29', 36.03, 35.15, 34.03, 33.55],
68
['2016-06-30', 36.49, 36.00, 34.24, 33.63],
69
['2016-07-01', 38.88, 36.50, 34.30, 33.96],
70
['2016-07-02', 37.95, 37.05, 34.04, 33.21]
71
]);
72
73
// map the data
74
mapping_acme = table.mapAs();
75
mapping_acme.addField('high', 1);
76
mapping_acme.addField('low', 2);
77
78
mapping_globex = table.mapAs();
79
mapping_globex.addField('high', 3);
80
mapping_globex.addField('low', 4);
81
82
// chart type
83
var chart = anychart.stock();
84
85
// set the ACME series
86
var series_acme = chart.plot(0).hilo(mapping_acme);
87
series_acme.name("ACME Corp. stock prices");
88
89
// set the Globex series
90
var series_globex = chart.plot(0).hilo(mapping_globex);
91
series_globex.name("Globex Corp. stock prices");
92
93
chart.title('Stock HiLo Demo: Stock Prices \nACME Corp. vs. Globex Corp.');
94
95
chart.container('container');
96
chart.draw();
97
});