html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data that have been used for this sample can be taken from the CDN

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

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

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

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

​

  // create data tables on loaded data

  var msftDataTable = anychart.data.table();

  msftDataTable.addData(get_msft_daily_short_data()); // eslint-disable-line no-undef

​

  var orclDataTable = anychart.data.table();

  orclDataTable.addData(get_orcl_daily_short_data()); // eslint-disable-line no-undef

​

  var cscoDataTable = anychart.data.table();

  cscoDataTable.addData(get_csco_daily_short_data()); // eslint-disable-line no-undef

​

  var ibmDataTable = anychart.data.table();

  ibmDataTable.addData(get_ibm_daily_short_data()); // eslint-disable-line no-undef

​

  // create stock chart

  var chart = anychart.stock();

​

  // create plot on the chart

  var plotFirst = chart.plot(0);

​

  // create plot series with mapped data

  var ORCL = plotFirst.line(orclDataTable.mapAs({ value: 4 }));

  ORCL.name('ORCL').stroke('#455a64');

  ORCL.tooltip().format(function () {

    return tooltipFormatter(this, false);

  });

​

  var CSCO = plotFirst.line(cscoDataTable.mapAs({ value: 4 }));

  CSCO.name('CSCO').stroke('#96a6a6');

  CSCO.tooltip().format(function () {

    return tooltipFormatter(this, false);

  });

​

  var MSFT = plotFirst

    .candlestick(

      msftDataTable.mapAs({

        open: 1,

        high: 2,

        low: 3,

        close: 4

      })

    )

    .name('MSFT');

  MSFT.legendItem().iconType('rising-falling');

  MSFT.tooltip().format(function () {

    return tooltipFormatter(this, true);

  });

​

  // create second plot on the chart

  var plotSecond = chart.plot(1);

  plotSecond.height('30%');

​

  // create plot series with mapped data

  var IBM = plotSecond

    .ohlc(

      ibmDataTable.mapAs({

        open: 1,

        high: 2,

        low: 3,

        close: 4

      })

    )

    .name('IBM');

  IBM.legendItem().iconType('rising-falling');

  IBM.tooltip().format(function () {

    return tooltipFormatter(this, true);

  });

​

  // create scroller series with mapped data

  chart.scroller().candlestick(

    msftDataTable.mapAs({

      open: 1,

      high: 2,

      low: 3,

      close: 4

    })

  );

  chart.tooltip().useHtml(true);

​

  // set chart selected date/time range

  chart.selectRange('2006-04-01', '2007-09-28');

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

​

  // create range picker

  var rangePicker = anychart.ui.rangePicker();

  // init range picker

  rangePicker.render(chart);

​

  // create range selector

  var rangeSelector = anychart.ui.rangeSelector();

  // init range selector

  rangeSelector.render(chart);

});

​

function tooltipFormatter(item, isOHLC) {

  if (isOHLC) {

    return (

      '<br/><br><span>' +

      item.seriesName +

      '</span><br/>' +

      '<span style="color: #ccc">Open</span>: ' +

      item.open +

      '<br/><span style="color: #ccc">High</span>: ' +

      item.high +

      '<br/><span style="color: #ccc">Low</span>: ' +

      item.low +

      '<br/><span style="color: #ccc">Close</span>: ' +

      item.close

    );

  }

  if (item.seriesName === 'CSCO') {

    return (

      '<br/><span style="color: #ccc">' +

      item.seriesName +

      '</span>: ' +

      item.value

    );

  }

  return (

    '<span style="color: #ccc">' +

    item.seriesName +

    '</span>: ' +

    item.value

  );

}