beforeInitialize

Whenever a new instance of FusionCharts is created (as in new FusionCharts(...), this pre initialization event is raised. This event triggers a number of modules that needs to be setup on every instance of FusionCharts. One can listen to this event perform actions that, on similar grounds, requires to be setup upn initialization of each chart.

Since this event is fired upon instantiating a new FusionCharts object, it is virtually impossible to listen to this event by adding event listener to that individual chart. That is because, by the time one's event listener is attached using FusionCharts#addEventListener on the subsequent lines post doing new FusionCharts(...), this event would have been already fired. Thus, the alternate ways to listen to this event are:

  1. Listen to FusionCharts global events using FusionCharts.addEventListener before even creating a new instance. (The required instance can be identified by the id of the chart using eventObject.sender.id.)

  2. Pass the event listener as the FusionCharts constructor parameter itself.

Parameters:
Parameter Description
height
Type:
numeric or percent

Height of the chart in pixels or percentage.
width
Type:
numeric or percent

Width of the chart in pixels or percentage.
Example
// Listening using global events
FusionCharts.addEventListener('beforeInitialize', function (opts) {
    // Prints id of the chart being rendered
    console.log("Chart with id " + opts.sender.id + " is about to be initialized.");
 });

// Pass event listener in the FusionCharts constructor
var mychart = new FusionCharts({
    "type": "column2d",
    "dataFormat": "json",
    "dataSource": {
         ...
    },
    // Attach event handlers
    "events": {
        // Attach to beforeInitialize
        "beforeInitialize": function () {
            console.log("Initializing mychart...");
        }
    }
});

initialized

Once a new instance of FusionCharts is created and is ready to be operated upon, this initialized event is fired. Note that initialization does not indicate that the chart has been rendered. It denotes that the JavaScript object instance of FusionCharts is created (as in new FusionCharts(...) done) and is now ready to be operated upon (like data being passed onto it, it being rendered, etc.)

Parameters:
Parameter Description
height
Type:
numeric or percent

height of the chart in pixels or percentage .
width
Type:
numeric or percent

width of the chart in pixels or percentage .
Example
// Listening using global events
FusionCharts.addEventListener('initialized', function (opts) {
    // Prints id of the chart that has initialized
    console.log("Chart with id " + opts.sender.id + " has been initialized.");
 });

// Pass event listener in the FusionCharts constructor
var mychart = new FusionCharts({
    "type": "column2d",
    "dataFormat": "json",
    "dataSource": {
         ...
    },
    // Attach event handlers
    "events": {
        // Attach to beforeInitialize
        "initialized": function () {
            console.log("Initialized mychart...");
        }
    }
});

beforeRender

This event is raised before a chart is to be rendered. Doing an eventObject.preventDefault() on this event will cancel the rendering process. The rendering process is triggered when FusionCharts#render is called on the chart instance.

Parameters:
Parameter Description
container
Type:
DOMElement

This contains the reference to the container HTMLDOMElement within which the chart is to be rendered.
width
Type:
numeric or percent

Width of the chart in percent or pixels.
height
Type:
numeric or percent

Height of the chart in percent or pixels.
See:
Example
// Listening using global events
FusionCharts.addEventListener('beforeRender', function (eventObj, argsObj) {
    // Prints id of the chart being rendered
    console.log("Chart with id " + eventObj.sender.id + " is about to be rendered.");
 });

// Pass event listener in the FusionCharts constructor
var mychart = new FusionCharts({
    "type": "column2d",
    "dataFormat": "json",
    "dataSource": {
         ...
    },
    // Attach event handlers
    "events": {
        // Attach to beforeRender
        "beforeRender": function (eventObj, argsObj) {
            console.log("Beginning render of " + eventObj.sender.id);
        }
    }
});

renderCancelled

This event as a result of cancellation of default behavior of FusionCharts#event:beforeRender event via it's eventObject.preventDefault() method.

Parameters:
Parameter Description
container
Type:
DOMElement

This contains the refernce to the container HTMLDOMElement whithin which the chart is to be rendered.
width
Type:
numeric or percent

Width of the chart in percent or pixels.
height
Type:
numeric or percent

Height of the chart in percent or pixels.
See:
Example
// Listening using global events
FusionCharts.addEventListener('renderCancelled', function (eventObj, argsObj) {
    // Prints id of the chart whose rendering was cancelled
    console.log("Rendering of chart with id " + eventObj.sender.id + " was cancelled.");
 });

// Pass event listener in the FusionCharts constructor
var mychart = new FusionCharts({
    "type": "column2d",
    "dataFormat": "json",
    "dataSource": {
         ...
    },
    // Attach event handlers
    "events": {
        // Attach to renderCancelled
        "renderCancelled": function (eventObj, argsObj) {
            console.log("Cancelled rendering of " + eventObj.sender.id);
        }
    }
});

beforeResize

This event is fired before a chart is to be resized. It is fired either from FusionCharts#resizeTo or fired due to change in dimension of the chart's container element while the dimensions were in percentage format.

Parameters:
Parameter Description
currentWidth
Type:
numeric or percent

Current width of the chart in pixels or percentage
currentHeight
Type:
numeric or percent

Current height of the chart in pixels or percentage
newWidth
Type:
numeric or percent

new width of the chart in pixels or percentage
newHeight
Type:
numeric or percent

new height of the chart in pixels or percentage
See:

resized

Denotes when the chart has been resized either from calling FusionCharts#resizeTo or caused due to change in dimension of the chart's container element while the dimensions were in percentage format.

Parameters:
Parameter Description
width
Type:
numeric or percent

Width of the chart after being resized
height
Type:
numeric or percent

Height of the chart after being resized
prevWidth
Type:
numeric or percent

The width of the chart previous to being resized
prevHeight
Type:
numeric or percent

The height of the chart previous to being resized
originalWidth
Type:
number

Width of the chart in pixels provided when chart was rendered using FusionCharts#render.
originalHeight
Type:
number

Original render-time height of the chart in pixels.
See:

resizeCancelled

This event is triggered when event.preventDefault() is called from FusionCharts#event:beforeResize. This resuls in cancelling of instructions received from the FusionCharts#resizeTo function.

Parameters:
Parameter Description
currentWidth
Type:
numeric or percent

Current width of the chart in pixels or percentage.
currentHeight
Type:
numeric or percent

Current height of the chart in pixels or percentage.
cancelledTargetWidth
Type:
numeric or percent

The width of the chart that was requested to be set, but was cancelled.
cancelledTargetHeight
Type:
numeric or percent

The height of the chart that was requested to be set, but was cancelled.
See:

beforeDispose

This event is raised when a chart is about to be disposed, i.e., deleted and cleaned from memory. Usually, this event is triggered by FusionCharts#dispose. It can also be internally raised when an already rendered chart is forced to re-render or if a child chart in a chain of LinkedCharts is about to be closed.

See:

disposed

This event is raised when a chart has been disposed, i.e., deleted and cleaned from memory.

Usually, this event is triggered by FusionCharts#dispose. It can also be internally raised when an already rendered chart has been forced to re-render or if a child chart in a chain of LinkedCharts is closed.

You should dispose unused charts to avoid memory-leaks within your application or dashboard.

See:

disposeCancelled

This event is cancelled when eventObject.preventDefault() is on the event FusionCharts#event:beforeDispose. This results in cancelling of dispose of charts, which is usually issued by FusionCharts#dispose.

See:

pageNavigated

This event is fired on page change in SSGrid chart.

Parameters:
Parameter Description
data
Type:
object

Contains data of the sought page, with color, displayValue, originalText, value and y position for each data points.
pageId
Type:
number

Tells the index of the sought page.

rotationEnd

This event is fired on drag rotation end of pie chart.

Parameters:
Parameter Description
changeInAngle
Type:
number

Gives the value by how much the chart was rotated
startingAngle
Type:
number

Gives the value of the startingAngle of the chart on rotation end.

rotationStart

This event is fired on drag rotation start of pie chart.

Parameters:
Parameter Description
startingAngle
Type:
number

Gives the value of the startingAngle of the chart, when the chart starts rotating

centerLabelRollover

This event is fired on mouse rollover on label at center of doughnut 2D.

Available on doughnut chart only.

Parameters:
Parameter Description
centerLabelText
Type:
string

is the text for display at center label
chartX
Type:
number

is the relative X-Cordinate to chart container where the chart was clicked
chartY
Type:
number

is the relative Y-Cordinate to chart container where the chart was clicked.
container
Type:
string

is the DOM element where the chart is being rendered.
height
Type:
numeric or percent

height of the chart
width
Type:
numeric or percent

width of the chart
id
Type:
string

is the chart id
pageX
Type:
number

is the relative X-Cordinate to screen where the chart is clicked
pageY
Type:
number

is the relative Y-Cordinate to screen where the chart is clicked
pixelHeight
Type:
number

is the height of the DOM element where the chart is being rendered in pixels
pixelWidth
Type:
number

is the width of the DOM element where the chart is being rendered in pixels
renderer
Type:
string

tells if the chart is rendered using JavaScript or Flash

centerLabelRollout

This event is fired on mouse rollout from label at center of doughnut 2D.

Available on doughnut chart only.

Parameters:
Parameter Description
centerLabelText
Type:
string

is the text for display at center label
chartX
Type:
number

is the relative X-Cordinate to chart container where the chart was clicked
chartY
Type:
number

is the relative Y-Cordinate to chart container where the chart was clicked.
container
Type:
string

is the DOM element where the chart is being rendered.
height
Type:
numeric or percent

height of the chart
width
Type:
numeric or percent

width of the chart
id
Type:
string

is the chart id
pageX
Type:
number

is the relative X-Cordinate to screen where the chart is clicked
pageY
Type:
number

is the relative Y-Cordinate to screen where the chart is clicked
pixelHeight
Type:
number

is the height of the DOM element where the chart is being rendered in pixels
pixelWidth
Type:
number

is the width of the DOM element where the chart is being rendered in pixels
renderer
Type:
string

tells if the chart is rendered using JavaScript or Flash

centerLabelClick

This event is fired on click on label at center of doughnut 2D.

Available on doughnut chart only.

Parameters:
Parameter Description
centerLabelText
Type:
string

is the text for display at center label.
chartX
Type:
number

is the relative X-Cordinate to chart container where the chart was clicked.
chartY
Type:
number

is the relative Y-Cordinate to chart container where the chart was clicked.
container
Type:
string

is the DOM element where the chart is being rendered.
height
Type:
numeric or percent

height of the chart
width
Type:
numeric or percent

width of the chart
id
Type:
string

is the chart id
pageX
Type:
number

is the relative X-Cordinate to screen where the chart is clicked
pageY
Type:
number

is the relative Y-Cordinate to screen where the chart is clicked
pixelHeight
Type:
number

is the height of the DOM element where the chart is being rendered in pixels
pixelWidth
Type:
number

is the width of the DOM element where the chart is being rendered in pixels
renderer
Type:
string

tells if the chart is rendered using JavaScript or Flash

centerLabelChanged

This event is fired on change of label at center of doughnut 2D.

Available on doughnut chart only.

Parameters:
Parameter Description
centerLabelText
Type:
string

is the text for display at center label
chartX
Type:
number

is the relative X-Cordinate to chart container where the chart was clicked
chartY
Type:
number

is the relative Y-Cordinate to chart container where the chart was clicked.
container
Type:
string

is the DOM element where the chart is being rendered.
height
Type:
numeric or percent

height of the chart
width
Type:
numeric or percent

width of the chart
id
Type:
string

is the chart id
pageX
Type:
number

is the relative X-Cordinate to screen where the chart is clicked
pageY
Type:
number

is the relative Y-Cordinate to screen where the chart is clicked
pixelHeight
Type:
number

is the height of the DOM element where the chart is being rendered in pixels
pixelWidth
Type:
number

is the width of the DOM element where the chart is being rendered in pixels
renderer
Type:
string

tells if the chart is rendered using JavaScript or Flash

linkClicked

FusionCharts allows you to configure the data plot items to respond to user's click interaction by specifying the link attribute on the data item. You can configure it to perform various actions on click such as:

  • open an url
  • call a JavaScript function
  • drill-down to a new chart.

Other than data-plots, links can be applied to the entire chart using the attribute clickUrl, on chart external-logo and a number of other objects.

Parameters:
Parameter Description
linkProvided
Type:
string

This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
linkInvoked
Type:
string

This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
linkAction
Type:
object

Indicates what the link click will do. In case of opening a new chart it is 'newchart'.

chartTypeChanged

This event is fired when a change in chart type is triggered by calling FusionCharts#chartType on a chart. The event is raised only when the chart type has been explicitly changed from what was set earlier.

This event is not fired when:

  • A chart is rendered using FusionCharts.render.
  • A chart type is set for the first time on a chart, even using FusionCharts#chartType. For example, if no type option is provided to the FusionCharts constructor when creating the chart, and later on FusionCharts#chartType is called on that chart instance for the first time, this event is not triggered.
  • If the chart type parameter sent to FusionCharts#chartType is the same as the current chart type.
  • If the new chart type provided is invalid.
Parameters:
Parameter Description
previousType
Type:
string

The previously assigned chart type of the chart.
newType
Type:
string

The new chart type that has been set on the chart.
See:

chartClick

This event is fired when the chart is clicked. For touch devices, this event is fired when user taps on the chart.

This event provides useful information on the position of mouse relative to the chart and the page. This can be used to position things like annotations based on where the chart is clicked.

Parameters:
Parameter Description
container
Type:
string

The DOM element within which the chart has been rendered.
id
Type:
string

The id of the chart that has triggered this event.
height
Type:
string

The height of the chart specified at the time of rendering the chart in pixels or percent.
width
Type:
string

The width of the chart specified at the time of rendering the chart in pixels or percent.
chartX
Type:
number

The x-coordinate of the mouse relative to the position of the chart.
chartY
Type:
number

The y-coordinate of the mouse relative to the position of the chart.
pageX
Type:
number

The x-coordinate of the mouse relative to the document.
pageY
Type:
number

The y-coordinate of the mouse relative to the document.
pixelHeight
Type:
number

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container.
pixelWidth
Type:
number

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container.
Since:
  • 3.4.0
See:
Example
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: 'column2d',
        dataFormat: 'jsonurl',
        dataSource: 'chart-data.json',
        renderAt: 'chart-container-div',

        events: {
            chartClick: function (eventObj, argsObj) {
                console.log('Chart clicked at ' + argsObj.chartX + ',' + argsObj.chartY);
            }
        }
    });

    chart.render();
});

