Filtering data in Column chart based on zoom level- CanvasJS

Filtering data in Column chart based on zoom level- CanvasJS

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(new Date("2016,01,01"), 60 * 24);
var dataPoints = [];

for(var i = 0; i < dps.length; i += 60){
  dataPoints.push(dps[i]);
}

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "x",
  rangeChanging: updateData,
  title: {
    text: "Filtering data in Column chart"               
  },
  axisX: {
    //interval: 1,
  },
  data: [{ 
    type: "column" ,
    dataPoints : dataPoints
  }]
});
chart.render();


function updateData(e) {
  var hours = 1000 * 60 * 60;
  if(e.trigger === "reset") {
    chart.options.data[0].dataPoints = [];
    for(var i = 0; i < dps.length - 1; i += 60){
      chart.options.data[0].dataPoints.push(dps[i]);
    }
  }

  else if(e.trigger === "zoom") {
    chart.options.data[0].dataPoints = [];
    if( ((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum) / hours) < 1 ) {
      for(var i = 0; i < dps.length; i++){
        chart.options.data[0].dataPoints.push(dps[i]);
      }
    }
    else if( ((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum) / (hours)) < 24 ) {
      for(var i = 0; i < dps.length; i += 10) {
        chart.options.data[0].dataPoints.push(dps[i]);
      }
    }    
  }
}

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

    points.push({
      x: new Date(startX.getTime() + (i * 60 * 1000)),
      y: y
    });
  }
  return points;
}