Axis zoom end event

This demo shows how we can use value change events of the start and end axis settings, as well as use debouncing techniques on the handlers to detect when the zoom animation has finished.

Code

let startEndChangeTimeout;

xAxis.on("start", handleStartEndChange);
xAxis.on("end", handleStartEndChange);

function handleStartEndChange() {
  if (startEndChangeTimeout) {
    clearTimeout(startEndChangeTimeout);
  }
  startEndChangeTimeout = setTimeout(function() {
    zoomEnded();
  }, 50);
}

function zoomEnded() {
  console.log("Start", xAxis.getPrivate("selectionMin"), new Date(xAxis.getPrivate("selectionMin")));
  console.log("End", xAxis.getPrivate("selectionMax"), new Date(xAxis.getPrivate("selectionMax")));
}
var startEndChangeTimeout;

xAxis.on("start", handleStartEndChange);
xAxis.on("end", handleStartEndChange);

function handleStartEndChange() {
  if (startEndChangeTimeout) {
    clearTimeout(startEndChangeTimeout);
  }
  startEndChangeTimeout = setTimeout(function() {
    zoomEnded();
  }, 50);
}

function zoomEnded() {
  console.log("Start", xAxis.getPrivate("selectionMin"), new Date(xAxis.getPrivate("selectionMin")));
  console.log("End", xAxis.getPrivate("selectionMax"), new Date(xAxis.getPrivate("selectionMax")));
}

Demo

See the Pen
Line Graph
by amCharts team (@amcharts)
on CodePen.0

Posted in Uncategorized