html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

    anychart.onDocumentReady(function () {

​

        //number of additional empty points

        var gapLength = 30;

​

        // 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 ohlc series

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

​

        // create stock chart

        chart = anychart.stock();

​

        chart.plot(0).ohlc(mapping);

​

        // set container id for the chart

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

​

​

        //format tooltips to show 'NO DATA' on empty points

        //instead of NaN for every field

        var tooltips = chart.tooltip();

        tooltips.format(function() {

            if (this.close) {

                return this.seriesName + '\n' +

                    'Open: ' + this.open + '\n' +

                    'High: ' + this.high + '\n' +

                    'Low: ' + this.low + '\n' +

                    'Close: ' + this.close;

            } else {

                return 'no data';

            }

        });

​

        //get maximum X-coordinate and interval unit

            var currrInterval = chart.grouping().getCurrentDataInterval();

            var currentMax = chart.xScale().getFullMaximum();

            addGap(currentMax, currrInterval);

​

        //helper to make a gap

        function addGap(currentMax, currrInterval) {

            var interval = 0;

​

            //define interval length according to 

            //the grouping level in milliseconds

            switch (currrInterval.unit) {

                case 'month':

                    interval = 1000 * 60 * 60 * 24 *30;

                    break;

                case 'day':

                    interval = 1000 * 60 * 60 * 24;

                    break;

                case 'hour':

                    interval = 1000 * 60 * 60;

                    break;

                case 'minute':

                    interval = 1000 * 60;

                    break;

                case 'quarter':

                    interval = 1000 * 60 * 60 * 24 *30 * 3;

                    break;

                case 'second':

                    interval = 1000;

                    break;

                case 'semester':

                    interval = 1000 * 60 * 60 * 24 *30 * 6;

                    break;

                case 'third-of-month':

                    interval = 1000 * 60 * 60 * 24 * 10;

                    break;

                case 'week':

                    interval = 1000 * 60 * 60 * 24 * 7;

                    break;

                case 'year':

                    interval = 1000 * 60 * 60 * 24 *30 * 12;

                    break;

            }

​

            //add predefined number of empty points

            //to the end of dataTable

            for (var i = 0; i< gapLength; i++) {

                dataTable.addData([[currentMax + interval * currrInterval.count * i, null, null, null, null, null]]);

            }

        }

​

    });