ZoomCharts Documentation

Events

Time 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.
• onHoverChange(event) - function to be called on hover.
• onSelectionChange(event) - function to be called after user has selected or deselected some data.
• onSettingsChange(event) - function to be called after settings has changed using toolbar or updateSettings call.
• onChartUpdate(event) - function to be called after displayed time range has changed.

Specifying event handlers

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

Using settings:

    new TimeChart({
      ...
      events:{
        onClick: function(event){...},
        onChartUpdate: function(event){...}
      },
      ...
    });

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

Default behavior

Click event has default behavior of zooming in on clicked element.

Default behavior can be disabled by calling event.preventDefault() from your event handler function.

Event properties

Events have the following properties

• chart - the chart object.
• timeStart, timeEnd - visible time range in chart.
• displayUnit - time unit of singe value displayed in chart. In format "1 s", "5 m"...
• selectionStart, selectionEnd - current selection or null if no selection.
• clickStart, clickEnd - time range clicked on - for click events only.
• clickSeries - series click was on, or null. Object from settings.series array - for click events only.
• clickMarker - true if the click was performed on a marker.
• clientX, clientY - mouse coordinates - for click events only.
• ctrlKey, altKey, shiftKey - true or false if the key is pressed.
• origin - event origin, one of "init", "api" or "user".
• changes - settings changes for settingsChange event.
• hoverStart, hoverEnd - time range pointer is hovering on.
• hoverSeries - chart series the pointer is hovering on. Object from settings.series array.

And the following functions

• preventDefault() - prevent default behavior.

Event delay

Chart update event is not fired immediately but with a configurable delay. This prevents too frequent application updates when user navigates around.

To disable the delay set events.chartUpdateDelay = 0.