chartMouseMove

This event is triggered whenever user moves the mouse pointer over a chart. The event arguments pass useful information such as the pointer location relative to both chart and the page, which can be utilised to perform various actions on the chart such as position an annotation or integrate charts with custom tooltip libraries.

This event is not fired by default and needs to be enabled for individual charts by setting the value of chart attribute enableChartMouseMoveEvent to 1.

Parameters:
Parameter Description
container
Type:
string

The DOM element within which the chart has been rendered.
id
Type:
string

The id of the chart that has triggered this event.
height
Type:
string

The height of the chart specified at the time of rendering the chart in pixels or percent.
width
Type:
string

The width of the chart specified at the time of rendering the chart in pixels or percent.
chartX
Type:
number

The x-coordinate of the mouse relative to the position of the chart.
chartY
Type:
number

The y-coordinate of the mouse relative to the position of the chart.
pageX
Type:
number

The x-coordinate of the mouse relative to the document.
pageY
Type:
number

The y-coordinate of the mouse relative to the document.
pixelHeight
Type:
number

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container
pixelWidth
Type:
number

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container
Since:
  • 3.4.0
See:

chartRollOver

This event is fired when the mouse pointer moves over the chart. For touch devices, this event is raised when user taps on to the chart after previously tapping onto anywhere outside the chart.

One can listen to this event and track when user is pointing to a chart and perform relevant actions such as highlighting information anywhere else on the page that is relevant to the chart.

Parameters:
Parameter Description
container
Type:
string

The DOM element within which the chart has been rendered.
id
Type:
string

The id of the chart that has triggered this event.
height
Type:
string

The height of the chart specified at the time of rendering the chart in pixels or percent.
width
Type:
string

The width of the chart specified at the time of rendering the chart in pixels or percent.
chartX
Type:
number

The x-coordinate of the mouse relative to the position of the chart.
chartY
Type:
number

The y-coordinate of the mouse relative to the position of the chart.
pageX
Type:
number

The x-coordinate of the mouse relative to the document.
pageY
Type:
number

The y-coordinate of the mouse relative to the document.
pixelHeight
Type:
number

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container
pixelWidth
Type:
number

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container
Since:
  • 3.4.0
See:
Example
// Create a chart and display the caption of the chart over which the mouse has been hovered. The
// event is attached to the FusionCharts global `addEventListener` function so that it is fired for
// all charts rendered on that page Once this event listener has been attached, any chart rendered on
// page will cause a console log when hovered or tapped.
FusionCharts.addEventListener('chartRollOver', function (event) {
    var chart = event.sender, // access the chart that raised this event
        caption = chart && chart.getChartAttribute('caption'); // get the chart caption

    // Output the caption in JavaScript console
    console.log('Mouse entered on the chart with caption: ' + caption);
});

chartRollOut

This event is fired when the mouse pointer moves out of the chart. For touch devices, this event is raised when user taps on to anywhere outside the chart after previously tapping on the chart.

One can listen to this event and track when user is no longer pointing to a particular chart.

Parameters:
Parameter Description
container
Type:
string

The DOM element within which the chart has been rendered.
id
Type:
string

The id of the chart that has triggered this event.
height
Type:
string

The height of the chart specified at the time of rendering the chart in pixels or percent.
width
Type:
string

The width of the chart specified at the time of rendering the chart in pixels or percent.
chartX
Type:
number

The x-coordinate of the mouse relative to the position of the chart.
chartY
Type:
number

The y-coordinate of the mouse relative to the position of the chart.
pageX
Type:
number

The x-coordinate of the mouse relative to the document.
pageY
Type:
number

The y-coordinate of the mouse relative to the document.
pixelHeight
Type:
number

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container
pixelWidth
Type:
number

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container
Since:
  • 3.4.0
See:
Example
// Create a chart and display the caption of the chart over which the mouse has been hovered. The
// event is attached to the FusionCharts global `addEventListener` function so that it is fired for
// all charts rendered on that page Once this event listener has been attached, any chart rendered on
// page will cause a console log when hovered out or tapped away.
FusionCharts.addEventListener('chartRollOut', function (event) {
    var chart = event.sender, // access the chart that raised this event
        caption = chart && chart.getChartAttribute('caption'); // get the chart caption

    // Output the caption in JavaScript console
    console.log('Mouse left the chart with caption: ' + caption);
});

backgroundLoaded

This event is fired for external background image for a chart has loaded succesfully. These background images are applied using the bgImage chart attribute. In case loading fails, the FusionCharts#event.backgroundLoadError event is fired.

To know more about how to load and configure chart background image, see: Border and Background.

This event is not fired if bgImage attribute is not provided.

Parameters:
Parameter Description
url
Type:
string

URL of the background image
bgImageAlpha
Type:
number

The value of the image alpha
bgImageDisplayMode
Type:
string

The mode in which the images are displayed in background of the chart
bgImageVAlign
Type:
string

The vertical alignment of the background image
bgImageHAlign
Type:
string

The horizontal alignment of the background image
imageWidth
Type:
number

The width of the background image
imageHeight
Type:
number

The height of the background image
See:

backgroundLoadError

This event is fired for external background image for a chart failed to load. These background images are applied using the bgImage chart attribute.

The cause of failure can be network connectivity issues or invalid value passed to the bgImage attribute. There can also be errors due to cross-domain policies and other security restrictions enforced by browsers.

To know more about how to load and configure chart background image, see: Border and Background.

This event is not fired if bgImage attribute is not provided.

Parameters:
Parameter Description
url
Type:
string

The URL of the background image
bgImageAlpha
Type:
number

The alpha value of the image.
error
Type:
string

Contains error message.
bgImageDisplayMode
Type:
string

The mode in which the images are displayed in the background of the chart.
bgImageVAlign
Type:
string

Vertical alignment of the background image.
bgImageHAlign
Type:
string

Horizontal alignment of the background image.
bgImageScale
Type:
number

The value of the scaling of the image.
imageHeight
Type:
number

The height of the background image.
See:

logoRollover

