FusionCharts.events - FusionCharts XT Suite Documentation

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:

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.)
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()

Parameters:

Parameter	Description
`startingAngle` Type: number	The initial angle.(desc)
`changeInAngle` Type: number	It is the difference between the starting angle and the starting angle on the drag start.

rotationStart()

This event is fired when a pie or doughnut chart's rotation is triggered.

Parameters:

Parameter	Description
`startingAngle` Type: number	This indicates the angle from where rotation started.

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:

FusionCharts#chartType

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:

FusionCharts#event:backgroundLoadError

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:

FusionCharts#event:backgroundLoaded

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()

This event is fired when a pieSlice in pie-chart starts slicing transition.

Parameters:

Parameter	Description
`data` Type: object	Contains the values for the following attributes borderColor, borderWidth, categoryLabel, dashStyle, displayValue, hoverEffects(boolean), label, link, rolloverProperties(boolean), sliced(boolean), toolText, value(value of the sliced object)
`slicedState` Type: boolean	Tells the state of the slice before transition begins. The value is true for sliced-out state and false for sliced-in state.

slicingEnd()

This event is fired when a pieSlice in pie-chart ends slicing transition.

Parameters:

Parameter	Description
`data` Type: object	Contains the values for the following attributes borderColor, borderWidth, categoryLabel, dashStyle, displayValue, hoverEffects(boolean), label, link, rolloverProperties(boolean), sliced(boolean), toolText, value(value of the sliced object)
`slicedState` Type: boolean	Tells the state of the slice before transition begins. The value is true for sliced-out state and false for sliced-in state.

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

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()

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 raised every time a real-time chart or gauge updates itself with new data. This event is raised in any of the following cases:

Real-time update using dataStreamUrl attribute.
Real-time update of Angular gauge or Horizontal Liner gauge using user interaction (through edit mode).

Parameters:

Parameter	Description
`data` Type: string	Chart data as XML or JSON string
`updateObject` Type: object	It is the update object.
`prevData` Type: number	The previous data values.
`source` Type: number	Nature of data load request. Presently its value is 'XmlHttprequest'.
`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.

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

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:

FusionCharts#clearChart

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 interactivity-drill-down-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:

Tutorial: interactivity-drill-down-linkedcharts

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()

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

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:

FusionCharts#event:connectorRollOver

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
`dsplayValue` 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
`dsplayValue` 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
`dsplayValue` 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