IntervalType depending on zoom level- CanvasJS

IntervalType depending on zoom level

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 axisXOption = {      
            intervalType:"month",
            labelAngle: -50
        };
        
var chart = new CanvasJS.Chart("chartContainer",
    {
    	zoomEnabled: true,
     	rangeChanging: intervalTypeChanger,
        title: {
            text: "IntervalType  depending on zoom level"               
        },
        axisX: axisXOption,
        
      data: [{ 
        		type: "line" ,
                dataPoints : dataGenerator(new Date("2012,10,1"), 24 * 365)
          }]
});
chart.render();


function intervalTypeChanger(e) {
				var hours=1000*60*60;
        if(e.trigger === "reset") {
        		e.chart.options.axisX.intervalType = null;
        }
        else if(e.trigger === "zoom") {
          //Hour (Comparing Hours)
          if((((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours))<24)) {
            e.chart.options.axisX.intervalType = "hour";
          }
          //Day (Comparing Days)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24))<7) {
            e.chart.options.axisX.intervalType = "day";
          }         
          //Month (Comparing Months)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30))<30) {
            e.chart.options.axisX.intervalType = "month";
          }
          //Year (Comparing Years)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30*30))<12) {
            e.chart.options.axisX.intervalType = "year";
          }
      }
      console.log(e.chart.options.axisX.intervalType)
  }

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