html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN

  // https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js

​

  // Load XML data and create a chart by XML data

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

  // https://cdn.anychart.com/samples/stock-general-features/load-xml-data/data.xml

  anychart.data.loadXmlFile(

    'https://cdn.anychart.com/samples/stock-general-features/load-xml-data/data.xml',

    function (data) {

      // create stock chart

      var chart = anychart.stock();

​

      // set chart title

      chart.title('Cisco Historical Data');

​

      // create data table on loaded data

      var dataTable = anychart.data.table('x');

      dataTable.addData(data);

​

      // map loaded data for the ohlc series

      var mapping = dataTable.mapAs({

        open: 'open',

        high: 'high',

        low: 'low',

        close: 'close'

      });

​

      // create first plot on the chart

      var plot = chart.plot(0);

      // set grid settings

      plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);

​

      // create OHLC series

      plot.ohlc(mapping).name('CSCO');

​

      // create scroller series with mapped data

      chart.scroller().ohlc(mapping);

​

      // set chart selected date/time range

      chart.selectRange('1992-12-30', '1993-10-27');

​

      // 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);

    }

  );

});