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
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/csv-data/csco-daily.js
4
5
// create data table on loaded data
6
var dataTable = anychart.data.table();
7
dataTable.addData(get_csco_daily_data());
8
9
// map loaded data for the ohlc series
10
var mapping = dataTable.mapAs();
11
mapping.addField('open', 1, 'first');
12
mapping.addField('high', 2, 'max');
13
mapping.addField('low', 3, 'min');
14
mapping.addField('close', 4, 'last');
15
mapping.addField('value', 4, 'close');
16
17
// create stock chart
18
var chart = anychart.stock();
19
20
// create the first plot on the chart
21
var plot_0 = chart.plot(0);
22
23
// create ohlc series
24
var ohlcSeries = plot_0.ohlc(mapping);
25
ohlcSeries.name('CSCO');
26
27
// create the second plot on the chart
28
var plot_1 = chart.plot(1);
29
plot_1.height('30%');
30
31
// create Aroon indicator with period 25
32
var aroon25 = plot_1.aroon(mapping, 25);
33
34
// create scroller series with mapped data
35
chart.scroller().line(mapping);
36
37
// set container id for the chart
38
chart.container('container');
39
40
// initiate chart drawing
41
chart.draw();
42
});