This event is fired when the mouse is hovered over external logo added to the chart using logoURL attribute.

To know more about external logos, see configuring-your-chart-loading-external-logos

Parameters:
Parameter Description
logoURL
Type:
string

The URL of the logo image.
logoAlpha
Type:
number

The value of the alpha of the logo image.
logoPosition
Type:
string

The position of the logo.
logoScale
Type:
number

The value of scaling of the logo image.
logoLink
Type:
string

The URL linked to the logo which on clicking will be taken to the URL link.
chartX
Type:
number

The relative X-Cordinate to screen where the mouse was hovered over the logo.
chartY
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered over the logo.
pageX
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered over the logo.
pageY
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered over the logo.
Tutorials:
  • Tutorial: configuring-your-chart-loading-external-logos
See:

logoRollout

This event is fired when the mouse is moved outside external logo added to the chart using logoURL attribute.

To know more about external logos, see configuring-your-chart-loading-external-logos

Parameters:
Parameter Description
logoURL
Type:
string

The URL of the logo image.
logoAlpha
Type:
number

The value of the alpha of the logo image.
logoPosition
Type:
string

The position of the logo.
logoScale
Type:
string

The value of scaling for logo image.
logoLink
Type:
string

The URL linked to the logo which on clicking will be taken to the URL link.
chartX
Type:
number

The relative X-Cordinate to screen where the mouse was hovered out of logo image.
chartY
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
pageX
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
pageY
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
Tutorials:
  • Tutorial: configuring-your-chart-loading-external-logos
See:

logoClick

This event is fired when the mouse is clicked on external logo added to the chart using logoURL attribute. For touch devices, this event is fired when user taps on the logo.

To know more about external logos, see configuring-your-chart-loading-external-logos

Parameters:
Parameter Description
logoURL
Type:
string

The URL of the logo image.
logoAlpha
Type:
number

The value of the alpha of the logo image.
logoPosition
Type:
string

The position of the position of the logo.
logoScale
Type:
number

The value of scaling for logo image.
logoLink
Type:
string

The URL linked to the logo which on clicking will be taken to the URL link.
chartX
Type:
number

The relative X-Cordinate to screen where the mouse was hovered out of the chart logo.
chartY
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
pageX
Type:
number

The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
pageY
Type:
number

is the relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
Tutorials:
  • Tutorial: configuring-your-chart-loading-external-logos
See:

logoLoaded

This event is fired when external logo added to the chart using logoURL attribute has finished loading.

To know more about external logos, see configuring-your-chart-loading-external-logos

Parameters:
Parameter Description
logoURL
Type:
string

is the URL of the logo image.
logoAlpha
Type:
number

is the value of the alpha of the logo image.
logoPosition
Type:
string

is the position of the chart logo.
logoScale
Type:
number

is the value of scaling for logo image.
logoLink
Type:
string

is the URL linked to the logo which on clicking will be taken to the URL link.
Tutorials:
  • Tutorial: configuring-your-chart-loading-external-logos
See:

logoLoadError

This event is fired when there was an error in loading external logo added to the chart using logoURL attribute.

To know more about external logos, see configuring-your-chart-loading-external-logos

Parameters:
Parameter Description
logoURL
Type:
string

is the URL of the logo image.
logoAlpha
Type:
number

is the value of the alpha of the logo image.
logoPosition
Type:
string

is the position of the chart logo.
logoScale
Type:
number

is the value of scaling for logo image.
logoLink
Type:
string

is the URL linked to the logo which on clicking will be taken to the URL link.
error
Type:
string

is the error message.
Tutorials:
  • Tutorial: configuring-your-chart-loading-external-logos
See:

scrollStart

This event is fired when chart reaches a scroll point.

scrollEnd

This event is fired when a chart reaches end of scroll.

slicingStart

SlicingStart event is usually associated with a pie chart. In pie charts, on click a certain entity of the pie, the clicked slice is shown distinctly. The slicing start event is triggered as soon as the particular entity is clicked.

Parameters:
Parameter Description
slicedState
Type:
boolean

Indicates whether the data is sliced or not.
data
Type:
string

The plot data from the chart to slice.
dataIndex
Type:
number
The index of the data-plot in order of its definition in source dataset.

slicingEnd

SlicingEnd event is usually associated with a pie chart. In pie charts, on click a certain entity of the pie, the clicked slice is shown distinctly. The slicing start event is triggered as soon as the particular entity is clicked when the slicing is finished, the slicingEnd event is triggered.

Parameters:
Parameter Description
slicedState
Type:
boolean

Indicates whether the data is sliced or not.
data
Type:
string

The plot data from the chart to slice.
dataIndex
Type:
number
The index of the data-plot in order of its definition in source dataset.

dataRestored

For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points value can be selected for Scatter Chart and values can be changed for dragable charts by clicking and dragging the data points whose data point values can be sent to an URL by ajax POST. This event is raised when Restore button is clicked which resets all the changes that been done to the data points.

beforeDataSubmit

For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points value can be selected for Scatter Chart and values can be changed for dragable charts by clicking and dragging the data points whose data point values can be sent to an URL by ajax POST. This is the first event raised when Submit button is clicked where the current chart data is about to be sent to the set URL.

Parameters:
Parameter Description
data
Type:
string

Contains the XML string with complete chart data at it's current state.

dataSubmitError

For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points value can be selected for Scatter Chart and values can be changed for dragable charts by clicking and dragging the data points whose data point values can be sent to an URL by ajax POST. This event is raised if there is an ajax error in sending the chart XML data.

Parameters:
Parameter Description
data
Type:
string

Contains the XML string with complete chart data.
httpStatus
Type:
number

Tells the status code of the ajax POST request
statusText
Type:
string

Contains the ajax error message.
url
Type:
string

URL to which the data is sent as ajax POST request.
xhrObject
Type:
object

XMLHttpRequest object which takes care of sending the XML chart data. In case of error, this object won't be defined.

dataSubmitted

For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points value can be selected for Scatter Chart and values can be changed for dragable charts by clicking and dragging the data points whose data point values can be sent to an URL by ajax POST. This event is raised when the ajax POST request is successfully completed.

Parameters:
Parameter Description
data
Type:
string

Contains the XML string with complete chart data.
reponse
Type:
string

Contains the reponse returned by the web server to which the HTTP POST request was submitted.
url
Type:
string

URL to which the data is sent as HTTP POST request.
xhrObject
Type:
object

XMLHttpRequest object which takes care of sending the XML chart data

dataSubmitCancelled

For interative charts like Select Scatter, DragNode, Dragable Column2D and etc., data points value can be selected for Scatter Chart and values can be changed for dragable charts by clicking and dragging the data points whose data point values can be sent to an URL by ajax POST. This event is raised when preventDefault() method is called from the eventObject of FusionCharts#beforeDataSubmit event.

Parameters:
Parameter Description
data
Type:
string

Contains the XML string with complete chart data.
httpStatus
Type:
number

Tells the status code of the ajax POST request
statusText
Type:
string

Contains the ajax error message.
url
Type:
string

URL to which the data is sent as ajax POST request.
xhrObject
Type:
object

