AmCharts, capturing click event for period selector

Question

I'm using AmCharts 3 and I was wondering is there a way to capture an event for clicking the buttons of the period selector?

The Docs state I can add a listener to the period selector of the type 'changed' but then the event runs almost anytime

There is a listener for 'zoomed', but it runs every time I zoom my chart regardless if I clicked the period selector

Here's my attempt:

chart = AmCharts.makeChart(scope.vm.chartId, chartSettings);
    AmCharts.addInitHandler(function () {
    // add events to item
    _.each(chart.panels, function (item) {
    //item.addListener("zoomed", onZoomed);
    item.addListener("changed", function(e) {
    console.debug("changed " + e.periodString);
   });
 });
});

Answer 1

You can use period selector's changed event for that.

Ie:

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "stock",

  // ...

  "periodSelector": {
    "position": "left",
    "periods": [ {
      "period": "MM",
      "selected": true,
      "count": 1,
      "label": "1 month"
    }, {
      "period": "YYYY",
      "count": 1,
      "label": "1 year"
    }, {
      "period": "YTD",
      "label": "YTD"
    }, {
      "period": "MAX",
      "label": "MAX"
    } ],
    "listeners": [ {
      "event": "changed",
      "method": function( event ) {
        if ( event.predefinedPeriod !== undefined ) {
          console.log( event.predefinedPeriod, event.count );
        }
      }
    } ]
  },

  // ...
} );

Please note that this event will be executed when changing dates using date input fields as well, hence the check if event.predefinedPeriod is defined.

Please also keep in mind that default period is selected on chart init as well. So this event will be triggered when the chart is first loaded without any user interaction.

Here's a working demo .

Answer 2

Since you are initiating through a configuration object, I suggest you use the new 'listeners' property supported in the latest version of AmCharts to add an event handler to the periodSelector object on your chartSettings object. It should work.