Only trigger pan-end event with amCharts

Question

I am using amCharts and build a amSerialChart. Here I want to trigger the 'pan' event. However I just want to trigger the final event, so that means when the pan ended. As far as I can read the manual (https://docs.amcharts.com/3/javascriptcharts/ChartCursor) there is no explicit event for this. However maybe someone knows how to build this event or just get the last 'panning' event?

Answer 1

There is no dedicated event for that. However, you can implement the functionality by using JavaScript generic mouseup/touchend events to catch when the pan ends. I.e.:

  "listeners": [{
    /**
     * rendered event
     * we'll use it to set up custom mouse events as well as
     * pre-zoom the chart
     */
    "event": "rendered",
    "method": function(e) {

      // add mouseup events
      e.chart.chartDiv.addEventListener("mouseup", handleEnd);
      e.chart.chartDiv.addEventListener("touchend", handleEnd);

      // function that handles pan end (mouse button released or touch ends)
      function handleEnd() {

        // check if there was an previous zoom event
        if (e.chart.lastZoomedEvent === undefined)
          return;

        // do what we need to do with it
        // ...
        console.log(e.chart.lastZoomedEvent);

        // reset 
        e.chart.lastZoomedEvent = undefined;
      }

      // pre-zoom the chart
      e.chart.zoomToIndexes(
        e.chart.dataProvider.length - 40,
        e.chart.dataProvider.length - 1);
    }
  }, {
    /**
     * zoomed event
     * we'll use it to track pan/zoom
     */
    "event": "zoomed",
    "method": function(e) {
      // log last zoomed event
      e.chart.lastZoomedEvent = e;
    }
  }]

Here's a working demo.