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

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 = {
  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)
    var intervalDifference = e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum;

    if ((intervalDifference / hours) < 24) {
      axisXOption.valueFormatString = "D - HH:mm";
    } else if ((intervalDifference / (hours * 24)) < 4) {
      axisXOption.valueFormatString = "DD - HH:mm";
    }
    //Week (Comparing Days)
    else if ((intervalDifference / (hours * 24)) < 7) {
      axisXOption.valueFormatString = "D MMM YY";
      //axisXOption.interval=hours*24*7;
    }
    //Month (Comparing Days)
    else if ((intervalDifference / (hours * 24 * 30)) < 30) {
      axisXOption.valueFormatString = "MMM D, YYYY";
      //axisXOption.interval=hours*24*30;
    }
    //Year (Comparing Months)
    else if ((intervalDifference / (hours * 24 * 30 * 30)) < 12) {
      axisXOption.valueFormatString = "MMM YYYY";
      //axisXOption.interval=hours*24*30*30;
    }
  }
}

function dataGenerator(startX, limit) {
  var y = 0;
  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 * 60 * 1000)),
      y: y
    });
  }
  return points;
}