AnyChart sample

HTML

<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<script src="http://cdn.anychart.com/csv-data/dji-daily-short.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" /><div id="container"></div>

CSS

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

JavaScript

anychart.onDocumentReady(function() {
    var dataTable = anychart.data.table();
    dataTable.addData(get_dji_daily_short_data());

    var mapping = dataTable.mapAs({value: 1});

    chart = anychart.stock();
    chart.padding(10, 10, 10, 50);

    var currentPlot = chart.plot();
    currentPlot.line(mapping);

    chart.title("Set select range using type");
    chart.container("container");
    chart.draw();

    // Set values for selected range.
    chart.selectRange("MTD");
});