html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  background: white;

}

anychart.onDocumentReady(function () {

  anychart.format.locales.default.numberLocale.decimalsCount = 2;

  anychart.format.locales.default.numberLocale.zeroFillDecimals = true;

​

  // create data table on loaded data

  var dataTable = anychart.data.table();

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

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

  dataTable.addData(get_csco_daily_data());

​

  // map loaded data for the candlestick series

  var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});

​

  // create stock chart

  chart = anychart.stock();

​

  var grouping = chart.grouping();

  // set maximum visible points count.

  grouping.maxVisiblePoints(250);

​

  // create first plot on the chart

  var plot = chart.plot(0);

​

  plot.yScale().maximumGap(0);

  plot.yScale().minimumGap(0);

​

  // move Y axis to the right

  plot.yAxis().orientation("right");

​

  var candleSeries = plot.candlestick(mapping);

​

  // create scroller series with mapped data

  chart.scroller().line(dataTable.mapAs({'value': 4}));

​

  // create computer

  var computer = dataTable.createComputer(mapping);

  // set computer output field

  computer.addOutputField('pp', 'pivot');

  computer.addOutputField('sup1', 'support1');

  computer.addOutputField('sup2', 'support2');

  computer.addOutputField('sup3', 'support3');

  computer.addOutputField('res1', 'resistance1');

  computer.addOutputField('res2', 'resistance2');

  computer.addOutputField('res3', 'resistance3');

​

  //initiate variables

  var maxArr = [];

  var minArr = [];

  var max = 0;

  var min = 0;

  var closeValue = 0;

  var pp = null;

  var support1 = null;

  var support2 = null;

  var support3 = null;

  var resistance1 = null;

  var resistance2 = null;

  var resistance3 = null;

  var counter = 0;

​

  computer.setStartFunction(function() {

    closeValue = 0;

    pp = null;

    support1 = null;

    support2 = null;

    support3 = null;

    resistance1 = null;

    resistance2 = null;

    resistance3 = null;

    counter = 0;

    //reset min and max arrays

    maxArr = [];

    minArr = [];

  });

​

  // set calculation function to produce custom indicator math

  computer.setCalculationFunction(function (row) {

    //collect high and low during the period

    maxArr.push(row.get('high'));

    minArr.push(row.get('low'));

    //if the end of the period (period = 30 candlesticks here)

    if (counter > 29) {

      //get close value

      closeValue = row.get('close');

      //get highest high and lowest low

      max = Math.max.apply(null, maxArr);

      min = Math.min.apply(null, minArr);

      //calculate pivot point

      pp = (max + min + closeValue) / 3;

      //calculate support1

      support1 = pp * 2 - max;

      //calculate resistance1

      resistance1 = pp * 2 - min;

      //calculate support2

      support2 = pp - (max - min);

      //calculate resistance2

      resistance2 = pp + (max - min);

      //calculate support3

      support3 = min - 2 * (max - pp);

      //calculate resistance3

      resistance3 = max + 2 * (pp - min);

      //reset candlesticks counter

      counter = 0;

      //reset min and max arrays

      maxArr = [];

      minArr = [];

    }

    //set calculated data

    row.set('pp', pp);

    row.set('sup1', support1);

    row.set('sup2', support2);

    row.set('sup3', support3);

    row.set('res1', resistance1);

    row.set('res2', resistance2);

    row.set('res3', resistance3);

    counter++;

  });

​

  // map computed column as value

  var pivotMapping = dataTable.mapAs({'value': 'pivot'});

  var support1Mapping = dataTable.mapAs({'value': 'support1'});

  var support2Mapping = dataTable.mapAs({'value': 'support2'});

  var support3Mapping = dataTable.mapAs({'value': 'support3'});

  var resistance1Mapping = dataTable.mapAs({'value': 'resistance1'});

  var resistance2Mapping = dataTable.mapAs({'value': 'resistance2'});

  var resistance3Mapping = dataTable.mapAs({'value': 'resistance3'});

​

  // create line series with mapping

  var pivotLine = plot.line(pivotMapping);

  pivotLine.name('Pivot');

  pivotLine.stroke('#ffaaff 1');

​

  var support1Line = plot.line(support1Mapping);

  support1Line.name('Support1');

  support1Line.stroke('#ffa000 1');

​

  var support2Line = plot.line(support2Mapping);

  support2Line.name('Support2');

  support2Line.stroke('#DF8577 1');

​

  var support3Line = plot.line(support3Mapping);

  support3Line.name('Support3');

  support3Line.stroke('#B75774 1');

​

  var resistance1Line = plot.line(resistance1Mapping);

  resistance1Line.name('Resistance1');

  resistance1Line.stroke('#98ccdd 1');

​

  var resistance2Line = plot.line(resistance2Mapping);

  resistance2Line.name('Resistance2');

  resistance2Line.stroke('#69A3C3 1');

​

  var resistance3Line = plot.line(resistance3Mapping);

  resistance3Line.name('Resistance3');

  resistance3Line.stroke('#1F72B2 1');

​

  // set title width for the chart

  var title = chart.plot(0).legend().title();

  title.width(100);

​

  // set legend for the chart

  var legend = plot.legend();

  legend.enabled(true);

​

  // set maximum height

  legend.maxHeight("17%");

  legend.itemsSpacing(2);

  // legend mode and position

  legend.itemsLayout("vertical-expandable");

  legend.position("top");

  // paginator position

  legend.paginator().orientation("bottom");

​

  // get chart margin.

  var margin = chart.margin(); 

  margin.right(30);

  margin.left(-30);

​

  chart.container('container').draw();

  chart.selectRange("year", 4, "last-date", true);

});

​