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
// create data table on loaded data
5
var dataTable = anychart.data.table();
6
dataTable.addData(get_csco_daily_data());
7
8
var mapping = dataTable.mapAs({
9
'open': 1,
10
'high': 2,
11
'low': 3,
12
'close': 4,
13
'value': {column: 4, type: 'close'}
14
});
15
16
var indicatorMapping = dataTable.mapAs({
17
'value': 4
18
});
19
20
// create stock chart
21
var chart = anychart.stock();
22
23
// create plot on the chart
24
var plotSeries = chart.plot(0);
25
var plotIndicator = chart.plot(1);
26
27
// create line series
28
plotSeries.ohlc(mapping).name('CSCO');
29
30
// create BBands indicators
31
plotIndicator.bbandsB(indicatorMapping);
32
33
// get indicator data
34
var selectable = mapping.createSelectable();
35
// select the whole range
36
selectable.select();
37
38
var indicatorArr = [];
39
40
// get iterator
41
var iterator = selectable.getIterator();
42
// advance iterator to the next position
43
while (iterator.advance()) {
44
var timestamp = selectable.search(iterator.getKey(), "exact-or-next");
45
// add SMA values and dates into array
46
if (!isNaN(timestamp.getColumn(-1))) {
47
indicatorArr.push({ x:iterator.getKey(), value: timestamp.getColumn(-1)});
48
}
49
}
50
//show the indicator data
51
console.log(indicatorArr)
52
53
// create scroller series with mapped data
54
chart.scroller().line(mapping);
55
56
// set container id for the chart
57
chart.container('container');
58
59
// initiate chart drawing
60
chart.draw();
61
});