Choose an item

FusionTime Events

Events are signals that let you execute specific actions—such as manipulating the DOM, sending data to the server, and so on—using JavaScript, in response to any interactions/updates for a chart. The FusionTime API offers a wide range of events that you can use to trigger actions for different stages in the life cycle of a chart or when you interact with a chart.

All the concerned events for the time-series chart are listed down below categorised with respect to their action type, component and lifecycle state.

Sort By
Hover
Event Name Description
chartMouseMove

Triggers when the mouse pointer is moved over the chart.

chartRollOver

Triggers every time the mouse pointer is rolled over the chart.

chartRollOut

Triggers every time the mouse pointer is rolled out from the chart.

legendItemRollOver

Triggers when the mouse pointer is rolled over the legend item.

legendItemRollout

Triggers when the mouse pointer is rolled out from the legend item.

dataMarkerRollOver

Triggers when a user hovers over the data marker.

dataMarkerRollOut

Triggers when a user hovers out of the data marker.

timeMarkerRollOver

Triggers when a user hovers over a time instant marker’s box or a time span marker’s rectangular area.

timeMarkerRollOut

Triggers when a user hovers out of a time instant marker’s box or a time span marker’s rectangular area.

referenceLineRollOver

Triggers when a user hovers over the notch of a reference line.

referenceLineRollOut

Triggers when a user hovers out of the notch of a reference line.

referenceZoneRollOver

Triggers when a user hovers over a reference zone’s notches.

referenceZoneRollOut

Triggers when a user hovers out of the reference zone’s notches.

dataPlotRollOver

Triggers when the data plot is hovered upon.

dataPlotRollOut

Triggers when a data plot is hovered out.

Click
Event Name Description
chartClick

Triggers every time the chart is clicked.

legendItemClicked

Triggers when the legend item is clicked.

dataMarkerClick

Triggers when a user clicks on a data marker.

timeMarkerClick

Triggers when a user clicks on a time instant marker’s box or a time span marker’s rectangular area.

referenceLineClick

Triggers when a user clicks on the notch of a reference line.

referenceZoneClick

Triggers when a user clicks on a reference zone’s notches

dataPlotClick

Triggers when the data plot is clicked.

standardRangeSelect

Triggers when a standard period is selected from the Standard Range Selector.

customRangeSelect

Triggers when a valid custom period is applied from the Custom Range Selector

Export
Event Name Description
beforeExport

Triggers just before the exporting process of a chart begins, through the export context menu or when the FusionCharts#exportChart() method is called.

exported

Triggers when the chart exports successfully.

exportCancelled

Triggers when the default behavior of the beforeExport event is cancelled by calling the event.preventDefault() method from the handler of the beforeExport event.

Print
Event Name Description
beforePrint

Triggers before the printing process for a chart begins, after the FusionCharts#print() method is called on the chart.

printComplete

Triggers when the user confirms or cancels printing through the browser's print dialog box.

printCancelled

Triggers when the default behavior of the beforePrint event is cancelled by calling the event.preventDefault() method from the handler for the beforePrint event.

Resize
Event Name Description
beforeResize

Triggers before a chart is resized.

resized

Triggers when the chart is resized.

resizeCancelled

Triggers when event.preventDefault() is called from within the handler of the beforeResize event.

Dispose
Event Name Description
beforeDispose

Triggers before the chart is deleted and cleaned from the memory.

disposed

Triggers when the chart is deleted and cleaned from the DOM and the browser’s memory.

disposeCancelled

Triggers when the beforeDispose event is cancelled.

Zoom/Pan
Event Name Description
selectionChange

Triggers whenever a user performs an action which results in the spread of time changing on the focus canvases

Drag
Event Name Description
timeNavBrushStart

Triggers at the start of the user’s interaction with the time navigator’s window.

timeNavBrush

Triggers on every instance of the window being dragged/squeezed by the user.

timeNavBrushEnd

Triggers at the end of the user’s interaction with the time navigator’s window.

canvasDragStart

Triggers at the start of the user’s drag interaction with a chart canvas.

canvasDrag

Triggers on every instance of the canvas being dragged by the user.

canvasDragEnd

Triggers at the end of the user’s drag interaction with a chart canvas.

Double Click
Event Name Description
canvasDblTap

Triggers after a user’s double tap interaction on a canvas.

Wheel
Event Name Description
canvasWheel

Triggers on every instance of a user’s wheel interaction on a canvas.

