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 = chart.plot(0);
22
23
// create ohlc series
24
var ohlcSeries = plot.ohlc(mapping);
25
ohlcSeries.name('CSCO');
26
27
// create the second plot on the chart
28
var secondPlot = chart.plot(1);
29
secondPlot.height('30%');
30
31
// create ROC indicator with period 14
32
var roc = secondPlot.roc(mapping, 14).series();
33
roc.stroke('#64b5f6');
34
35
// create scroller series with mapped data
36
chart.scroller().line(mapping);
37
38
// set container id for the chart
39
chart.container('container');
40
41
// initiate chart drawing
42
chart.draw();
43
});