Custom valueFormatter depending on zoom level - CanvasJS HTML5 JavaScript Charts

Custom valueFormatter 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 chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  rangeChanging: customValueFormatter,
  title: {
    text: "Custom valueFormatter depending on zoom level"               
  },

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


function customValueFormatter(e) {
  var hours=1000*60*60;
  if(!e.chart.options.axisX)
    e.chart.options.axisX = {};

  if(e.trigger === "reset") {
    e.chart.options.axisX.valueFormatString  = null;
  }
  else if(e.trigger === "zoom") {
    //Hour (Comparing Hours)
    if((((e.axisX.viewportMaximum -  e.axisX.viewportMinimum)/(hours))<1)) {
      e.chart.options.axisX.valueFormatString = null;
    }
    //Day (Comparing Days)
    else if(((e.axisX.viewportMaximum -  e.axisX.viewportMinimum)/(hours*24))<7) {
      e.chart.options.axisX.valueFormatString = "HH:mm";
    }         
    //Year (Comparing Years)
    else if(((e.axisX.viewportMaximum -  e.axisX.viewportMinimum)/(hours*24*30*30))< 12) {
      e.chart.options.axisX.valueFormatString = "D-MMM-YYYY";
    }
    else{
      e.chart.options.axisX.valueFormatString = null;
    }
  }
}

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;
}