Custom Interval depending on zoom level - CanvasJS HTML5 JavaScript Charts

Custom Interval depending on zoom level - CanvasJS HTML5 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 interval = 10;
var chart = new CanvasJS.Chart("chartContainer",
    {
    	zoomEnabled: true,
      axisX:{
      	interval: interval,
      },
     	rangeChanging: customInterval,
        title: {
            text: "Custom Interval depending on zoom level"               
        },
        
      data: [{ 
        		type: "line" ,
                dataPoints : dataGenerator(100)
          }]
});
chart.render();


function customInterval(e) {
	var viewport = e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum;
  var dpsCount = 0;
  for(var i=0;i<e.chart.data[0].dataPoints.length;i++){
  	if(e.chart.data[0].dataPoints[i].x <= e.axisX[0].viewportMaximum && e.chart.data[0].dataPoints[i].x >= e.axisX[0].viewportMinimum){
    	dpsCount++;
    }
  }
  var newInterval = Math.max(1,Math.round(viewport/dpsCount));
	if(!e.chart.options.axisX)
		e.chart.options.axisX = {};

	if(e.trigger === "reset") {
  	e.chart.options.axisX.interval  = interval;
  }
  else  if(e.trigger === "zoom") {
  	e.chart.options.axisX.interval  = newInterval;
  }
        
  }

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