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('x');
5
table.addData([
6
{'x': '2015-04-01', 'o': 18.23, 'h': 19.36, 'l': 18.18, 'c': 19.31},
7
{'x': '2015-04-02', 'o': 19.50, 'h': 19.89, 'l': 19.00, 'c': 19.29},
8
{'x': '2015-04-03', 'o': 19.13, 'h': 19.15, 'l': 18.43, 'c': 18.75},
9
{'x': '2015-04-06', 'o': 18.54, 'h': 18.76, 'l': 18.27, 'c': 18.76},
10
{'x': '2015-04-07', 'o': 18.76, 'h': 19.14, 'l': 18.63, 'c': 18.76},
11
{'x': '2015-04-08', 'o': 18.97, 'h': 19.62, 'l': 18.96, 'c': 19.19},
12
{'x': '2015-04-09', 'o': 19.45, 'h': 19.70, 'l': 19.22, 'c': 19.67},
13
{'x': '2015-04-13', 'o': 19.69, 'h': 19.85, 'l': 19.37, 'c': 19.59},
14
{'x': '2015-04-14', 'o': 19.44, 'h': 19.55, 'l': 19.00, 'c': 19.35},
15
{'x': '2015-04-15', 'o': 19.21, 'h': 19.25, 'l': 18.51, 'c': 18.83},
16
{'x': '2015-04-16', 'o': 19.16, 'h': 19.78, 'l': 18.99, 'c': 19.76},
17
{'x': '2015-04-17', 'o': 19.69, 'h': 19.69, 'l': 19.00, 'c': 19.20},
18
{'x': '2015-04-20', 'o': 18.89, 'h': 18.95, 'l': 18.57, 'c': 18.61},
19
{'x': '2015-04-21', 'o': 18.59, 'h': 19.08, 'l': 18.57, 'c': 18.97},
20
{'x': '2015-04-22', 'o': 18.76, 'h': 19.19, 'l': 18.70, 'c': 18.78},
21
{'x': '2015-04-23', 'o': 18.92, 'h': 18.94, 'l': 18.47, 'c': 18.92},
22
{'x': '2015-04-24', 'o': 19.82, 'h': 21.20, 'l': 19.50, 'c': 20.91},
23
{'x': '2015-04-27', 'o': 20.55, 'h': 20.82, 'l': 20.28, 'c': 20.40},
24
{'x': '2015-04-28', 'o': 20.25, 'h': 20.27, 'l': 19.79, 'c': 19.93},
25
{'x': '2015-04-29', 'o': 20.11, 'h': 20.89, 'l': 20.06, 'c': 20.25},
26
{'x': '2015-04-30', 'o': 20.60, 'h': 21.10, 'l': 20.01, 'c': 20.26},
27
{'x': '2015-05-01', 'o': 20.19, 'h': 20.35, 'l': 19.86, 'c': 20.24},
28
{'x': '2015-05-04', 'o': 20.37, 'h': 20.40, 'l': 19.98, 'c': 20.19},
29
{'x': '2015-05-05', 'o': 20.14, 'h': 20.24, 'l': 19.64, 'c': 19.79},
30
{'x': '2015-05-06', 'o': 20.06, 'h': 20.07, 'l': 19.61, 'c': 19.79},
31
{'x': '2015-05-07', 'o': 19.96, 'h': 19.99, 'l': 19.14, 'c': 19.32},
32
{'x': '2015-05-08', 'o': 19.46, 'h': 19.64, 'l': 19.14, 'c': 19.42},
33
{'x': '2015-05-11', 'o': 19.20, 'h': 19.73, 'l': 19.01, 'c': 19.32},
34
{'x': '2015-05-12', 'o': 19.51, 'h': 20.06, 'l': 19.47, 'c': 19.89},
35
{'x': '2015-05-13', 'o': 19.92, 'h': 20.00, 'l': 19.67, 'c': 19.75},
36
{'x': '2015-05-14', 'o': 19.83, 'h': 20.23, 'l': 19.80, 'c': 20.06}
37
]);
38
39
// map the data
40
mapping = table.mapAs({'open':"o",'high': "h", 'low':"l", 'close':"c"});
41
var chart = anychart.stock();
42
43
// set the series
44
var series = chart.plot(0).ohlc(mapping);
45
series.name("ACME Corp. stock prices");
46
47
chart.title('Stock OHLC Demo: ACME Corp. Stock Prices \n(Object data notation)');
48
chart.container('container');
49
50
chart.draw();
51
});