CODEWITHSUNDEEP
javascriptamcharts
svarog
svarog

Reputation: 9839

AmCharts, capturing click event for period selector

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

Upvotes: 4

Views: 2159

Answers (2)

martynasma
martynasma

Reputation: 8595

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

I.e.:

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.

Upvotes: 4

SirDemon
SirDemon

Reputation: 1758

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.

Upvotes: 1

Related Questions