beforeRender Lifecycle

This event is fired just before a chart is rendered.

Calling event.preventDefault() from within the handler of this event will cancel the rendering process. The rendering process is triggered when the FusionCharts#render() method is called.

 {
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "beforeRender": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

renderComplete Lifecycle

This event is fired every time a chart is rendered using the FusionCharts#render() method, the FusionCharts#chartType() method, or the FusionCharts#setChartData() method. It is also triggered every time chart data is successfully updated, which triggers a re-render internally.

The difference between this event and the rendered event is that the rendered event is triggered only when the FusionCharts#render() method is called.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "renderComplete": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

renderCancelled Lifecycle

This event is fired when the default behavior of the beforeRender event is cancelled using the event.preventDefault() from within the handler for the beforeRender event.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "renderCancelled": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

rendered Lifecycle

The event is fired when the chart completes drawing, after the FusionCharts#render() or the FusionCharts#chartType() method is called. The chart renders if the data provided is correct; otherwise, an error message is rendered.A call to this event is made only once, even if new data may be supplied later. It can be used to invoke any further JavaScript methods on the chart or to change chart data.

If chart animation is enabled, this event is triggered before the animation process. In case you need to perform any action after the animation has completed, you will need to add an appropriate time delay in this event handler, for example, by using setTimeout.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "rendered": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

noDataToDisplay Lifecycle

The event is fired when no data is passed to the chart. It can be used to show an error message or take a corrective measure.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "noDataToDisplay": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

beforeDataUpdate Lifecycle

This event is fired just before chart data is passed to the chart. It is useful if any operations have to be performed on the data before it is applied to the chart.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "beforeDataUpdate": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

dataUpdateCancelled Lifecycle

This event is fired when the default behavior of the beforeDataUpdate event is cancelled by calling event.preventDefault() from within the handler for beforeDataUpdate.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "dataUpdateCancelled": function(ev) {
     console.log(ev);
   }
 }

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

dataUpdated Lifecycle

The event is fired when chart data is updated and the chart is redrawn, after the drawComplete event.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "dataUpdated": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

chartMouseMove Hover Chart

This event is fired when the mouse pointer is moved over the chart. The event arguments pass useful information related to pointer location, relative to the chart and the page, that can be used for positioning elements like annotations or integrating charts with custom tooltip libraries.

By default, a FusionCharts chart does not trigger this event until is enabled to do so. To enable this event for a chart, set the enableChartMouseMoveEvent attribute to 1.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "chartMouseMove": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

chartRollOver Hover Chart

This event is fired every time the mouse pointer is rolled over the chart.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "chartRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

chartRollOut Hover Chart

This event is fired every time the mouse pointer is rolled out from the chart.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "chartRollOut": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

chartClick Click Chart

This event is fired every time the chart is clicked.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "chartClick": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

chartTypeInvalid Lifecycle

The event is fired when the given chart type is invalid or the chart type is not specified.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "chartTypeInvalid": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

legendItemClicked Click Legend

This event is fired when the legend item is clicked.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "legendItemClicked": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

legendItemRollOver Hover Legend

This event is fired when the mouse pointer is rolled over the legend item.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "legendItemRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

legendItemRollout Hover Legend

This event is fired when the mouse pointer is rolled out from the legend item.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "legendItemRollout": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

beforeExport Export Chart

This event is fired just before the exporting process of a chart begins, through the export context menu or when the FusionCharts#exportChart() method is called.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "beforeExport": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

exported Export Chart

This event is fired when the chart exports successfully.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "exported": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

exportCancelled Export Chart

This event is fired when the default behavior of the beforeExport event is cancelled by calling the event.preventDefault() method from the handler of the beforeExport event.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "exportCancelled": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

beforePrint Print Chart

This event is fired before the printing process for a chart begins, after the FusionCharts#print() method is called on the chart.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "beforePrint": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

printComplete Print Chart

This event is fired when the user confirms or cancels printing through the browser's print dialog box.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "printComplete": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

printCancelled Print Chart

This event is fired when the default behavior of the beforePrint event is cancelled by calling the event.preventDefault() method from the handler for the beforePrint event.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "printCancelled": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

dataMarkerRollOver Hover Data marker

This event is fired when a user hovers over the data marker.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "dataMarkerRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
timestamp number

The UNIX timestamp corresponding to the time where the data marker has been specified to appear.
timeText string

The text representation of the timestamp.
timeFormatter string

