Slider issues

by jcmalek

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var stockChart;
var dataPoints = [];

function rangeChanged(event) {
  var subsetDataPoints = dataPoints.filter((p) => {return p.x >= event.minimum && p.x <= event.maximum});
  stockChart.charts[0].data[0].dataPoints = subsetDataPoints;
  stockChart.render();
}

window.onload = function () {

  stockChart = new CanvasJS.StockChart("chartContainer",{
    title: {
      text:"StockChart with Animation"
    },
    rangeChanged: rangeChanged,
    
    animationEnabled: true, //Change it to false
    
    charts: [{
      axisY: {
        title: "BTC/USD",
        prefix: "$"
      },
      data: [{
        type: "line",
        yValueFormatString: "$#,###.##",
        dataPoints : []
      }]
    }],
    navigator: {
      slider: {
        minimum: new Date(2018, 04, 20),
        maximum: new Date(2018, 05, 01)
      },
      data: [{
        type: "line",
        yValueFormatString: "$#,###.##",
        dataPoints : [
        	{x: new Date(2018, 01, 01), y: 0},
          {x: new Date(2018, 05, 01), y: 0},
        ]
      }]
    }
  });

  $.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {  
    for(var i = 0; i < data.length; i++){
      dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});	
    }	
    stockChart.render();
  });

}