AnyChart sample

HTML

<script src="https://static.anychart.com/js/develop/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" /><div id="container"></div>

CSS

html, body, #container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

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/js/latest/data-adapter.min.js

    // Load CSV data and create a chart by CSV data
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples-data/stock-general-features/load-csv-data/data.csv
    anychart.data.loadCsvFile('https://cdn.anychart.com/samples-data/stock-general-features/load-csv-data/data.csv', function (data) {
        // create stock chart
        chart = anychart.stock();

        // create data tables on loaded data
        var msftDataTable = anychart.data.table();
        msftDataTable.addData(data);
        mapping = msftDataTable.mapAs({'x': 0, 'value': 1});

        // create plot
        var plot = chart.plot(0);
        // create column series on the first plot
        var column = plot.column(mapping);
        column.name('MSFT');

        // set chart selected date/time range
        chart.selectRange('2004-04-15', '2005-10-27');

        // set container id for the chart
        chart.container('container');
        // initiate chart drawing
        chart.draw();

        // create range picker
        rangePicker = anychart.ui.rangePicker();
        // init range picker
        rangePicker.render(chart);

        // create range selector
        rangeSelector = anychart.ui.rangeSelector();
        // init range selector
        rangeSelector.render(chart);
    });
});