The formatter string used to represent the timestamp as the time text.
binStart number

The timestamp corresponding to the start of the bin in which the data marker appears.
binEnd number

The timestamp corresponding to the end of the bin in which the data marker appears.
View all

dataMarkerRollOut Hover Data marker

This event is fired when a user hovers out of the data marker.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "dataMarkerRollOut": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
timestamp number

The UNIX timestamp corresponding to the time where the data marker has been specified to appear.
timeText string

The text representation of the timestamp.
timeFormatter string

The formatter string used to represent the timestamp as the time text.
binStart number

The timestamp corresponding to the start of the bin in which the data marker appears.
binEnd number

The timestamp corresponding to the end of the bin in which the data marker appears.
View all

dataMarkerClick Click Data marker

This event is fired when a user clicks on a data marker.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "dataMarkerClick": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
timestamp number

The UNIX timestamp corresponding to the time where the data marker has been specified to appear.
timeText string

The text representation of the timestamp.
timeFormatter string

The formatter string used to represent the timestamp as the time text.
binStart number

The timestamp corresponding to the start of the bin in which the data marker appears.
binEnd number

The timestamp corresponding to the end of the bin in which the data marker appears.
View all

timeMarkerRollOver Hover Time marker

This event is fired when a user hovers over a time instant marker’s box or a time span marker’s rectangular area.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "timeMarkerRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the time marker.
startText string

A human readable text representation of the start timestamp.
end number

The UNIX timestamp corresponding to the end time of the time marker.
endText string

A human readable text representation of the end timestamp
formatter string

The formatter string used to format the start and end timestamps as startText and endText respectively.
View all

timeMarkerRollOut Hover Time marker

This event is fired when a user hovers out of a time instant marker’s box or a time span marker’s rectangular area.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "timeMarkerRollOut": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the time marker.
startText string

A human readable text representation of the start timestamp.
end number

The UNIX timestamp corresponding to the end time of the time marker.
endText string

A human readable text representation of the end timestamp
formatter string

The formatter string used to format the start and end timestamps as startText and endText respectively.
View all

timeMarkerClick Click Time marker

This event is fired when a user clicks on a time instant marker’s box or a time span marker’s rectangular area.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "timeMarkerClick": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the time marker.
startText string

A human readable text representation of the start timestamp.
end number

The UNIX timestamp corresponding to the end time of the time marker.
endText string

A human readable text representation of the end timestamp
formatter string

The formatter string used to format the start and end timestamps as startText and endText respectively.
View all

referenceLineRollOver Hover Reference line

This event is fired when a user hovers over the notch of a reference line.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceLineRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label String

The label of the reference line.
value number

The value against which the reference line has been plotted.
valueFormatted String

The formatted representation of the value of the reference line.

referenceLineRollOut Hover Reference line

This event is fired when a user hovers out of the notch of a reference line.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceLineRollOutl": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label String

The label of the reference line.
value number

The value against which the reference line has been plotted.
valueFormatted string

The formatted representation of the value of the reference line.

referenceLineClick Click Reference line

This event is fired when a user clicks on the notch of a reference line.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceLineClick": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label string

The label of the reference line.
value number

The value against which the reference line has been plotted.
valueFormatted string

The formatted representation of the value of the reference line.

referenceZoneRollOver Hover Reference zone

This event is fired when a user hovers over a reference zone’s notches.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceZoneRollOver": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label string

The label of the reference line.
valueMax number

The maximum value of the reference zone.
valueMin number

The minimum value of the reference zone.
valueMaxFormatted string

The formatted valueMax of the reference zone.
valueMinFormatted string

The formatted valueMin of the reference zone.

referenceZoneRollOut Hover Reference zone

This event is fired when a user hovers out of the reference zone’s notches.

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceZoneRollOut": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label string

The label of the reference line.
valueMax number

The maximum value of the reference zone.
valueMin number

The minimum value of the reference zone.
valueMaxFormatted string

The formatted valueMax of the reference zone.
valueMinFormatted string

The formatted valueMin of the reference zone.

referenceZoneClick Click Reference zone

This event is fired when a user clicks on a reference zone’s notches

{
   "chart": {
     // ...
   },
   "data":[
     // ...
   ]
 },
 "events": {
   "referenceZoneClick": function(ev) {
     console.log(ev);
   }
 }

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
label string

The label of the reference line.
valueMax number

The maximum value of the reference zone.
valueMin number

