Filtered Data in Column Chart - CanvasJS JavaScript Charts

Filtered Data in Column Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://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+=100){
	dataPoints.push(dps[i]);
}

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  rangeChanging: dataFilter,
  title: {
    text: "Filtered Data in Column Chart"
  },
  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 += 4) {
          updatedDPS.push(dps[i])
      }
    }
		else if (range <= 20000){
      for (var i = 0; i < dps.length; i += 8) {
          updatedDPS.push(dps[i])
      }
    }
    else if (range <= 50000){
      for (var i = 0; i < dps.length; i += 20) {
          updatedDPS.push(dps[i])
      }
    }
    else{
      for (var i = 0; i < dps.length; i += 100) {
          updatedDPS.push(dps[i])
      }
    }
  	chart.options.data[0].dataPoints = updatedDPS;
    updateViewByLen(chart);
	}
}

function updateViewByLen(chart) {
  var viewportMinimum = chart.axisX[0].get("viewportMinimum");
  var viewportMaximum = chart.axisX[0].get("viewportMaximum");
  
  var countMal = 0;
  var malwareLength = chart.options.data[0].dataPoints.length;
    for(var i = 0; i < chart.options.data[0].dataPoints.length; i++){
        if(chart.options.data[0].dataPoints[i].x >= viewportMinimum && chart.options.data[0].dataPoints[i].x <= viewportMaximum){
          countMal = countMal + 1;
        }
    }   
	  console.log("countMal: " + countMal);
}

function dataGenerator(startX, limit) {
  var y = 0;
  var points = [];
  for (var i = 0; i < limit; i++) {
    y +=...