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
// create scroller series with mapped data
34
chart.scroller().line(mapping);
35
36
// get current hovered value
37
plotIndicator.legend().itemsFormat(function() {
38
if (this.seriesName.indexOf('BBands %B') != -1)
39
console.log(this.value);
40
return this.seriesName + ': ' + this.value.toFixed(3);
41
});
42
43
// set container id for the chart
44
chart.container('container');
45
46
// initiate chart drawing
47
chart.draw();
48
});