The minimum value of the reference zone.
valueMaxFormatted string

The formatted valueMax of the reference zone.
valueMinFormatted string

The formatted valueMin of the reference zone.

dataPlotClick Click Data Plot

This event is fired when the data plot is clicked.

The payload data of event object will vary slightly based on plot type. Refer to parameter tables below to know more.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "dataPlotClick": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Common across all plots

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the bin in which the plot being clicked exists.
end number

The UNIX timestamp corresponding to the end time of the bin in which the plot being clicked exists.
startText string

The start timestamp represented in a human readable format.
endText string

The end timestamp represented in a human readable format.
timeFormatter string

The formatter string used to represent the start/end timestamps as startText/endText.
View all

Column, Line, Step Line, Smooth Line, Area, Step Area, Smooth Area

Name Type Description
measure string

The name of the measure being represented by the plot.
binValue number

The raw aggregated value being represented by the plot.
binValueFormatted string

The aggregated binValue being displayed by the plot, after formatting.

Candlestick, OHLC

Name Type Description
measure string

The name of the measure being represented as the close value of the plot.
measureOpen string

The name of the measure being represented as the open value of the plot.
measureHigh string

The name of the measure being represented as the high value of the plot.
measureLow string

The name of the measure being represented as the low value of the plot.
measureClose string

The name of the measure being represented as the close value of the plot.
View all

dataPlotRollOver Hover Data Plot

This event is fired when the data plot is hovered upon.

The payload data of event object will vary slightly based on plot type.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "dataPlotRollOver": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Common across all plots

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the bin in which the plot being clicked exists.
end number

The UNIX timestamp corresponding to the end time of the bin in which the plot being clicked exists.
startText string

The start timestamp represented in a human readable format.
endText string

The end timestamp represented in a human readable format.
timeFormatter string

The formatter string used to represent the start/end timestamps as startText/endText.
View all

Column, Line, Step Line, Smooth Line, Area, Step Area, Smooth Area

Name Type Description
measure string

The name of the measure being represented by the plot.
binValue number

The raw aggregated value being represented by the plot.
binValueFormatted string

The aggregated binValue being displayed by the plot, after formatting.

Candlestick, OHLC

Name Type Description
measure string

The name of the measure being represented as the close value of the plot.
measureOpen string

The name of the measure being represented as the open value of the plot.
measureHigh string

The name of the measure being represented as the high value of the plot.
measureLow string

The name of the measure being represented as the low value of the plot.
measureClose string

The name of the measure being represented as the close value of the plot.
View all

dataPlotRollOut Hover Data Plot

This event is fired when a data plot is hovered out.

The payload data of event object will vary slightly based on plot type.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "dataPlotRollOut": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Common across all plots

Name Type Description
start number

The UNIX timestamp corresponding to the start time of the bin in which the plot being clicked exists.
end number

The UNIX timestamp corresponding to the end time of the bin in which the plot being clicked exists.
startText string

The start timestamp represented in a human readable format.
endText string

The end timestamp represented in a human readable format.
timeFormatter string

The formatter string used to represent the start/end timestamps as startText/endText.
View all

Column, Line, Step Line, Smooth Line, Area, Step Area, Smooth Area

Name Type Description
measure string

The name of the measure being represented by the plot.
binValue number

The raw aggregated value being represented by the plot.
binValueFormatted string

The aggregated binValue being displayed by the plot, after formatting.

Candlestick, OHLC

Name Type Description
measure string

The name of the measure being represented as the close value of the plot.
measureOpen string

The name of the measure being represented as the open value of the plot.
measureHigh string

The name of the measure being represented as the high value of the plot.
measureLow string

The name of the measure being represented as the low value of the plot.
measureClose string

The name of the measure being represented as the close value of the plot.
View all

ready Lifecycle

This event is fired when the FusionCharts library is ready to be used. By the time this event is raised, the browser's DOM is ready to be interacted with, which corresponds to the DOMContentLoaded event of browsers. In older browsers, where DOMContentLoaded is not fired, the ready event corresponds to the load event of the page. In case the FusionCharts library is included in the page when the DOMContentLoaded event is already fired (i.e. the script is loaded asynchronously using AJAX or by using script deferring methods) the ready event is still fired to ensure the integrity of all the listeners. In many ways the nature of this event is similar to the jQuery(document).ready function of the jQuery library and the Ext.onReady function of the ExtJS library. One should interact with FusionCharts (i.e. create new charts, set options, etc.) only after this event has been fired. This event also helps you to neatly write your code in separate script files and in the page <head> thus keeping scripts from being a part of your page <body> An alternate (and shorthand) method to subscribing the ready event is to use the FusionCharts.ready function. One advantage that the ready function has over the ready event is that the event is fired only once during the life-cycle of a page while functions passed to the ready function are executed even when attached after the ready event has been fired. This is a library level event and as such can be only listened via the FusionChart object on the FusionCharts class alone. It will not be fired if it is subscribed to from individual chart instances.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "ready": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed.
View all

