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 data table
4
var table = anychart.data.table('x');
5
// add data
6
table.addData([
7
{'x':'2015-12-24', 'open': 511.53, 'high': 514.98, 'low': 505.79, 'close': 506.40},
8
{'x':'2015-12-25', 'open': 512.53, 'high': 514.88, 'low': 505.69, 'close': 510.34},
9
{'x':'2015-12-26', 'open': 511.83, 'high': 514.98, 'low': 505.59, 'close': 507.23},
10
{'x':'2015-12-27', 'open': 511.22, 'high': 515.30, 'low': 505.49, 'close': 506.47},
11
{'x':'2015-12-28', 'open': 511.53, 'high': 514.98, 'low': 505.79, 'close': 506.40},
12
{'x':'2015-12-29', 'open': 512.53, 'high': 513.88, 'low': 505.69, 'close': 510.34},
13
{'x':'2015-12-30', 'open': 511.83, 'high': 512.98, 'low': 502.59, 'close': 503.23},
14
{'x':'2015-12-31', 'open': 511.22, 'high': 515.30, 'low': 505.49, 'close': 506.47},
15
{'x':'2016-01-01', 'open': 510.35, 'high': 515.72, 'low': 505.23, 'close': 508.80}
16
]);
17
18
// create a stock chart
19
var chart = anychart.stock();
20
21
// create a mapping
22
var mapping = table.mapAs({'open':'open', 'high': 'high', 'low': 'low', 'close': 'close'});
23
24
// add a series using the mapping
25
chart.plot(0).ohlc(mapping).name('ACME Corp.');
26
27
// set container id for the chart
28
chart.container('container');
29
30
// initiate chart drawing
31
chart.draw();
32
});