ZoomCharts Documentation

Events

Network Chart provides a set of events for your application to use.

• onClick(event) - function to be called on click.
• onRightClick(event) - function to be called on right click or long press.
• onDoubleClick(event) - function to be called on double click.
• onSelectionChange(event) - function to be called after user has selected or deselected some data.
• onHoverChange(event) - function to be called when object under mouse pointer changes.
• onPositionChange(event) - function to be called when objects have been repositioned on screen.
• onError(event) - function to be called when a (data) error occurs.
• onChartUpdate(event) - Function called when whenever current view has changed. Usually after panning and navigation. Use to update any linked views. Note that this is also fired after chart initialization and API methods. Use args.origin field to determine event's origin.
• onPointerDown(event) - Function called on pointer down.
• onPointerDrag(event) - Function called when pointer drag has happened.
• onPointerMovea(event) - Function called when mouse pointer is moved.
• onPointerUp(event) - Function called on pointer up.
• onSettingsChange(event) - Function called when settings are changed.
• onTripleClick(event) - Function called when user triple clicks on chart. Use it for custom function call.

Specifying event handlers

The event handlers can be specified using settings or added dynamically.

Using settings:

    new NetworkChart({
      ...
      events:{
        onClick: function(event){...},
        onSelectionChange: function(event){...}
      },
      ...
    });

Dynamically use chart.on(eventName, handler) and chart.off(eventName,handler) functions. In this case skip the "on" part in event name: onClick becomes click.

Default behavior

To disable default behavior, implement event handler and call event.preventDefault().

• Right click event has default behavior of opening context menu.
• Double click event has default behavior of zooming in on clicked area.

Event properties

Events have the following properties

• chart - the chart object that fired the event.
• clickLink, clickNode - object clicked on - for click events only.
• clientX, clientY - mouse coordinates in web page - for click events only.
• chartX, chartY - mouse coordinates in chart - for click events only.
• ctrlKey, altKey, shiftKey - true or false if the key is pressed.
• origin - event origin, one of '"init", '"api"' or"user"' - for selection change event only.
• nodes - list of visible nodes.
• links - list of visible links.
• selection - list of selected nodes and links.
• hoverLink - link under the cursor or null.
• hoverNode - node under the cursor or null.
• hoverItem - node or link under the cursor or null.

And the following functions

• preventDefault() - prevent default behavior.