Custom Date Time Formatter based on User selected range - dynamic label formatting - CanvasJS JavaScript Charts

Custom Date Time Formatter based on User selected range - dynamic label formatting - CanvasJS JavaScript Charts

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 axisXOption = {      
            valueFormatString: "MMM YYYY" ,
            labelAngle: -50
        };
var chart = new CanvasJS.Chart("chartContainer",
    {
    	zoomEnabled: true,
     	rangeChanging: dateTimeFormatter,
        title: {
            text: "Custom Date Time Formatter based on User selected range"               
        },
        axisX: axisXOption,
        axisY: {
          	valueFormatString: "#,###"
      	},

      data: [{ 
        		type: "line" ,
                dataPoints : dataGenerator(new Date("2012,10,1"), 24 * 365)
          }]
});
chart.render();

function dateTimeFormatter(e) {
				var hours=1000*60*60;
        if(e.trigger === "reset") {
        		axisXOption.valueFormatString= null;
        }
        else if(e.trigger === "zoom") {
          //Day (Comparing Hours)
          if((((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours))<24)) {
            axisXOption.valueFormatString= "D - HH:mm";
          }
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24))>=1 && ((e.axisX.viewportMaximum -  e.axisX.viewportMinimum)/(hours*24))<4) {
            axisXOption.valueFormatString= "DD - HH:mm";
          }
          //Week (Comparing Days)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24))<7) {
            axisXOption.valueFormatString= "D MMM";
            axisXOption.interval=hours*24*7;
          }         
          //Month (Comparing Days)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30))<30) {
            axisXOption.valueFormatString= "D MMM YY";
            axisXOption.interval=hours*24*30;
          }
          //Year (Comparing Months)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30*30))<12) {
            axisXOption.valueFormatString= "MMM YY";
            axisXOption.interval=hours*24*30*30;
          }
      }
  }

function...