Event Listeners

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:

Event Description
rowClick Dispatched when mouse click event happened.
rowDblClick Dispatched when mouse double click event happened.
rowMouseMove Dispatched when mouse move event happened.
rowMouseOver Dispatched when mouse over event happened.
rowMouseOut Dispatched when mouse out event happened.
rowMouseDown Dispatched when mouse down event happened.
rowMouseUp Dispatched when mouse up event happened.
rowSelect Dispatched when some row is selected.
rowCollapseExpand Dispatched when an item that contains other items expands or collapses.

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:

Event Field Description
.item It is a Data Item that displays the active row.
.hoveredIndex Contains an index of active row.
.period Contains an active period.
.periodIndex Contains an index of active period.

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

JsFiddle Playground

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

Event Type Default Behaviour
rowMouseUp Makes the row selected.
rowClick Makes the row selected (contains rowMouseUp).
rowDBlclick Collapse/expand items.
rowMouseMove Reports the hovered point state.
rowMouseOver Makes the row hovered.
rowMouseOut Unhovers the row.

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

JsFiddle Playground

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.