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 a stock chart
4
var chart = anychart.stock();
5
6
// create a data table
7
var dataTable = anychart.data.table();
8
9
// add data
10
dataTable.addData([
11
["2004-01-02", 92.86, 93.05, 91.2, 91.55],
12
["2004-01-05", 92, 93.09, 92, 93.05],
13
["2004-01-06", 92.2, 93.19, 92.14, 93.06],
14
["2004-01-07", 93.14, 93.38, 92.47, 92.78],
15
["2004-01-08", 93.21, 93.21, 92.03, 93.04],
16
["2004-01-09", 91.75, 92.35, 91, 91.21],
17
["2004-01-12", 91.21, 92.14, 91.21, 91.55],
18
["2004-01-13", 91.45, 91.51, 89.01, 89.7],
19
["2004-01-14", 89.9, 90.46, 89.75, 90.31],
20
["2004-01-15", 95.07, 95.65, 93.55, 94.02],
21
["2004-01-16", 95, 95.35, 94.71, 95.32]
22
]);
23
24
// map the data
25
var mapping1 = dataTable.mapAs({"open": 1, "high": 2, "low": 3, "close":4});
26
var mapping2 = dataTable.mapAs({"high": 2, "low": 3});
27
var mapping3 = dataTable.mapAs({"value": 4});
28
29
// create an ohlc series
30
var series1 = chart.plot(0).candlestick(mapping1);
31
series1.name("Price");
32
33
// create a range area series
34
var series2 = chart.plot(1).rangeArea(mapping2);
35
series2.name("Range Area");
36
37
// create a line series
38
var series3 = chart.plot(1).line(mapping3);
39
series3.name("Line");
40
41
// set the container id
42
chart.container("container");
43
44
// initiate drawing the chart
45
chart.draw();
46
});