Event Listeners

• Overview
• Event Types
• Default Events
• Prevent Defaults

Overview

AnyChart charting library supports the possibility to handle Gantt Chart events. In this tutorial we will list all available events, explain when they are dispatched and what data is available in them. There is also some useful information about how to create an event handler and how to use the data coming from AnyGantt.

First, you need to create a listener to handle the specific event. In general Event Listeners Article you can find more information about creating these JavaScript functions.

Event Types

It is important to keep in mind that JavaScript Resource Gantt Chart and JavaScript Project Gantt Chart are almost identical in terms of data hierarchy.

So the information presented below applies to both chart types, except some details. These are events available for Gantt Chart:

All events return all available data about an active row.

To listen an event use the code below:

//choose an event type from table above:
chart.listen(anychart.enums.EventType.ROW_CLICK, function(event) {
    var msg = event['item'].get('name');
    if (event['period']) msg += '\nPeriod: ' + event['period']['id'];
    return msg;
});

As you can see from the code above, it is possible to get any information about the item from the event - it contains some useful fields. Here is a list of supported types of information:

This sample with Project Gantt Chart demonstrates the usage of this feature. Click on a row to change the Chart title:

Default Events

When you click on a row or move the mouse over the row, there are some default actions take place.

Events are dispatched in the following order on every click:

1. rowMouseDown
2. rowMouseUp
3. rowClick (which is the same as rowMouseDown + rowMouseUp)
4. rowSelect

Prevent Defaults

To prevent these events dispatching you can use the special method .preventDefault().

event.preventDefault();

In this case these events won't be reported by the chart. Let's disable the default behaviour for the clicks. The sample below illustrates this idea.

chart.listen(anychart.enums.EventType.ROW_CLICK, function(e) {
    e.preventDefault();
});