html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

// The data used in this sample can be obtained from the CDN

// https://cdn.anychart.com/csv-data/csco-daily.js

var dataTable = anychart.data.table();

dataTable.addData(get_csco_daily_data());

​

var mapping = dataTable.mapAs({

    'open': 1,

    'high': 2,

    'low': 3,

    'close': 4,

    'value': {column: 4, type: 'close'}

});

​

var chart = anychart.stock();

​

// Create computer.

var computer = dataTable.createComputer(mapping);

​

// Set init context using preset bbands context.

computer.setContext(anychart.math.bbands.initContext(30, 5));

​

// Set start function using preset bbands start function.

computer.setStartFunction(anychart.math.bbands.startFunction);

​

// Set calculation function using preset bbands calculation function.

computer.setCalculationFunction(anychart.math.bbands.calculationFunction);

​

// Define output fields

computer.addOutputField('upperResult');

computer.addOutputField('lowerResult');

​

// Add a range spline series using the data from the computer

bbandsSeries = chart.plot().rangeSplineArea(dataTable, {high: computer.getFieldIndex('upperResult'), low: computer.getFieldIndex('lowerResult')});

​

// Set name and visual effects

bbandsSeries.name("BBands");

bbandsSeries.fill({color: "Gray", opacity: 0.1});

bbandsSeries.highStroke("Red 0.5", 2, "2 2");

bbandsSeries.lowStroke("Blue 0.5", 2, "2 2");

​

// add OHLC series

ohlcSeries = chart.plot().ohlc(mapping);

ohlcSeries.name("ACME");

​

chart.container("container");

chart.draw();

});