Still have questions?
Contact support

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:

EventDescription
rowClickDispatched when mouse click event happened.
rowDblClickDispatched when mouse double click event happened.
rowMouseMoveDispatched when mouse move event happened.
rowMouseOverDispatched when mouse over event happened.
rowMouseOutDispatched when mouse out event happened.
rowMouseDownDispatched when mouse down event happened.
rowMouseUpDispatched when mouse up event happened.
rowSelectDispatched when some row is selected.
rowCollapseExpandDispatched 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 FieldDescription
.itemIt is a Data Item that displays the active row.
.hoveredIndexContains an index of active row.
.periodContains an active period.
.periodIndexContains 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 TypeDefault Behaviour
rowMouseUpMakes the row selected.
rowClickMakes the row selected (contains rowMouseUp).
rowDBlclickCollapse/expand items.
rowMouseMoveReports the hovered point state.
rowMouseOverMakes the row hovered.
rowMouseOutUnhovers 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