Filtered Data in Column Chart based on Zoomed Range- CanvasJS JavaScript Charts

Filtered Data in Column Chart based on Zoomed Range- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = dataGenerator(100, 100000);
var dataPoints = [];
var tempDPS = [];
for(var i = 0; i < dps.length; i+=1000){
	dataPoints.push(dps[i]);
  }

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  rangeChanging: dataFilter,
  title: {
    text: "Filtering data based on Zoomed Range"
  },
  subtitles: [{
  	text: "Zoom to show more dataPoints within the Range"
  }],
  data: [{
    type: "column",
    dataPoints: dataPoints
  }]
});
chart.render();

function dataFilter(e) {
  if (e.trigger === "reset") {
    chart.options.data[0].dataPoints = dataPoints;
  } 
  
  else if (e.trigger === "zoom") {
    updatedDPS = [];
    var range = Math.round(e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum);
    	
		if(range <= 250){
   		for (var i = 0; i < dps.length; i += 1) {
      	updatedDPS.push(dps[i])
      }
   	}
    else if (range <= 10000){
      for (var i =0; i < dps.length; i += 50) {
          updatedDPS.push(dps[i])
      }
    }
		else if (range <= 20000){
      for (var i = 0; i < dps.length; i += 100) {
          updatedDPS.push(dps[i])
      }
    }
    else if (range <= 50000){
      for (var i = 0; i < dps.length; i += 200) {
          updatedDPS.push(dps[i])
      }
    }
    else{
      for (var i = 0; i < dps.length; i += 500) {
          updatedDPS.push(dps[i])
      }
    }
  	chart.options.data[0].dataPoints = updatedDPS;
	}
}

function dataGenerator(startX, limit) {
  var y = 0;
  var points = [];
  for (var i = 0; i < limit; i++) {
    y += (Math.round(Math.random() * 10 - 5));
    points.push({
      x: i,
      y: y
    });
  }
  return points;
}