XMLHttpRequest object which takes care of sending the XML chart data. In case of error, this object won't be defined.
Example
FusionCharts.addEventListener('beforeDataSubmit', function(eventObject, parameterObject) {
  eventObject.preventDefault();
}

chartUpdated

The interactive charts charts from the FusionCharts suite fire this event when the attributes of its data plots are updated due to user interaction. For example, when any node of a dragnode chart is moved, this event us fired.

Note that when user restores any modification using the "Restore" button on these charts, the FusionCharts#event:dataRestored is fired and not this event.

Applicable charts: dragnode, dragcolumn2d, dragline, dragarea and selectscatter.

Parameters:
Parameter Description
datasetIndex
Type:
number

The index of the dataset
datasetName
Type:
string

Name of the dataset
index
Type:
number

Index of the node by the order which it was created
chartX
Type:
number

The relative X-Cordinate to chart container where the node was dropped.

Applicable to dragnode chart only.
chartY
Type:
number

The relative Y-Cordinate to chart container where the node was dropped.

Applicable to dragnode chart only.
pageX
Type:
number

Relative X-Cordinate to screen where the node was dropped

Applicable to dragnode chart only.
pageY
Type:
number

Relative X-Cordinate to screen where the node was dropped

Applicable to dragnode chart only.
id
Type:
number

Number assigned to the node

Applicable to dragnode chart only.
label
Type:
string

Label assigned to the node for identifying it and can be used to display it for toolText

Applicable to dragnode chart only.
link
Type:
string

URL linked to a node when clicked will be taken to that URL

Applicable to dragnode chart only.
radius
Type:
number

A Node's circumcircle radius if it is a polygon or simply the radius if the node's shape is a circle

Applicable to dragnode chart only.
shape
Type:
string

Shape of the node.

Applicable to dragnode chart only.
sides
Type:
number

It is the number of sides of the node if it is a polygon or 'undefined' if it is a circle.

Applicable to dragnode chart only.
toolText
Type:
string

Tooltext defined for the node.

Applicable to dragnode chart only.
x
Type:
number

The updated value of the node.

Applicable to dragnode chart only.
y
Type:
number

The updated value of the node.

Applicable to dragnode chart only.
startValue
Type:
number

The value of the plot previous to being updated.

Applicable to dragcolumn2d, dragline and dragarea charts only
endValue
Type:
number

The value of the plot after being dragged and updated.

Applicable to dragcolumn2d, dragline and dragarea charts only

nodeAdded

In DragNode charts, data points are represented as nodes whose properties like location(x,y), shape, dimensions and color can be added dynamically to the chart. Chart can contain any number of datasets and an index number is assigned to each dataset based upon order of dataset creation. This event is raised when a node is added by clicking on the menu button located at the left side bottom of the chart by default but can the menu button location can be changed.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
datasetIndex
Type:
number

Index of the dataset to which the newly added node belongs to.
datasetName
Type:
string

Name of the dataset to which the node was added. Name of the dataset can be defined by the attribute seriesName for dataset tag in the chart data.
dataIndex
Type:
number

Index of the newly added node.
height
Type:
number

Height of the shape represented by the newly added node.
id
Type:
string

ID of the newly added node which can be set using id attribute for set tag.
label
Type:
string

Text displayed inside the shape of the newly added node.
link
Type:
string

URL associated with the newly added node.
radius
Type:
number

Radius of the circumcirle for the shape of the newly added node.
shape
Type:
string

Shape of the newly added node.
sides
Type:
number

Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
toolText
Type:
string

Text that is displayed over the shape of the newly added node.
width
Type:
number

Width of the shape of the newly added node.
x
Type:
number

X Co-ordinate of the newly added node in reference with the canvas / axis.
y
Type:
number

Y Co-ordinate of the newly added node in reference with the canvas / axis.

nodeUpdated

In DragNode charts, data points are represented as nodes whose properties like location(x,y), shape, dimensions and color can be modified. Chart can contain any number of datasets and an index number is assigned to each dataset based upon order of dataset creation. This event is raised when a node is updated by long mouse click on the node and by clicking submit button.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
datasetIndex
Type:
number

Index of the dataset to which the deleted node belongs to.
datasetName
Type:
string

Name of the dataset which can defined by the attribute seriesName for dataset tag in the chart data.
height
Type:
number

Height of the shape represented by the node.
id
Type:
string

ID of the node which can be set using id attribute for set tag.
dataIndex
Type:
number

Index of the updated node.
label
Type:
string

Text displayed inside the shape of the node.
link
Type:
string

URL associated with the deleted node.
radius
Type:
number

Radius of the circumcirle for the shape of the node.
shape
Type:
string

Shape of the updated node.
sides
Type:
number

Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
toolText
Type:
string

Text that is displayed over the shape of the updated node.
width
Type:
number

Width of the shape of the updated node.
x
Type:
number

X Co-ordinate of the updated node in reference with the canvas / axis.
y
Type:
number

Y Co-ordinate of the updated node in reference with the canvas / axis.

nodeDeleted

In DragNode charts, data points are represented as nodes whose properties like location(x,y), shape, dimensions and color can be set. Chart can contain any number of datasets and an index number is assigned to each dataset based upon order of dataset creation. This event is raised when a node is deleted by long mouse click on the node and by clicking delete button.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
datasetIndex
Type:
number

Index of the dataset to which the deleted node belongs to.
datasetName
Type:
string

Name of the dataset which can defined by the attribute seriesName for dataset tag in the chart data.
height
Type:
number

Height of the shape represented by the node.
id
Type:
string

ID of the node which can be set using id attribute for set tag.
dataIndex
Type:
number

Index of the node deleted.
label
Type:
string

Text displayed inside the shape of the node.
link
Type:
string

URL associated with the deleted node.
radius
Type:
number

Radius of the circumcirle for the shape of the node.
shape
Type:
string

Shape of the deleted node.
sides
Type:
number

Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
toolText
Type:
string

Text that is displayed over the shape of the deleted node.
width
Type:
number

Width of the shape of the deleted node.
x
Type:
number

X Co-ordinate of the deleted node in reference with the canvas / axis.
y
Type:
number

Y Co-ordinate of the deleted node in reference with the canvas / axis.

connectorAdded

In DragNode charts, connector is used to link between two nodes. Connectors can be created, modified and removed. This event is fired when a connector is added.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
arrowAtEnd
Type:
boolean

True if there is an arrow at the end of the link else false.
arrowAtStart
Type:
boolean

True if there is an arrow at the start of the link else false.
fromNodeId
Type:
number

Contains the index number or the node id from which the link originated.
id
Type:
number

ID of the connector.
label
Type:
string

Text displayed for the connector that was deleted.
link
Type:
string

URL set for the connector on mouse click.
toNodeId
Type:
number

Contains the index number or the node id to which the link ends.

connectorUpdated

In DragNode charts, connector is used to link between two nodes. Connectors can be created, modified and removed. This event is fired when a connector's properties are modified.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
arrowAtEnd
Type:
boolean

True if there is an arrow at the end of the link else false.
arrowAtStart
Type:
boolean

True if there is an arrow at the start of the link else false.
fromNodeId
Type:
number

Contains the index number or the node id from which the link originated.
id
Type:
number

ID of the connector.
label
Type:
string

Text displayed for the connector that was deleted.
link
Type:
string

URL set for the connector on mouse click.
toNodeId
Type:
number

Contains the index number or the node id to which the link ends.

connectorDeleted

In a DragNode chart connectors visually link two nodes. When two nodes are linked using connectors then the connectors can be deleted by long mouse click on the connector and by clicking on Delete button.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
arrowAtEnd
Type:
boolean

true if there is an arrow at the end of the link else false.
arrowAtStart
Type:
boolean

True if there is an arrow at the start of the link else false.
fromNodeId
Type:
number

Contains the index number or the node id from which the link originated.
id
Type:
number

ID of the connector.
label
Type:
string

Text displayed for the connector that was deleted.
link
Type:
string

URL set for the connector on mouse click.
toNodeId
Type:
number

Contains the index number or the node id to which the link ends.

labelAdded

This event is fired on addding a label to a chart.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
text
Type:
string

The text in the label
x
Type:
number

x position of the label.
y
Type:
number

y position of the label.

labelDeleted

This event is fired on deleting a label of a chart.

This event is only applicable to DragNode chart.

Parameters:
Parameter Description
text
Type:
string

The text in the label
x
Type:
number

x position of the label.
y
Type:
number

y position of the label.

selectionRemoved

This event is raised when the selection of a SelectScatter chart is removed. This happens when one clicks the close button on a selection that one has made on the chart.

Parameters:
Parameter Description
data
Type:
object

This returns the subset of data that was selected.

labelClick

Applicable to dragnode chart only.

Parameters:
Parameter Description
chartX
Type:
number

x-coordinate of the pointer relative to the chart.
chartY
Type:
number

y-coordinate of the pointer relative to the chart.
pageX
Type:
number

x-coordinate of the pointer relative to the page.
pageY
Type:
number

y-coordinate of the pointer relative to the page.
x
Type:
number

The x-value of the label node scaled as per the axis of the chart.
y
Type:
number

The y-value of the label node scaled as per the axis of the chart.
text
Type:
string

The text value of the label.

labelRollOver

Applicable to dragnode chart only.

Parameters:
Parameter Description
chartX
Type:
number

x-coordinate of the pointer relative to the chart.
chartY
Type:
number

y-coordinate of the pointer relative to the chart.
pageX
Type:
number

x-coordinate of the pointer relative to the page.
pageY
Type:
number

y-coordinate of the pointer relative to the page.
x
Type:
number

The x-value of the label node scaled as per the axis of the chart.
y
Type:
number

The y-value of the label node scaled as per the axis of the chart.
text
Type:
string

The text value of the label.

labelRollOut

Applicable to dragnode chart only.

Parameters:
Parameter Description
chartX
Type:
number

x-coordinate of the pointer relative to the chart.
chartY
Type:
number

y-coordinate of the pointer relative to the chart.
pageX
Type:
number

x-coordinate of the pointer relative to the page.
pageY
Type:
number

y-coordinate of the pointer relative to the page.
x
Type:
number

The x-value of the label node scaled as per the axis of the chart.
y
Type:
number

The y-value of the label node scaled as per the axis of the chart.
text
Type:
string

The text value of the label.

labelDragStart

Applicable to dragnode chart only.

Parameters:
Parameter Description
chartX
Type:
number

x-coordinate of the pointer relative to the chart.
chartY
Type:
number

y-coordinate of the pointer relative to the chart.
pageX
Type:
number

x-coordinate of the pointer relative to the page.
pageY
Type:
number

y-coordinate of the pointer relative to the page.
x
Type:
number

The x-value of the label node scaled as per the axis of the chart.
y
Type:
number

The y-value of the label node scaled as per the axis of the chart.
text
Type:
string

The text value of the label.

labelDragEnd

Applicable to dragnode chart only.

Parameters:
Parameter Description
chartX
Type:
number

x-coordinate of the pointer relative to the chart.
chartY
Type:
number

y-coordinate of the pointer relative to the chart.
pageX
Type:
number

x-coordinate of the pointer relative to the page.
pageY
Type:
number

y-coordinate of the pointer relative to the page.
x
Type:
number

The x-value of the label node scaled as per the axis of the chart.
y
Type:
number

The y-value of the label node scaled as per the axis of the chart.
text
Type:
string

The text value of the label.

dataplotDragStart

The four dragable charts: dragnode, dragcolumn2d, dragline and dragarea fires this event when their data plots are just being dragged.

dataplotDragEnd

The four dragable charts: dragnode, dragcolumn2d, dragline and dragarea fires this event when their data plots are stopped being dragged.

alertComplete

Fusion Charts has realtime updating charts under PowerCharts XT. These charts update at realtime reflecting the data changes immediately. This data can be monitored, in order to check if the value (after update) lies within or out of a given range using the AlertManager. If it lies within a particular range of interest to the user then the Alert Manager can perform some action as directed by the user.

For example, if the real time data values cross a certain datarange, an alert can be raised to notify the user. The alertComplete event is fired when the alert is complete. When the JSON containing the data is passed to the FusionCharts object , it should have the following to structure to provide for alerts.

Example
//An Example of the JSON structure for alert
 var my-chart-data = {
        'chart': {
            'palette': '4',
            'lowerlimit': '-50',
            'upperlimit': '10',
            'numbersuffix': '° C'
            },
            'value': '-40',
            'alerts': {
            'alert': [
                {
                    'minvalue': '5',
                    'maxvalue': '9',
                    'action': 'callJS',
                    'param': 'alert('Value between 5 and 9');'
                },
                {
                    'maxvalue': '10',
                    'action': 'showAnnotation',
                    'param': 'statusRed',
                    'occuronce': '0'
                    }
            ]
        }
  };
//Once this structure is defined for the chart data, the `addEventListener` can be used to
//listen to the `alertComplete` event .

//Creating a thermometer chart.
FusionCharts.addEventListener('ready', function () {
    var chart = new FusionCharts({
        id: 'thermometer'
        type: 'thermometer',
        renderAt: 'chart-container-div',
        //The JSON as given above
        dataSource: 'my-chart-data',
        dataFormat: 'jsonurl'
        }),
        alertCount;

    //rendering the chart to the div.
    chart.render();

    //Listening to the alertComplete event
    chart.addEventListener('alertcomplete', function(){
        alertCount++;
    });

    //Feeding data to trigger an alert.
    chart.feedData(10);
});
//Refer to http://docs.fusioncharts.com/widgets/ for further infomation on alerts.

realTimeUpdateComplete

This event is fired once the real time update of the chart is complete .

Parameters:
Parameter Description
data
Type:
string

The data stream .
updateObject
Type:
object

The new data with which the chart should be updated with .
source
Type:
string

The name of the source,usually 'feedData'
url
Type:
string

url of the data source

realTimeUpdateError

This event is raised where there is an error in performing a real-time chart data update using dataStreamUrl attribute.

Parameters:
Parameter Description
source
Type:
number

Nature of data load request. Presently its value is 'XmlHttprequest'.
url
Type:
string

URL of the data source.
xmlHttpReqestObject
Type:
object

The object which has fetched data.
httpStatus
Type:
string

A number which denotes the HTTP status number when the error was raised. For example, the status will be 404 for URL not found.

chartCleared

This event is raised when the entire canvas is cleared by calling FusionCharts#clearChart or by clicking the context menu in real-time charts.

See:

zoomReset

This event is fired whenever the zoom history is cleared on a ZoomLine chart.

zoomedOut

This event is fired when user zooms out on a ZoomLine chart.

Parameters:
Parameter Description
level
Type:
number

Indicates to which zoom level the user has zoomed out to. 1 indicates that the chart has been completely zoomed out.
startIndex
Type:
number

The data start index that is in view for the zoomed out level
startLabel
Type:
string

The label of the data of the starting item in view.
endIndex
Type:
number

The data end index that is in view for the zoomed out level
endLabel
Type:
string

The label of the data of the last item in view.

zoomedIn

This event is fired when user zooms in on a ZoomLine chart.

Parameters:
Parameter Description
level
Type:
number

Indicates to which zoom level the user has zoomed out to. 1 indicates that the chart has been completely zoomed out. It increments as user zooms in further.
startIndex
Type:
number

The data start index that is in view for the zoomed in level
startLabel
Type:
string

The label of the data of the starting item in view.
endIndex
Type:
number

The data end index that is in view for the zoomed in level
endLabel
Type:
string

The label of the data of the last item in view.

zoomed

This event is fired when user either zooms in or zooms out on a ZoomLine chart.

Parameters:
Parameter Description
level
Type:
number

Indicates to which zoom level the user has zoomed to. 1 indicates that the chart has been completely zoomed out. It increments as user zooms in further and decrements when user zooms out.
startIndex
Type:
number

The data start index that is in view for the zoomed level
startLabel
Type:
string

The label of the data of the starting item in view.
endIndex
Type:
number

The data end index that is in view for the zoomed level
endLabel
Type:
string

The label of the data of the last item in view.

zoomModeChanged

This event is fired when user toggles between zoom and pin mode of a zoomline chart.

Parameters:
Parameter Description
pinModeActive
Type:
boolean

true indicates that post the mode change, pin mode is active.

pinned

This event is fired when user switches to pin mode on zoomline chart and then performs a selection on the data plot to "pin" a range.

Parameters:
Parameter Description
startIndex
Type:
number

The data start index of the pinned range.
startLabel
Type:
string

The label of the data of the starting item of the pinned range.
endIndex
Type:
number

The data end index that is in view of the pinned range.
endLabel
Type:
string

The label of the data of the last item of the pinned range.

beforeExport

This event is fired before the exporting process of the chart is triggered. This may happen when user clicks the export context menu on the chart or when programmatically FusionCharts#exportChart is called.

Parameters:
Parameter Description
bgcolor
Type:
string

The background color of the exported chart.
exportaction
Type:
string

Specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server. Possible values are save/download
exportatclient
Type:
boolean

Whether to use client side export handlers (the value would be 1), or server side export handlers (the value would be 0).
exportfilename
Type:
string

This attribute specifies the name (excluding the extension) of the file to be exported.
exportformat
Type:
string

The format in which the chart is exported. jpg, png, pdf`.
exporthandler
Type:
string

This refers to the path of the server-side export handler
exportparameters
Type:
string

Additional parameters sent by the chart when defined on the chart data using the exportParameters chart attribute.
exporttargetwindow
Type:
string

In case of server-side exporting and when using download as action, this shows whether the return image/PDF would open in same window (as an attachment for download), or whether it will open in a new window. NOTE: Thus is only available for server side export.
Tutorials:
  • Tutorial: interactivity-export-to-image-or-pdf
See:

exported

This event is fired if the chart has been successfully exported, i.e., this event is fired only when value of exportAction is save. The export could be triggered by clicking on context menu or by calling the FusionCharts#exportChart function.

Parameters:
Parameter Description
DOMId
Type:
string

ID of the chart that has been exported
statusCode
Type:
string

Indicated the success status of the export process. In case of failure the value is passed as 0. On success, 1 is provided
statusMessage
Type:
string

Success or failure message
fileName
Type:
string

The name and path of the file where the exported file has been saved.
width
Type:
string

The width of the chart
height
Type:
string

The height of the chart
Tutorials:
  • Tutorial: interactivity-export-to-image-or-pdf
See:

exportCancelled

This event is fired when chart export is cancelled by calling eventObject.preventDefault() during the FusionCharts#event:beforeExport.

Tutorials:
  • Tutorial: interactivity-export-to-image-or-pdf
See:

beforePrint

This event is fired before printing has started after calling FusionCharts#print on a chart. The FusionCharts#print method is used to print individual charts on a page.

See:

printComplete

This event is fired after user accepts or cancels the browser's print dialog box that was originally triggered by calling FusionCharts#print on the chart. The FusionCharts#print method is used to print individual charts on a page.

See:

printCancelled

This event is fired when the printing request from a chart has been programmatically cancelled by calling eventObject.preventDefault() from the FusionCharts#events:beforePrint event.

Note that this event is not fired when user clicks on the "cancel" button of the browser-triggered print dialog box resulting from calling the FusionCharts#print function.

See:

ready

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 FusionCharts library is included in the page when the DOMContentLoaded event is already fired (i.e. script is loaded asyncronously using AJAX or by using script deferring methods,) the ready event is still fired to ensure integrity of all the listeners.

In many ways the nature of this event is similar to jQuery(document).ready of jQuery library and Ext.onReady function of ExtJS library. One should interact with the FusionCharts framework (i.e. create new charts, set options, etc) only after this event has been fired. This event also helps you to neatly write your codes in separate script files and in page <head> thus keeping scripts from being part of your page <body>.

An alternate (and shorthand) to subscribing the ready event is to use the FusionCharts.ready function. One advantage that FusionCharts.ready function has over this ready event is that the ready event is fired only once during the life-cycle of a page while functions passed to the FusionCharts.ready function is executed even when attached after the ready event has been fired.

This is a framework level event and as such can be only listened via FusionCharts.addEventLsitener on the FusionCharts class alone. It will not be fired if subscribed from individual chart instances.

Parameters:
Parameter Description
version
Type:
array

The FusionCharts framework version is returned in form of an array. This is equivalent to the array FusionCharts.version
now
Type:
boolean

This indicates whether this event was fired at the instant of window.ondomcontentloaded event (or window.onload of older browsers) or whether the window was already loaded and this event is fired just to maintain integrity.
Since:
  • 3.4.0
Example
<html>
<head>
<script type="text/javascript" src="/fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript">
// Render a chart within a chart container `div` element.
FusionCharts.addEventListener('ready', function () {
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container-div',
        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Quarterly sales summary",
                numberPrefix: "$"
            }
            data: [
                { label: "Q1", value: "213345"},
                { label: "Q2", value: "192672"},
                { label: "Q3", value: "201238"},
                { label: "Q4", value: "209881"},
            ]
        }
    });
    // Since we are in the `ready` block, the `chart-container-div`
    // element should be available by now.
    chart.render();
});
</script>
<body>
    <div id="chart-container-div">Chart loads here...</div>
</body>
</html>

legendPointerDragStart

This event is fired when the legend denotes a gradient legend. For heatmap chart and maps. This is event is fired when the legend pointer drag is started.

Parameters:
Parameter Description
pointerIndex
Type:
number

Indicates whether the index is 0 or 1.
pointers
Type:
object

It is an object containing the scale start value and scale end value.
legendPointerHeight
Type:
number

It is the legend pointer height in pixels or percent.
legendPointerWidth
Type:
number

It is the legend pointer width in pixels or percent.

legendPointerDragStop

This event is fired when the legend Pointer Drag is stopped.

Parameters:
Parameter Description
pointerIndex
Type:
number

Indicates whether the index is 0 or 1.
pointers
Type:
object

Its an object containing the scale start value and the scale end value.
legendPointerHeight
Type:
number

It is the legend pointer height in pixels or percentage.
legendPointerWidth
Type:
number

It is the legend pointer width in pixels or percentage.

legendRangeUpdated

This is event is fired if there is any change in scale.

Parameters:
Parameter Description
previousMinValue
Type:
number

Indicates the previous minimum value.
previousMaxValue
Type:
number

Indicates the previous maximum value.
minValue
Type:
number

Indicates the scale start value.
maxValue
Type:
number

Indicates the scale end value.

legendItemClicked

This event is fired when user clicks on individual legend items. By default, the legend items on a chart are configured to toggle the visibility of the dataset (series) that the legend item points to.

Parameters:
Parameter Description
minRange
Type:
number

Minimum value of the color range represented by the legend item.
maxRange
Type:
number

Maximum value of the color range represented by the legend item.
See:

legendItemRollover

This event is fired when the mouse pointer is moved over any individual legend item.

Parameters:
Parameter Description
chartX
Type:
number

The relative X-Cordinate to chart container where the legend item was hovered.
chartY
Type:
number

The relative Y-Cordinate to chart container where the legend item was hovered
datasetIndex
Type:
number

The index of the dataset
datasetName
Type:
string

The name of the dataset
id
Type:
string

User-defined Id of the dataset.
pageX
Type:
number

The relative X-Cordinate to screen where the legend item was hovered.
pageY
Type:
number

The relative Y-Cordinate to screen where the legend item was hovered.
visible
Type:
boolean

true if the legend item is visible in the chart or false if it is hidden.
See:

legendItemRollout

This event is fired when the mouse is hovered out of the chart's legend item.

Parameters:
Parameter Description
chartX
Type:
number

The relative X-Cordinate to chart container where the mouse is hovered out of legend item.
chartY
Type:
number

The relative Y-Cordinate to chart container where the mouse is hovered out of legend item.
datasetIndex
Type:
number

The index of the dataset.
datasetName
Type:
string

The name of the dataset.
id
Type:
string

User-defined Id of the dataset.
pageX
Type:
number

The relative X-Cordinate to screen where the mouse is hovered out of legend item.
pageY
Type:
number

The relative Y-Cordinate to screen where the mouse is hovered out of legend item.
visible
Type:
boolean

true if the legend item is visible in the chart or false if it is hidden.
See:

beforeLinkedItemOpen

This event is fired when a linked item in a LinkedChart is about to open after its parent link has been clicked. This event is raised before instantiating the the instance of the drill-down chart. To know more about LinkedCharts, see Creating and Configuring Linkedcharts.

You can cancel the drill-down process using eventObject.preventDefault() during this event.

Parameters:
Parameter Description
level
Type:
string

Level of the linked item with respect to the parent chart (starts from '0').
See:

linkedItemOpened

Linked charts have data plot items, clicking on which a linked chart is opened. The data of the child linked charts is given along with the data to the parent chart. This event is fired once the child linked chart is rendered.

Any action to be performed after opening the linked chart can accomplished using this event.

The parameter of this event,level, indicates the depth of the closed linked chart from the parent chart.

Parameters:
Parameter Description
item
Type:
object

The JavaScript object instance of the LinkedChart that is opened
level
Type:
string

Level (as number) of the LinkedChart.
Tutorials:
See:

beforeLinkedItemClose

Upon clicking the dataplot items (columns, pie etc.) of the linked charts, users can drill down into child linked charts. The user can navigate back to the parent chart by clicking on the back button. Before re-opening the parent chart, the child linked item is closed.

This event is fired just before closing a linked chart. Any action to be done before closing the linked chart can be accomplished with this event.

A parent chart can have multiple linked charts. These child linked charts might have linked charts of their own. The parameter of this event,level, indicates the depth of the closed linked chart from the parent chart. The level of the linked item starts from 0.

Parameters:
Parameter Description
item
Type:
object

The JavaScript object instance of the LinkedChart that is opened
level
Type:
string

Level (as number) of the LinkedChart.
See:

linkedItemClosed

Upon clicking the dataplot items (columns, pie etc.) of the linked charts, users can drill down into child linked charts. The user can navigate back to the parent chart by clicking on the back button. Before re-opening the parent chart, the child linked item is closed.

Once the child linked chart is closed,this event is fired.

A parent chart can have multiple linked charts. These child linked charts might have linked charts of their own. The parameter of this event,level, indicates the depth of the closed linked chart from the parent chart.

The level of the linked item starts from 0.

Parameters:
Parameter Description
level
Type:
string

Level of the linked item which starts from '0'.
See:

entityRollOut

A map might contain entities marked by concrete boundaries. For example, the India map has 28 states, each state can be marked as an entity . Every entity has an id by which it is referred to in the JS file. The user can assign an in autonomous id's to the entity or use the original Id.

The entityRollOut event is fired when the pointer is rolled outside of an entity.

Parameters:
Parameter Description
value
Type:
number

The value of the entity.
label
Type:
string

The label of the entity.
shortLabel
Type:
string

Short label used by the user.
originalId
Type:
string

The ID of the entity stored in the map definition file.
id
Type:
string

This could be the original ID or the ID assigned by the user.
See:

entityRollOver

A map might contain entities marked by concrete boundaries. For example, the India map has 28 states, each state can be marked as an entity . Every entity has an id by which it is referred to in the map definition file. The user can assign an in autonomous id's to the entity or use the original Id.

The entityRollOver event is fired when the pointer is rolled over an entity. This event is followed either by the FusionCharts#event:entityClick event or the FusionCharts#event:entityRollOut event.

Parameters:
Parameter Description
value
Type:
number

The value of the entity.
label
Type:
string

The label of the entity.
shortLabel
Type:
string

Short label used by the user.
originalId
Type:
string

The ID of the entity stored in the map definition file.
id
Type:
string

This could be the original ID or the ID assigned by the user.
See:

entityClick

A map contains entities marked by concrete boundaries. For example, the India map has 28 states, each state can be marked as an entity. Every entity has an id by which it is referred to in the JS file . The user can assign an Id of choice to the entity or use the original ID of the entity. The entityClick event is fired when an entity is clicked.

The user can used this event to perform an action on clicking the entity. This event is usually preceded by the the FusionCharts#event:entityRollOver event.

Parameters:
Parameter Description
value
Type:
number

The value of the entity.
label
Type:
string

The label of the entity.
shortLabel
Type:
string

Short label used by the user.
originalId
Type:
string

The ID of the entity stored in the JS file.
id
Type:
string

This could be the original ID or the ID assigned by the user.
See:
Example
FusionCharts.ready(function () {
    var map = new FusionCharts({
        type: 'maps/world',
        renderAt: 'map-container-div',

        events: {
            entityClick: function (event, args) {
                console.log(args.label + 'clicked');
            }
        }
    });
});

connectorRollOver

In maps, markers are used to denote important or essential locations. We might encounter situations where we will need to connect markers to make the information more lucid. Connectors are used to connect markers. The connectorRollOver event is fired when the pointer is rolled over the connector.

Parameters:
Parameter Description
fromMarkerId
Type:
string

The Id of the marker from which the connector starts.
toMarkerId
Type:
string

The Id of the marker to which the connector is drawn.
label
Type:
label

The label on the connector.

connectorRollOut

In maps, markers are used to denote important or essential locations. We might encounter situations where we will need to connect markers to make the information more lucid. Connectors are used to connect markers. The connectorRollOut event is fired when the pointer is rolled out of the connector. The FusionCharts#event:connectorRollOver event precedes this event.

Parameters:
Parameter Description
fromMarkerId
Type:
string

The Id of the marker from which the connector starts.
toMarkerId
Type:
string

The Id of the marker to which the connector is drawn.
label
Type:
label

The label on the connector.
See:

markerRollOver

Markers are used to denote important or essential points in a map. e.g In an India map , markers might be used to denote capitals of the different states. The markerRollOver event is fired when the pointer is rolled over a marker.

Parameters:
Parameter Description
x
Type:
number

The original X co-ordinate of the marker.
y
Type:
number

The original Y co-ordinate of the marker.
scaledX
Type:
number

The scaled value of X co-ordinate of the marker.
scaledY
Type:
number

The scaled value of Y co-ordinate of the marker.
chartX
Type:
number

The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
chartY
Type:
number

The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
label
Type:
string

The label of the marker.
Example
//declaring the FusionCharts object.
var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
//passing the data to the object in *XML* format.
myMap.setXMLUrl("Data.xml");
//rendering the chart in the map container.
myMap.render("mapContainer");

//the function which gets executed when the MarkerRollOver event is captured.
function myChartListener(eventObject, argumentsObject){
    alert([
        "ID: ", argumentsObject.id, "; Label: ", argumentsObject.label,
        "; x: ", argumentsObject.x, ", y: ", argumentsObject.x,
        "; scaledX: ", argumentsObject.scaledX, ", scaledY: ", argumentsObject.scaledY,
        "; chartX: ", argumentsObject.chartX, ", chartY: ", argumentsObject.chartY
    ].join(""));
}

//listening to the markerRollOver event.
FusionCharts("myMapId").addEventListener ("markerRollOver" , myChartListener );

markerRollOut

Markers are used to denote important or essential points in a map. e.g In an India map , markers might be used to denote capitals of the different states. The markerRollOut event is fired when the pointer is rolled out of a marker. This event is usually preceded by the FusionCharts#markerRollOver or the FusionCharts#markerClicked event.

Parameters:
Parameter Description
x
Type:
number

The original X co-ordinate of the marker.
y
Type:
number

The original Y co-ordinate of the marker.
scaledX
Type:
number

The scaled value of X co-ordinate of the marker.
scaledY
Type:
number

The scaled value of Y co-ordinate of the marker.
chartX
Type:
number

The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
chartY
Type:
number

The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
label
Type:
string

The label of the marker.
Example
//declaring the Fusion Charts object.
var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
//passing the data to the object in *XML* format.
myMap.setXMLUrl("Data.xml");
//rendering the chart in the map container.
myMap.render("mapContainer");

//the function which gets executed when the MarkerRollOut event is captured.
function myChartListener(eventObject, argumentsObject){
    alert([
        "ID: ", argumentsObject.id, "; Label: ", argumentsObject.label,
        "; x: ", argumentsObject.x, ", y: ", argumentsObject.x,
        "; scaledX: ", argumentsObject.scaledX, ", scaledY: ", argumentsObject.scaledY,
        "; chartX: ", argumentsObject.chartX, ", chartY: ", argumentsObject.chartY
    ].join(""));
}

//listening to the markerRollOut event.
FusionCharts("myMapId").addEventListener ("markerRollOut" , myChartListener );

markerClick

Markers are used to denote important or essential points in a map. e.g In an India map , markers might be used to denote capitals of the different states. The markerClick event is fired when a marker is clicked. This event is usually preceded by the FusionCharts#event:markerRollOver event.

By listening to this event , the user can retrieve the position of the marker and the label associated with it.

Parameters:
Parameter Description
x
Type:
number

The original X co-ordinate of the marker.
y
Type:
number

The original Y co-ordinate of the marker.
scaledX
Type:
number

The scaled value of X co-ordinate of the marker.
scaledY
Type:
number

The scaled value of Y co-ordinate of the marker.
chartX
Type:
number

The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
chartY
Type:
number

The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
label
Type:
string

The label of the marker.
Example
//declaring the Fusion Charts object.
var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
//passing the data to the object in *XML* format.
myMap.setXMLUrl("Data.xml");
//rendering the chart in the map container.
myMap.render("mapContainer");

//the function which gets executed when the MarkerClick event is captured.
function myChartListener(eventObject, argumentsObject){
    alert([
        "ID: ", argumentsObject.id, "; Label: ", argumentsObject.label,
        "; x: ", argumentsObject.x, ", y: ", argumentsObject.x,
        "; scaledX: ", argumentsObject.scaledX, ", scaledY: ", argumentsObject.scaledY,
        "; chartX: ", argumentsObject.chartX, ", chartY: ", argumentsObject.chartY
    ].join(""));
}

//listening to the markerClicked event.
FusionCharts("myMapId").addEventListener ("markerClicked" , myChartListener );

printReadyStateChange

This event is raised to notify the status of Print Manager. It is raised twice. First, when Print Manager starts processing all charts. It is raised again when all the charts are ready for managed print.

Parameters:
Parameter Description
ready
Type:
boolean

This is the ready flag.
bypass
Type:
boolean

This is the bypass flag.
Deprecated:
  • Since 3.4 onwards, flash renderer is not part of the suite.

    dataplotRollOver

    Parameters:
    Parameter Description
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    datasetIndex
    Type:
    number

    The position of the dataset in order of its definition in source data.
    datasetName
    Type:
    string

    The seriesName of the dataset.
    dataIndex
    Type:
    number

    The position of the data-plot in order of its definition in source dataset.
    dataValue
    Type:
    number

    The value of the data-plot that trigerred this event
    displayValue
    Type:
    string

    The displayValue attribute that has been set for the data-plot.
    categoryLabel
    Type:
    string

    The x-axis label that corresponds to the data-plot
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the data-plot

    dataplotRollOut

    Parameters:
    Parameter Description
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    datasetIndex
    Type:
    number

    The position of the dataset in order of its definition in source data.
    datasetName
    Type:
    string

    The seriesName of the dataset.
    dataIndex
    Type:
    number

    The position of the data-plot in order of its definition in source dataset.
    dataValue
    Type:
    number

    The value of the data-plot that trigerred this event
    displayValue
    Type:
    string

    The displayValue attribute that has been set for the data-plot.
    categoryLabel
    Type:
    string

    The x-axis label that corresponds to the data-plot
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the data-plot

    dataplotClick

    Parameters:
    Parameter Description
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    datasetIndex
    Type:
    number

    The position of the dataset in order of its definition in source data.
    datasetName
    Type:
    string

    The seriesName of the dataset.
    dataIndex
    Type:
    number

    The position of the data-plot in order of its definition in source dataset.
    dataValue
    Type:
    number

    The value of the data-plot that trigerred this event
    displayValue
    Type:
    string

    The displayValue attribute that has been set for the data-plot.
    categoryLabel
    Type:
    string

    The x-axis label that corresponds to the data-plot
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the data-plot

    processClick

    In Gantt chart, process element represents one process on the Gantt chart. You can show team members, projects or task list as a process - there's no restriction to that. This event is fired when a process is clicked

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the process label.
    vAlign
    Type:
    string

    The vertical alignment of the process label.
    id
    Type:
    string

    The id of the process.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the process on mouse click.
    label
    Type:
    string

    The label in the process
    isHeader
    Type:
    boolean

    Specifies whether the event target is a process or process-header.
    See:

    processRollOver

    In Gantt chart, process element represents one process on the Gantt chart. You can show team members, projects or task list as a process - there's no restriction to that. This event is fired when the pointer moves over a process

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the process label.
    vAlign
    Type:
    string

    The vertical alignment of the process label.
    id
    Type:
    string

    The id of the process.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the process on mouse click.
    label
    Type:
    string

    The label in the process.
    isHeader
    Type:
    boolean

    Specifies whether the event target is a process or process-header.
    See:

    processRollOut

    In Gantt chart, process element represents one process on the Gantt chart. You can show team members, projects or task list as a process - there's no restriction to that. This event is fired when the pointer moves out of a process

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the process label.
    vAlign
    Type:
    string

    The vertical alignment of the process label.
    id
    Type:
    string

    The id of the process.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the process on mouse click.
    label
    Type:
    string

    The label in the process
    isHeader
    Type:
    boolean

    Specifies whether the event target is a process or process-header.
    See:

    categoryClick

    In Gantt chart, category element distributes the time line into visual divisions This event is fired when a category is clicked.

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the category label.
    vAlign
    Type:
    string

    The vertical alignment of the category label.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the category on mouse click.
    text
    Type:
    string

    The label in the category
    See:

    categoryRollOver

    In Gantt chart, category element distributes the time line into visual divisions This event is fired when the pointer moves over a category.

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the category label.
    vAlign
    Type:
    string

    The vertical alignment of the category label.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the category on mouse click.
    text
    Type:
    string

    The label in the category
    See:

    categoryRollOut

    In Gantt chart, category element distributes the time line into visual divisions This event is fired when the pointer moves out of a category.

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    align
    Type:
    string

    The alignment of the category label.
    vAlign
    Type:
    string

    The vertical alignment of the category label.
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    link
    Type:
    string

    URL set for the category on mouse click.
    text
    Type:
    string

    The label in the category
    See:

    milestoneClick

    In Gantt chart, milestones are an important part of the chart as they allow you to visually depict any crucial dates on the chart. This event is fired when a milestone is clicked

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    date
    Type:
    string

    The date of the milestone.
    numSides
    Type:
    string

    The number of sides of the milestone.
    radius
    Type:
    string

    The radius of the milestone.
    taskId
    Type:
    string

    The id of the task to which this milestone relates to.
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the milestone
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    See:

    milestoneRollOver

    In Gantt chart, milestones are an important part of the chart as they allow you to visually depict any crucial dates on the chart. This event is fired when the pointer moves over a milestone

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    date
    Type:
    string

    The date of the milestone.
    numSides
    Type:
    string

    The number of sides of the milestone.
    radius
    Type:
    string

    The radius of the milestone.
    taskId
    Type:
    string

    The id of the task to which this milestone relates to.
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the milestone
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    See:

    milestoneRollOut

    In Gantt chart, milestones are an important part of the chart as they allow you to visually depict any crucial dates on the chart. This event is fired when the pointer moves out of a milestone

    This event is only applicable to Gantt chart.

    Parameters:
    Parameter Description
    date
    Type:
    string

    The date of the milestone.
    numSides
    Type:
    string

    The number of sides of the milestone.
    radius
    Type:
    string

    The radius of the milestone.
    taskId
    Type:
    string

    The id of the task to which this milestone relates to.
    toolText
    Type:
    string

    The tooltext that is displayed when hovered over the milestone
    chartX
    Type:
    number

    x-coordinate of the pointer relative to the chart.
    chartY
    Type:
    number

    y-coordinate of the pointer relative to the chart.
    pageX
    Type:
    number

    x-coordinate of the pointer relative to the page.
    pageY
    Type:
    number

    y-coordinate of the pointer relative to the page.
    See:

    overlayButtonClick

    On clicking the data plot items of a parent chart, the associated linked chart is opened. To go back to the parent chart, the overlay back button is used. OverlayButtonClick is fired when the overlay back button of the linked chart is clicked. This will close the child linked chart and reload the parent chart.

    Parameters:
    Parameter Description
    id
    Type:
    string

    Id of the button
    show
    Type:
    boolean

    True if we want to show the overlay button in the parent chart. False if we want to disable the overlay button.

    loaded

    The loaded event is raised when the chart has finished downloading itself in the client environment. This event indicates that the all the resources required to render the chart are ready and the chart can be drawn. You can use this event to hide any loader components that you might have on your page.

    Parameters:
    Parameter Description
    type
    Type:
    string

    This is the type of chart that is being rendered.

    rendered

    This event is fired when the chart completes drawing after FusionCharts#render is called. If the data provided to the chart is appropriate, the chart would be rendered. Otherwise it will show a message from the list FusionCharts~chartMessages depending on the error.

    This call is made only once (even if new data is supplied to it). It can be used to invoke any further JavaScript methods on the chart or change the data of chart.

    If chart animation is enabled, this event is fired before the animation process is triggered. In case you need to perform any action after animation has completed, you will need to add appropriate time delay in this event handler using setTimeout. The default animation duration is 1000ms (1 second). The animation duration can be customized using animationDuration chart attribute.

    See:

    drawComplete

    This event is fired whenever an entire redraw of the chart is caused by data update, change of chart message, change of chart type or resize.

    Parameters:
    Parameter Description
    drawCount
    Type:
    number

    Number specifying the number of times the chart is (re)drawn.
    drawLatency
    Type:
    number

    Number specifying the draw latency.
    height
    Type:
    number

    Height of the chart object in pixels or percent.
    width
    Type:
    number

    Width of the chart object in pixels or percent.

    renderComplete

    This event is fired every-time a chart is rendered either by FusionCharts#render, FusionCharts#chartType or FusionCharts#setChartData. So, this event is fired any time .render() is called on the chart or the chart data is successfully updated, triggering a re-render internally.

    This event is not fired when chart is resized.

    The difference between this event and FusionCharts#event:rendered event is that FusionCharts#event:rendered is fired only when .render() is called.

    renderComplete is not always preceded by FusionCharts#event:beforeRender. It is triggered even without firing FusionCharts#event:beforeRender during data update.

    If chart animation is enabled, this event is fired before the animation process is triggered. In case you need to perform any action after animation has completed, you will need to add appropriate time delay in this event handler using setTimeout. The default animation duration is 1000ms (1 second). The animation duration can be customized using animationDuration chart attribute.

    See:

    dataInvalid

    When a chart attempts to render, it fetches data that has been set on it. In case no data was provided prior to rendering, or in case the data provided had errors in parsing or fetching from server, this event is raised.

    Maps, realtime charts and some gauges do not require initial data to begin with. Those charts will not raise this event if no data was set.

    Parameters:
    Parameter Description
    error
    Type:
    Error

    The error that caused the rendering to stop.
    Since:
    • 3.4.0

    dataXMLInvalid

    DataXMLInvalid is fired if the data passed either by url or string to the chart object is not in an usable format.

    Deprecated:
    • Since 3.4. Use alternative 'dataInvalid' event.

      dataLoaded

      Before a chart is rendered, the data needs to be loaded to plot the data on the chart. dataLoaded event is fired after the data passed either by url or string is loaded to the chart object. This event assures that the data passed is valid (empty data is valid data) and the chart can now be rendered. It can be used to further process data in any other components in your page.

      noDataToDisplay

      Before rendering a chart into a container, the data has to be loaded. In case the dataSource of the chart is empty or has no data, then the noDataToDisplay event is fired. It can be used to show an error message to user, or to take a corrective measure.

      connectorClick

      In maps, markers are used to denote important or essential locations. We might encounter situations where we will need to connect markers to make the information more lucid. Connectors are used to connect markers. The connectClick event is fired when a connector is clicked. It is preceded by the FusionCharts#event:connectorRollOver event.

      Parameters:
      Parameter Description
      fromMarkerId
      Type:
      string

      The Id of the marker from which the connector starts.
      toMarkerId
      Type:
      string

      The Id of the marker to which the connector is drawn.
      label
      Type:
      label

      The label on the connector.
      Example
          //declaring the fusioncharts object.
    var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
    //setting the data source.
    myMap.setXMLUrl("Data.xml");
    //rendering the chart in the associated Div.
    myMap.render("mapContainer");

    //function to perform the necessary action on capturing the connectorClicked event.
    //alert the user with the from and to marker id's.
    function listenerEvent(eventObject, argumentsObject){
        alert( "From marker ID: "+ argumentsObject.fromMarkerId + ",
                        To marker ID: " + argumentsObject.toMarkerId);
    }

    //listening to the connector click event
    FusionCharts("myMapId").addEventListener ("connectorClicked" , listenerEvent );

      selectionStart

      Raised when user starts to draw a selection box on a selectScatter chart.

      Parameters:
      Parameter Description
      chartX
      Type:
      number

      The x-coordinate of the mouse with respect to the chart.
      chartY
      Type:
      number

      The y-coordinate of the mouse with respect to the chart.
      pageX
      Type:
      number

      The x-coordinate of the mouse with respect to the page.
      pageY
      Type:
      number

      The y-coordinate of the mouse with respect to the page.
      startXValue
      Type:
      number

      The value on the canvas x-axis where the selection started.
      startYValue
      Type:
      number

      The value on the canvas y-axis where the selection started.

      selectionEnd

      Raised when user completes a selection box on a selectScatter chart.

      Parameters:
      Parameter Description
      chartX
      Type:
      number

      The x-coordinate of the mouse with respect to the chart.
      chartY
      Type:
      number

      The y-coordinate of the mouse with respect to the chart.
      pageX
      Type:
      number

      The x-coordinate of the mouse with respect to the page.
      pageY
      Type:
      number

      The y-coordinate of the mouse with respect to the page.
      startXValue
      Type:
      number

      The value on the canvas x-axis where the selection started.
      startYValue
      Type:
      number

      The value on the canvas y-axis where the selection started.
      endXValue
      Type:
      number

      The value on the canvas x-axis where the selection ended.
      endYValue
      Type:
      number

      The value on the canvas y-axis where the selection ended.
      selectionLeft
      Type:
      number

      The x-coordinate from where selection started with respect to the chart.
      selectionTop
      Type:
      number

      The y-coordinate from where selection started with respect to the chart.
      selectionWidth
      Type:
      number

      The width of the selection in pixels.
      selectionHeight
      Type:
      number

      The height of the selection box in pixels.

      dataLabelClick

      Data-labels refer to the x-axis labels of the data This event is fired when a datalabel is clicked.

      This event is applicable to the chart where data labels are present.

      Parameters:
      Parameter Description
      text
      Type:
      string

      The data label in the axis
      See:

      dataLabelRollOver

      Data-labels refer to the x-axis labels of the data This event is fired when the pointer moves over a datalabel.

      This event is applicable to the chart where data labels are present.

      Parameters:
      Parameter Description
      text
      Type:
      string

      The data label in the axis
      See:

      dataLabelRollOut

      Data-labels refer to the x-axis labels of the data This event is fired when the pointer moves out of a datalabel.

      This event is applicable to the chart where data labels are present.

      Parameters:
      Parameter Description
      text
      Type:
      string

      The data label in the axis
      See:

      dataLoadRequestCompleted

      Sometimes, the data to the Fusion charts object is loaded from a URL instead of a static file(XML or JSON) on the client environment. The FusionCharts#event:dataLoadRequested event is fired when the data is to be loaded from a url. Once the data is successfully loaded form the url, the dataLoadRequestCompleted event is fired.

      The arguments object of this event contains the :

      • URL from which the data is loaded.
      • Data loaded to the Fusion Charts object.
      • DataFormat fo the data loaded from the URL.
      Parameters:
      Parameter Description
      url
      Type:
      string

      The Url of the data source from where the data was fetched.
      dataSource
      Type:
      string

      The content of the dataSource as fetched from the url.
      dataFormat
      Type:
      FusionCharts~dataFormats

      Type of data format that was provided to be expected from the dataSource.

      dataLoadError

      The dataLoadError event is raised when there is an error loading data to the chart object from the specified URL. It informs the user of:

      • the URL from which the data could not be fetched.
      • the dataFormat of the dataSource.
      • the error object which is useful for debugging purposes.
      • the httpStatus to identify the server communication issues.

      This information can be used to show an error message to the user or to take a corrective measure so that the data is loaded successfully.

      This event is raised only when a JSON or XML URL is passed to the dataSource parameter.

      Parameters:
      Parameter Description
      url
      Type:
      string

      The Url that could not be successfully loaded.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The format of the data that was expected from the Url.
      error
      Type:
      string

      In case any aspect of loading data results in a JavaScript error, the error object is passed on to this event for debugging purposes.
      httpStatus
      Type:
      number

      In case of an error, this parameter is useful to identify server communication issues - such as 404 status returned when the url provided is not found.

      dataLoadCancelled

      When the default action of FusionCharts#event:dataLoadRequested event is cancelled using eventObject.preventDefault(), this event is raised. Subsequently, the associated AJAX requests are aborted.

      Parameters:
      Parameter Description
      url
      Type:
      string

      Url of the requested data source.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The data format that was specified to be expected from the contents of the url.

      dataLoadRequestCancelled

      This event is raised when the data load process is cancelled by calling the eventObject.preventDefault() of FusionCharts#event:dataLoadRequested event. In cases where the data source is a local path or if the URL fails internal security checks, the dataLoadRequestCancelled event is internally fired.

      Parameters:
      Parameter Description
      url
      Type:
      string

      URL of the data source.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The data format that was specified to be expected from the contents of the url.

      dataUpdated

      On updating the data of a chart, the chart is re-drawn. The FusionCharts#event:drawCompleteEvent gets fired as soon the necessary elements of the chart are re-drawn.This event is followed by the dataUpdated event which is raised when the data is loaded into FusionCharts JavaScript class and is ready to be passed to the chart to maintain integrity and timing of related codes.

      Parameters:
      Parameter Description
      data
      Type:
      string or object

      The data in one of the formats as in FusionCharts~dataFormats, that has been passed on to the chart.
      format
      Type:
      FusionCharts~dataFormats

      The format in which the data has been finally passed on to the chart. It is not that the original format in which data has been provided will be the final format passed on to the data. For instance, JavaScript variant of chart when renderer (as can be retrieved from FusionCharts.getCurrentRenderer) is javascript, the data format is JSON.
      dataSource
      Type:
      string

      The original/source data as specified using data setter functions such as FusionCharts#setChartData.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The data format of the original/source data.
      error
      Type:
      string

      During the process of fetching and updating data, if there was any error, the same is passed on for debug purposes.

      dataUpdateCancelled

      Cancelling the default behavior of FusionCharts#event:beforeDataUpdate causes the dataUpdateCancelled event to be raised .This event can used to notify the user that the update of data was cancelled.

      Parameters:
      Parameter Description
      data
      Type:
      string or object

      The data in one of the formats as in FusionCharts~dataFormats, that was supposed to be passed on to the chart.
      format
      Type:
      FusionCharts~dataFormats

      The format in which the data was to be passed on for rendering.
      dataSource
      Type:
      string

      The original/source data as specified using data setter functions such as FusionCharts#setChartData.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The data format of the original/source data.
      error
      Type:
      string

      During the process of fetching and cancellation of data, if there was any error, the same is passed on for debug purposes.

      dataLoadRequested

      If the chart loads data from a URL instead of a static file(XML or JSON) on the system, then the dataLoadRequested event is fired before the data is loaded to the Fusion Charts class object.

      This event can be used to obtain the data source name, the data format, the url,

      Parameters:
      Parameter Description
      source
      Type:
      string

      Nature of data load request. Presently its value is "XmlHttpRequest"
      url
      Type:
      string

      URL of the data source
      dataFormat
      Type:
      FusionCharts~dataFormats

      Type of Data format. It can be either xml or json
      silent
      Type:
      boolean

      Save the silent instruction to arguments.
      callback
      Type:
      function

      This the callback function called once the event is fired.

      beforeDataUpdate

      This event is raised before data provided by user is made ready to be passed on to the chart. This is a very useful event in a way where one can listen to this event and perform various operations on the data before it is applied to the chart.

      Parameters:
      Parameter Description
      data
      Type:
      string

      URL of the data source.
      format
      Type:
      FusionCharts~dataFormats

      URL of the data source.
      dataSource
      Type:
      string or object

      The original data source provided. In case the data-source was provided as a URL, this property will reflect the content retrieved from that Url. If data is provided in any format other than JSON, it eventually gets converted to JSON. However, this property helps one to access the original data.
      dataFormat
      Type:
      FusionCharts~dataFormats

      The original format in which the data was provided to the chart. Similar to the dataSource parameter, one will retain access to the original source data even though it was converted to JSON. However, this property helps one to know what was the original format in which the data was set.
      error
      Type:
      Error

      In case parsing or retrieving of the data had resulted in an error, the error object is forwarded in this property. Most of data parsing errors are trapped and raised in separate
      Example
      // Show data of a single-series column chart in an
// ascending sorted order.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container"
    });

    // Add the data handler to intercept incoming
    // data and sort it.
    chart.addEventListener("beforeDataUpdate", function (event, args) {
        var data = args.data,
            values;

        // If incoming data is not JSON then convert it to JSON
        if (args.format !== 'json') {
            data = FusionCharts.transcodeData(data, args.format, 'json');
        }

        // Get hold of the data array
        values = data.data;
        if (values && values.length) { // Check whether data exists
            // Sort the data by passing a comparison function to the
            // sort function of the array of values.
            values.sort(function (a, b) {
                 return (a && a.value) - (b && b.value);
            });
        }

        // Convert data back to original format in case it wasn't
        // originally JSON
        if (args.format !== 'json') {
            data = FusionCharts.transcodeData(data, 'json', args.format);
        }

        // Replace the data with updated data.
        args.data = data;
    });
});