Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

eventListener

Event listeners are used to tap into different stages of creating, updating, rendering or removing charts. A FusionCharts instance fires specific events based on what stage it is in. For example, the renderComplete event is fired each time a chart has finished rendering. You can listen to any such event using addEventListener or addEventListener and bind your own functions to that event.

These functions are known as “listeners” and are passed on to the second argument (listener) of the addEventListener and addEventListener functions.

Parameters

The first parameter passed to the listener function is an event object that contains all information pertaining to a particular event.

eventObject
: {
type

: string

[+]

The name of the event.

eventId

: number

[+]

A unique ID associated with the event. Internally it is an incrementing counter and as such can be indirectly used to verify the order in which the event was fired.

sender

: FusionCharts

[+]

The instance of FusionCharts object that fired this event. Occassionally, for events that are not fired by individual charts, but are fired by the framework, will have the framework as this property.

cancelled

: boolean

[+]

Shows whether an event’s propagation was cancelled or not. It is set to true when .stopPropagation() is called.

stopPropagation

: function

[+]

Call this function from within a listener to prevent subsequent listeners from being executed.

prevented

: boolean

[+]

Shows whether the default action of this event has been prevented. It is set to true when .preventDefault() is called.

preventDefault

: function

[+]

Call this function to prevent the default action of an event. For example, for the event beforeResize, if you do .preventDefault(), the resize will never take place and instead resizeCancelled will be fired.

detached

: boolean

[+]

Denotes whether a listener has been detached and no longer gets executed for any subsequent event of this particular type.

detachHandler

: function

[+]

Allows the listener to remove itself rather than being called externally by removeEventListener. This is very useful for one-time event listening or for special situations when the event is no longer required to be listened when the event has been fired with a specific condition.

}
eventArgs

: object

[+]

Every event has an argument object as second parameter that contains information relevant to that particular event.

readyCallback

The function passed as ready callback is executed when FusionCharts library is ready. Use ready to request executing of your callback function.

Parameters

args

: FusionCharts or *

[+]

By default, the parameter passed to the callback function is the FusionCharts library class unless specified otherwise in the args parameter of ready

renderCallback

This callback is part of render function. When a function is passed as a parameter of render, it is executed when the rendering process is complete (along with renderComplete event.) This callback is executed with the scope of the instance of FusionCharts and as such the this variable within this function refers to the chart whose rendering process is complete.

Parameters

container

: DOMElement

[+]

This parameter returns a reference to the container element within which the chart, gauge or map has been rendered.

Example

// In this example, we are going to use the render callback
// function to activate a set of buttons that are needed only
// after a chart has been rendered (say, exporting the chart.)
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "Column2D",
        dataFormat: "jsonurl",
        dataSource: "sample-data-source.json",
        renderAt: "chart-container" // assuming an element with this id exists
    }).render(function () {
        // Assuming a disabled button with a specific id already exists.
        var button = document.getElementById("export-button");
        button.removeAttribute("disabled");
    });
});
  • eventListener
  • readyCallback
  • renderCallback
Top