loaded Lifecycle

This event is fired when FusionCharts has finished downloading itself in the client environment. It indicates that the all the resources required to render a FusionCharts chart is ready and that a chart can be rendered. This event can be used to hide any loader components that you might have on your page 

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "loaded": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

containerNotFound Lifecycle

This event is fired if the container is either not found or not provided after invoking FusionCharts#render.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "containerNotFound": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

beforeInitialize Lifecycle

This pre-initialization event is fired every time a new instance of FusionCharts is created. It then triggers a number of modules that need to be setup on every instance of FusionCharts; the event can be used to perform any actions required to be completed before the initialization of each chart. Because this event is triggered upon instantiating a new FusionCharts object, it is impossible to listen to this event by adding an event listener to the chart. By the time the event listener is attached (using the FusionCharts#addEventListener method), the event will already have been already fired. However, there are alternate ways that can be used to listen to this event. You can listen to the FusionCharts global events, using the FusionCharts.addEventListener static method before even creating a new instance. The required instance of FusionCharts can then be identified from within the event handler by using event.sender.id. You can also pass the event listener for the correct event within the events object when creating an instance of FusionCharts

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "beforeInitialize": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

initialized Lifecycle

This event is fired when a new instance of FusionCharts is created. Initialization does not indicate that the chart has rendered; it only indicates that the JavaScript object instance (using new FusionCharts({...})) is created and is ready to be operated upon.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "initialized": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

beforeDraw Lifecycle

This event is fired when the chart is redrawn because of a data update, resize, change of chart message, or change of chart type.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "beforeDraw": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

drawComplete Lifecycle

This event is fired when the chart draws for the first time or is redrawn because of a data update, resize, change of chart message, or change of chart type.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "drawComplete": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

drawCancelled Lifecycle

This event is fired when event.preventDefault() is called from within the handler for the beforeDraw event.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "drawCancelled": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

beforeResize Resize Chart

This event is fired before a chart is resized.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "beforeResize": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

resized Resize Chart

This event is fired when the chart is resized either by calling FusionCharts#resizeTo() or by changing the dimensions of the chart container element, when the dimensions of the chart have been provided in the percentage format.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "resized": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

resizeCancelled Resize Chart

This event is fired when event.preventDefault() is called from within the handler of the beforeResize event. This cancels any FusionCharts#resizeTo() invocations.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "resizeCancelled": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

beforeDispose Dispose Lifecycle

This event is fired before the chart is deleted and cleaned from the DOM and the browser’s memory.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "beforeDispose": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

disposed Dispose Lifecycle

Usually, this event is fired by the FusionCharts#dispose() method. FusionCharts also triggers it when an already rendered chart is re-rendered. Unused charts should always be disposed to avoid memory-leaks within an application or dashboard.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "disposed": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

disposeCancelled Dispose Lifecycle

This event is fired when the default behaviour of the beforeDispose event is cancelled using event.preventDefault() from a handler attached to the beforeDispose event.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "disposeCancelled": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

animationInvoked Lifecycle

This event is fired when the animation is started in the chart.

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "animationInvoked": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
eventType string

Type (name) of the event triggered.
eventId number

Unique ID associated with the event. Internally, it is an incrementing counter that can also be used to verify the order in which the event was triggered.
sender FusionCharts

Instance of the FusionCharts object that fired this event. Events that are fired by the framework (and not by individual charts) have the framework as this property.
cancelled boolean

Boolean attribute that indicates whether an event's propagation was cancelled; set to true when eventObj.stopPropagation() is called.
stopPropagation function

Function called from within a listener to prevent subsequent listeners from being executed
View all

selectionChange Zoom/Pan Chart

These actions include: After every instance of a panning/zooming action from a focus canvas. After selecting a standard range of time from the Standard Range Selector. After applying a valid range of time from the Custom Range Selector. After every instance of a panning/zooming action using the time navigator’s window. When using an API which affects the focused spread of time in the chart: FusionCharts#setCurrentTimeSelection FusionCharts#setBinSize FusionCharts#setJSONData FusionCharts#render 

{
    "chart": {
        // ...
    },
    "data": [
        // ...
    ]
},
"events": {
    "selectionChange": function(ev) {
        console.log(ev);
    }
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the time selection
end number

The UNIX timestamp corresponding to the end of the time selection.
binUnit String

The unit of time being represented on each bin - millisecond, second, minute, hour, day, month or year.
binMultiplier number

The multiplier for the binUnit being represented in each bin.

standardRangeSelect Click SRS

This event is fired when a standard period is selected from the Standard Range Selector.

 {
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"standardRangeSelect": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
unit string

The unit of time being selected - minute, hour, day, month or year.
multiplier number

The multiplier for the unit being selected.
text string

The text representing the standard period - 10Y, 5Y, 3Y, 2Y, 1Y, 6M, 3M, 1M, 15D, 7D, 1D, 12H, 6H, 3H, 1H or 30m

customRangeSelect Click CRS

This event is fired when a valid custom period is applied from the Custom Range Selector.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"customRangeSelect": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the custom range selection.
end number

The UNIX timestamp corresponding to the end of the custom range selection.
startText string

The formatted time text corresponding to the start time of the custom range selection.
endText string

The formatted time text corresponding to the end time of the custom range selection.
formatter string

The formatter string used to represent the start/end time as the startText/endText.

timeNavBrushStart Drag Time Navigator

This event is fired at the start of the user’s interaction with the time navigator’s window.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"timeNavBrushStart": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the brush selection.
startText string

A human readable text representation of the start timestamp (as shown in the active window labels)
end number

The UNIX timestamp corresponding to the end of the brush selection.
endText string

A human readable textual representation of the end timestamp (as shown in the active window labels).
formatter string

The formatter string used to derive the startTime and endTime from the start timestamp and the end timestamp respectively.

timeNavBrush Drag Time Navigator

This event is fired on every instance of the window being dragged/squeezed by the user.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"timeNavBrush": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the brush selection.
startText string

A human readable text representation of the start timestamp (as shown in the active window labels)
end number

The UNIX timestamp corresponding to the end of the brush selection.
endText string

A human readable textual representation of the end timestamp (as shown in the active window labels).
formatter string

The formatter string used to derive the startTime and endTime from the start timestamp and the end timestamp respectively.

timeNavBrushEnd Drag Time Navigator

This event is fired at the end of the user’s interaction with the time navigator’s window.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"timeNavBrushEnd": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the brush selection.
startText string

A human readable text representation of the start timestamp (as shown in the active window labels)
end number

The UNIX timestamp corresponding to the end of the brush selection.
endText string

A human readable textual representation of the end timestamp (as shown in the active window labels).
formatter string

The formatter string used to derive the startTime and endTime from the start timestamp and the end timestamp respectively.

canvasDragStart Drag Canvas

This event is fired at the start of the user’s drag interaction with a chart canvas.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"canvasDragStart": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the canvas’ time spread.
end number

The UNIX timestamp corresponding to the end of the canvas’ time spread.

canvasDrag Drag Canvas

This event is fired on every instance of the canvas being dragged by the user.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"canvasDrag": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the canvas’ time spread.
end number

The UNIX timestamp corresponding to the end of the canvas’ time spread.

canvasDragEnd Drag Canvas

This event is fired at the end of the user’s drag interaction with a chart canvas.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"canvasDragEnd": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the canvas’ time spread.
end number

The UNIX timestamp corresponding to the end of the canvas’ time spread.

canvasDblTap Double Click Canvas

This event is fired after a user’s double tap interaction on a canvas.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"canvasDblTap": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the canvas’ time spread.
end number

The UNIX timestamp corresponding to the end of the canvas’ time spread.

canvasWheel Wheel Canvas

This event is fired on every instance of a user’s wheel interaction on a canvas.

{
	"chart": {
		// ...
	},
	"data": [
		// ...
	]
},
"events": {
	"canvasWheel": function (ev) {
		console.log(ev);
	}
}

Example

Were you able to implement this?
chart example will render here

Event Object Parameters

Name Type Description
start number

The UNIX timestamp corresponding to the start of the canvas’ time spread.
end number

The UNIX timestamp corresponding to the end of the canvas’ time spread.