Using events

I guess most of you are familiar with events model, but in case not, I will try to explain it in as simple way as I can.

The chart fires (dispatches) events. Some of them are dispatched without any user interaction, for example, when chart is rendered for the first time, chart fires init event. Other events are fired after some user interaction, for example, when user zooms-in serial chart, it fires zoomed event. If user rolls-over some line chart bullet or column, chart fires rollOverGraphItem event. Some events are fired by chart object, some by other objects, like ChartScrollbar or ChartCursor. All the events which can be fired by the object are listed in the bottom of class class reference. check the events of AmSerialChart to see how this looks.

So as you understand, you can use events for making some interactions or retrieving some information from a chart. For example, you might want to display currently selected date range of serial chart. For this, we must employ zoomed event. To do this, we must add listener:

chart.addListener("zoomed", handleZoom);

handleZoom here is a method, which will be called each time the chart is zoomed. This means we have to add handleZoom method to our JavaScript source:

function handleZoom(event) {
   console.log(event)
}

Now, if you run the chart, and even do not zoom it, you should see the event object in your console, as the chart fires this event even after the first time it is initialized. If you zoom-in or zoom-out or scroll the chart, you should see multiple event objects to be outputted in browsers console.

Adding listener within chart config

If you are creating chart using AmCharts.makeChart(divId, config) method, a much better approach would be adding listeners directly to chart config. This is done using listeners property of a chart or ChartScrollbar or ChartCursor (any object which has events). listeners property accepts array of objects each of them must have event and method properties, like:

"type": "serial",
   "listeners": [{
      "event": "rendered",
      "method": handleRender
      }, {
      "event": "zoomed",
      "method": handleZoom
   }],
   // rest of config

This way is better because you will be sure the listener will be added before chart is build for the first time, as if the page is fully loaded, makeChart can be completed and events like init, rendered and similar fired even before you add listeners using chart.addListener method.

The event Object

The event object passed to your method (handler) is different for each event. This event object is described in class reference. For example, the event object of zoomed event is this:

{endDate:Date, endIndex:Number, endValue:String, startDate:Date, startIndex:Number, startValue:String, chart:AmChart}

I guess all the properties of the event are self-explanatory. These properties are accessed like this: event.startDate. Try to replace console.log(event) with console.log(event.startDate) and you will see that your console now only outputs the start date of the zoomed period (of course, only if your chart is date-based).

To dig deeper, try to analyze this sample. It not only listens for zoom event and updates input fields at the bottom of the chart, but also does the opposite - if the dates in the input fields are changed and user presses Enter or unselects the field, the chart zooms to these new dates .