Loading

FusionCharts exposes various events throughout the lifetime of a chart. Event listeners can be attached to these events to tap into the chart’s lifecycle (such as loading data into the chart, before rendering the chart and so on) and perform certain actions. These events are listed below.

ready static event

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 ready function. One advantage that 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 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 on the FusionCharts class alone. It will not be fired if > subscribed from individual chart instances.

Parameters

version

: array

[+]

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

now

: 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.

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>

beforeInitialize static event

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

height

: numeric or percent

[+]

Height of the chart in pixels or percentage.

width

: 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 static event

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

height

: numeric or percent

[+]

height of the chart in pixels or percentage .

width

: 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...");
        }
    }
});

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 Linked Charts.

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

Parameters

level

: string

[+]

Level of the linked item with respect to the parent chart (starts from ‘0’).

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

item

: object

[+]

The JavaScript object instance of the LinkedChart that is opened

level

: string

[+]

Level (as number) of the LinkedChart.

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

item

: object

[+]

The JavaScript object instance of the LinkedChart that is opened

level

: string

[+]

Level (as number) of the LinkedChart.

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

level

: string

[+]

Level of the linked item which starts from ‘0’.

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

ready

: boolean

[+]

This is the ready flag.

bypass

: boolean

[+]

This is the bypass flag.

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 render is called on the chart instance.

Parameters

container

: DOMElement

[+]

This contains the reference to the container HTMLDOMElement within which the chart is to be rendered.

width

: numeric or percent

[+]

Width of the chart in percent or pixels.

height

: numeric or percent

[+]

Height of the chart in percent or pixels.

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 beforeRender event via it’s eventObject.preventDefault() method.

Parameters

container

: DOMElement

[+]

This contains the refernce to the container HTMLDOMElement whithin which the chart is to be rendered.

width

: numeric or percent

[+]

Width of the chart in percent or pixels.

height

: numeric or percent

[+]

Height of the chart in percent or pixels.

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 resizeTo or fired due to change in dimension of the chart’s container element while the dimensions were in percentage format.

Parameters

currentWidth

: numeric or percent

[+]

Current width of the chart in pixels or percentage

currentHeight

: numeric or percent

[+]

Current height of the chart in pixels or percentage

newWidth

: numeric or percent

[+]

new width of the chart in pixels or percentage

newHeight

: numeric or percent

[+]

new height of the chart in pixels or percentage

resized

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

Parameters

width

: numeric or percent

[+]

Width of the chart after being resized

height

: numeric or percent

[+]

Height of the chart after being resized

prevWidth

: numeric or percent

[+]

The width of the chart previous to being resized

prevHeight

: numeric or percent

[+]

The height of the chart previous to being resized

originalWidth

: number

[+]

Width of the chart in pixels provided when chart was rendered using render.

originalHeight

: number

[+]

Original render-time height of the chart in pixels.

resizeCancelled

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

Parameters

currentWidth

: numeric or percent

[+]

Current width of the chart in pixels or percentage.

currentHeight

: numeric or percent

[+]

Current height of the chart in pixels or percentage.

cancelledTargetWidth

: numeric or percent

[+]

The width of the chart that was requested to be set, but was cancelled.

cancelledTargetHeight

: numeric or percent

[+]

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

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

disposed

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

Usually, this event is triggered by 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.

disposeCancelled

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

pageNavigated

This event is fired on page change in SSGrid chart.

Parameters

data

: object

[+]

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

pageId

: number

[+]

Tells the index of the sought page.

rotationEnd

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

Parameters

changeInAngle

: number

[+]

Gives the value by how much the chart was rotated

startingAngle

: 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

startingAngle

: 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

centerLabelText

: string

[+]

is the text for display at center label

chartX

: number

[+]

is the relative X-Cordinate to chart container where the chart was clicked

chartY

: number

[+]

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

container

: string

[+]

is the DOM element where the chart is being rendered.

height

: numeric or percent

[+]

height of the chart

width

: numeric or percent

[+]

width of the chart

id

: string

[+]

is the chart id

pageX

: number

[+]

is the relative X-Cordinate to screen where the chart is clicked

pageY

: number

[+]

is the relative Y-Cordinate to screen where the chart is clicked

pixelHeight

: number

[+]

is the height of the DOM element where the chart is being rendered in pixels

pixelWidth

: number

[+]

is the width of the DOM element where the chart is being rendered in pixels

renderer

: 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

centerLabelText

: string

[+]

is the text for display at center label

chartX

: number

[+]

is the relative X-Cordinate to chart container where the chart was clicked

chartY

: number

[+]

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

container

: string

[+]

is the DOM element where the chart is being rendered.

height

: numeric or percent

[+]

height of the chart

width

: numeric or percent

[+]

width of the chart

id

: string

[+]

is the chart id

pageX

: number

[+]

is the relative X-Cordinate to screen where the chart is clicked

pageY

: number

[+]

is the relative Y-Cordinate to screen where the chart is clicked

pixelHeight

: number

[+]

is the height of the DOM element where the chart is being rendered in pixels

pixelWidth

: number

[+]

is the width of the DOM element where the chart is being rendered in pixels

renderer

: 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

centerLabelText

: string

[+]

is the text for display at center label.

chartX

: number

[+]

is the relative X-Cordinate to chart container where the chart was clicked.

chartY

: number

[+]

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

container

: string

[+]

is the DOM element where the chart is being rendered.

height

: numeric or percent

[+]

height of the chart

width

: numeric or percent

[+]

width of the chart

id

: string

[+]

is the chart id

pageX

: number

[+]

is the relative X-Cordinate to screen where the chart is clicked

pageY

: number

[+]

is the relative Y-Cordinate to screen where the chart is clicked

pixelHeight

: number

[+]

is the height of the DOM element where the chart is being rendered in pixels

pixelWidth

: number

[+]

is the width of the DOM element where the chart is being rendered in pixels

renderer

: 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

centerLabelText

: string

[+]

is the text for display at center label

chartX

: number

[+]

is the relative X-Cordinate to chart container where the chart was clicked

chartY

: number

[+]

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

container

: string

[+]

is the DOM element where the chart is being rendered.

height

: numeric or percent

[+]

height of the chart

width

: numeric or percent

[+]

width of the chart

id

: string

[+]

is the chart id

pageX

: number

[+]

is the relative X-Cordinate to screen where the chart is clicked

pageY

: number

[+]

is the relative Y-Cordinate to screen where the chart is clicked

pixelHeight

: number

[+]

is the height of the DOM element where the chart is being rendered in pixels

pixelWidth

: number

[+]

is the width of the DOM element where the chart is being rendered in pixels

renderer

: string

[+]

tells if the chart is rendered using JavaScript or Flash

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

level

: number

[+]

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

startIndex

: number

[+]

The data start index that is in view for the zoomed out level

startLabel

: string

[+]

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

endIndex

: number

[+]

The data end index that is in view for the zoomed out level

endLabel

: 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

level

: 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

: number

[+]

The data start index that is in view for the zoomed in level

startLabel

: string

[+]

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

endIndex

: number

[+]

The data end index that is in view for the zoomed in level

endLabel

: 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

level

: 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

: number

[+]

The data start index that is in view for the zoomed level

startLabel

: string

[+]

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

endIndex

: number

[+]

The data end index that is in view for the zoomed level

endLabel

: 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

pinModeActive

: 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

startIndex

: number

[+]

The data start index of the pinned range.

startLabel

: string

[+]

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

endIndex

: number

[+]

The data end index that is in view of the pinned range.

endLabel

: string

[+]

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

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 <a href='http://docs.fusioncharts.com/widgets/'>http://docs.fusioncharts.com/widgets/</a> for further infomation on alerts.

realTimeUpdateComplete

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

Parameters

data

: string

[+]

The data stream .

updateObject

: object

[+]

The new data with which the chart should be updated with .

source

: string

[+]

The name of the source,usually ‘feedData’

url

: 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

source

: number

[+]

Nature of data load request. Presently its value is ‘XmlHttprequest’.

url

: string

[+]

URL of the data source.

xmlHttpReqestObject

: object

[+]

The object which has fetched data.

httpStatus

: 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.

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

pointerIndex

: number

[+]

Indicates whether the index is 0 or 1.

pointers

: object

[+]

It is an object containing the scale start value and scale end value.

legendPointerHeight

: number

[+]

It is the legend pointer height in pixels or percent.

legendPointerWidth

: number

[+]

It is the legend pointer width in pixels or percent.

legendPointerDragStop

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

Parameters

pointerIndex

: number

[+]

Indicates whether the index is 0 or 1.

pointers

: object

[+]

Its an object containing the scale start value and the scale end value.

legendPointerHeight

: number

[+]

It is the legend pointer height in pixels or percentage.

legendPointerWidth

: 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

previousMinValue

: number

[+]

Indicates the previous minimum value.

previousMaxValue

: number

[+]

Indicates the previous maximum value.

minValue

: number

[+]

Indicates the scale start value.

maxValue

: number

[+]

Indicates the scale end value.

dataplotRollOver

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

datasetIndex

: number

[+]

The position of the dataset in order of its definition in source data.

datasetName

: string

[+]

The seriesName of the dataset.

dataIndex

: number

[+]

The position of the data-plot in order of its definition in source dataset.

dataValue

: number

[+]

The value of the data-plot that trigerred this event

displayValue

: string

[+]

The displayValue attribute that has been set for the data-plot.

categoryLabel

: string

[+]

The x-axis label that corresponds to the data-plot

toolText

: string

[+]

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

dataplotRollOut

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

datasetIndex

: number

[+]

The position of the dataset in order of its definition in source data.

datasetName

: string

[+]

The seriesName of the dataset.

dataIndex

: number

[+]

The position of the data-plot in order of its definition in source dataset.

dataValue

: number

[+]

The value of the data-plot that trigerred this event

displayValue

: string

[+]

The displayValue attribute that has been set for the data-plot.

categoryLabel

: string

[+]

The x-axis label that corresponds to the data-plot

toolText

: string

[+]

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

dataplotClick

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

datasetIndex

: number

[+]

The position of the dataset in order of its definition in source data.

datasetName

: string

[+]

The seriesName of the dataset.

dataIndex

: number

[+]

The position of the data-plot in order of its definition in source dataset.

dataValue

: number

[+]

The value of the data-plot that trigerred this event

displayValue

: string

[+]

The displayValue attribute that has been set for the data-plot.

categoryLabel

: string

[+]

The x-axis label that corresponds to the data-plot

toolText

: string

[+]

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

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

linkProvided

: string

[+]

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

linkInvoked

: string

[+]

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

linkAction

: object

[+]

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

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

align

: string

[+]

The alignment of the process label.

vAlign

: string

[+]

The vertical alignment of the process label.

id

: string

[+]

The id of the process.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the process on mouse click.

label

: string

[+]

The label in the process

isHeader

: boolean

[+]

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

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

align

: string

[+]

The alignment of the process label.

vAlign

: string

[+]

The vertical alignment of the process label.

id

: string

[+]

The id of the process.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the process on mouse click.

label

: string

[+]

The label in the process.

isHeader

: boolean

[+]

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

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

align

: string

[+]

The alignment of the process label.

vAlign

: string

[+]

The vertical alignment of the process label.

id

: string

[+]

The id of the process.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the process on mouse click.

label

: string

[+]

The label in the process

isHeader

: boolean

[+]

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

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

align

: string

[+]

The alignment of the category label.

vAlign

: string

[+]

The vertical alignment of the category label.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the category on mouse click.

text

: string

[+]

The label in the category

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

align

: string

[+]

The alignment of the category label.

vAlign

: string

[+]

The vertical alignment of the category label.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the category on mouse click.

text

: string

[+]

The label in the category

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

align

: string

[+]

The alignment of the category label.

vAlign

: string

[+]

The vertical alignment of the category label.

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

URL set for the category on mouse click.

text

: string

[+]

The label in the category

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

date

: string

[+]

The date of the milestone.

numSides

: string

[+]

The number of sides of the milestone.

radius

: string

[+]

The radius of the milestone.

taskId

: string

[+]

The id of the task to which this milestone relates to.

toolText

: string

[+]

The tooltext that is displayed when hovered over the milestone

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

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

date

: string

[+]

The date of the milestone.

numSides

: string

[+]

The number of sides of the milestone.

radius

: string

[+]

The radius of the milestone.

taskId

: string

[+]

The id of the task to which this milestone relates to.

toolText

: string

[+]

The tooltext that is displayed when hovered over the milestone

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

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

date

: string

[+]

The date of the milestone.

numSides

: string

[+]

The number of sides of the milestone.

radius

: string

[+]

The radius of the milestone.

taskId

: string

[+]

The id of the task to which this milestone relates to.

toolText

: string

[+]

The tooltext that is displayed when hovered over the milestone

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

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

id

: string

[+]

Id of the button

show

: 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

type

: string

[+]

This is the type of chart that is being rendered.

rendered

This event is fired when the chart completes drawing after 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 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.

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

drawCount

: number

[+]

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

drawLatency

: number

[+]

Number specifying the draw latency.

height

: number

[+]

Height of the chart object in pixels or percent.

width

: number

[+]

Width of the chart object in pixels or percent.

renderComplete

This event is fired every-time a chart is rendered either by render, chartType or 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 rendered event is that rendered is fired only when .render() is called. renderComplete is not always preceded by beforeRender. It is triggered even without firing 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.

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

error

: Error

[+]

The error that caused the rendering to stop.

dataXMLInvalid

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

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.

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

value

: number

[+]

The value of the entity.

label

: string

[+]

The label of the entity.

shortLabel

: string

[+]

Short label used by the user.

originalId

: string

[+]

The ID of the entity stored in the map definition file.

id

: string

[+]

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

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 entityClick event or the entityRollOut event.

Parameters

value

: number

[+]

The value of the entity.

label

: string

[+]

The label of the entity.

shortLabel

: string

[+]

Short label used by the user.

originalId

: string

[+]

The ID of the entity stored in the map definition file.

id

: string

[+]

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

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 entityRollOver event.

Parameters

value

: number

[+]

The value of the entity.

label

: string

[+]

The label of the entity.

shortLabel

: string

[+]

Short label used by the user.

originalId

: string

[+]

The ID of the entity stored in the JS file.

id

: string

[+]

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

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

fromMarkerId

: string

[+]

The Id of the marker from which the connector starts.

toMarkerId

: string

[+]

The Id of the marker to which the connector is drawn.

label

: 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 connectorRollOver event precedes this event.

Parameters

fromMarkerId

: string

[+]

The Id of the marker from which the connector starts.

toMarkerId

: string

[+]

The Id of the marker to which the connector is drawn.

label

: label

[+]

The label on the connector.

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 connectorRollOver event.

Parameters

fromMarkerId

: string

[+]

The Id of the marker from which the connector starts.

toMarkerId

: string

[+]

The Id of the marker to which the connector is drawn.

label

: 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 );

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

x

: number

[+]

The original X co-ordinate of the marker.

y

: number

[+]

The original Y co-ordinate of the marker.

scaledX

: number

[+]

The scaled value of X co-ordinate of the marker.

scaledY

: number

[+]

The scaled value of Y co-ordinate of the marker.

chartX

: number

[+]

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

chartY

: number

[+]

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

label

: 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 markerRollOver or the FusionCharts event.

Parameters

x

: number

[+]

The original X co-ordinate of the marker.

y

: number

[+]

The original Y co-ordinate of the marker.

scaledX

: number

[+]

The scaled value of X co-ordinate of the marker.

scaledY

: number

[+]

The scaled value of Y co-ordinate of the marker.

chartX

: number

[+]

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

chartY

: number

[+]

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

label

: 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 markerRollOver event.

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

Parameters

x

: number

[+]

The original X co-ordinate of the marker.

y

: number

[+]

The original Y co-ordinate of the marker.

scaledX

: number

[+]

The scaled value of X co-ordinate of the marker.

scaledY

: number

[+]

The scaled value of Y co-ordinate of the marker.

chartX

: number

[+]

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

chartY

: number

[+]

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

label

: 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 );

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

data

: 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

data

: string

[+]

Contains the XML string with complete chart data.

httpStatus

: number

[+]

Tells the status code of the ajax POST request

statusText

: string

[+]

Contains the ajax error message.

url

: string

[+]

URL to which the data is sent as ajax POST request.

xhrObject

: 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

data

: string

[+]

Contains the XML string with complete chart data.

reponse

: string

[+]

Contains the reponse returned by the web server to which the HTTP POST request was submitted.

url

: string

[+]

URL to which the data is sent as HTTP POST request.

xhrObject

: 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

data

: string

[+]

Contains the XML string with complete chart data.

httpStatus

: number

[+]

Tells the status code of the ajax POST request

statusText

: string

[+]

Contains the ajax error message.

url

: string

[+]

URL to which the data is sent as ajax POST request.

xhrObject

: 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 dataRestored is fired and not this event. Applicable charts: dragnode, dragcolumn2d, dragline, dragarea and selectscatter.

Parameters

datasetIndex

: number

[+]

The index of the dataset

datasetName

: string

[+]

Name of the dataset

index

: number

[+]

Index of the node by the order which it was created

chartX

: number

[+]

The relative X-Cordinate to chart container where the node was dropped. > Applicable to dragnode chart only.

chartY

: number

[+]

The relative Y-Cordinate to chart container where the node was dropped. > Applicable to dragnode chart only.

pageX

: number

[+]

Relative X-Cordinate to screen where the node was dropped > Applicable to dragnode chart only.

pageY

: number

[+]

Relative X-Cordinate to screen where the node was dropped > Applicable to dragnode chart only.

id

: number

[+]

Number assigned to the node > Applicable to dragnode chart only.

label

: string

[+]

Label assigned to the node for identifying it and can be used to display it for toolText > Applicable to dragnode chart only.

URL linked to a node when clicked will be taken to that URL > Applicable to dragnode chart only.

radius

: 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

: string

[+]

Shape of the node. > Applicable to dragnode chart only.

sides

: 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

: string

[+]

Tooltext defined for the node. > Applicable to dragnode chart only.

x

: number

[+]

The updated value of the node. > Applicable to dragnode chart only.

y

: number

[+]

The updated value of the node. > Applicable to dragnode chart only.

startValue

: number

[+]

The value of the plot previous to being updated. > Applicable to dragcolumn2d, dragline and dragarea charts only

endValue

: 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

datasetIndex

: number

[+]

Index of the dataset to which the newly added node belongs to.

datasetName

: 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

: number

[+]

Index of the newly added node.

height

: number

[+]

Height of the shape represented by the newly added node.

id

: string

[+]

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

label

: string

[+]

Text displayed inside the shape of the newly added node.

URL associated with the newly added node.

radius

: number

[+]

Radius of the circumcirle for the shape of the newly added node.

shape

: string

[+]

Shape of the newly added node.

sides

: 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

: string

[+]

Text that is displayed over the shape of the newly added node.

width

: number

[+]

Width of the shape of the newly added node.

x

: number

[+]

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

y

: 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

datasetIndex

: number

[+]

Index of the dataset to which the deleted node belongs to.

datasetName

: string

[+]

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

height

: number

[+]

Height of the shape represented by the node.

id

: string

[+]

ID of the node which can be set using id attribute for set tag.

dataIndex

: number

[+]

Index of the updated node.

label

: string

[+]

Text displayed inside the shape of the node.

URL associated with the deleted node.

radius

: number

[+]

Radius of the circumcirle for the shape of the node.

shape

: string

[+]

Shape of the updated node.

sides

: 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

: string

[+]

Text that is displayed over the shape of the updated node.

width

: number

[+]

Width of the shape of the updated node.

x

: number

[+]

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

y

: 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

datasetIndex

: number

[+]

Index of the dataset to which the deleted node belongs to.

datasetName

: string

[+]

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

height

: number

[+]

Height of the shape represented by the node.

id

: string

[+]

ID of the node which can be set using id attribute for set tag.

dataIndex

: number

[+]

Index of the node deleted.

label

: string

[+]

Text displayed inside the shape of the node.

URL associated with the deleted node.

radius

: number

[+]

Radius of the circumcirle for the shape of the node.

shape

: string

[+]

Shape of the deleted node.

sides

: 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

: string

[+]

Text that is displayed over the shape of the deleted node.

width

: number

[+]

Width of the shape of the deleted node.

x

: number

[+]

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

y

: 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

arrowAtEnd

: boolean

[+]

True if there is an arrow at the end of the link else false.

arrowAtStart

: boolean

[+]

True if there is an arrow at the start of the link else false.

fromNodeId

: number

[+]

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

id

: number

[+]

ID of the connector.

label

: string

[+]

Text displayed for the connector that was deleted.

URL set for the connector on mouse click.

toNodeId

: 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

arrowAtEnd

: boolean

[+]

True if there is an arrow at the end of the link else false.

arrowAtStart

: boolean

[+]

True if there is an arrow at the start of the link else false.

fromNodeId

: number

[+]

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

id

: number

[+]

ID of the connector.

label

: string

[+]

Text displayed for the connector that was deleted.

URL set for the connector on mouse click.

toNodeId

: 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

arrowAtEnd

: boolean

[+]

true if there is an arrow at the end of the link else false.

arrowAtStart

: boolean

[+]

True if there is an arrow at the start of the link else false.

fromNodeId

: number

[+]

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

id

: number

[+]

ID of the connector.

label

: string

[+]

Text displayed for the connector that was deleted.

URL set for the connector on mouse click.

toNodeId

: 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

text

: string

[+]

The text in the label

x

: number

[+]

x position of the label.

y

: 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

text

: string

[+]

The text in the label

x

: number

[+]

x position of the label.

y

: 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

data

: object

[+]

This returns the subset of data that was selected.

selectionStart

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

Parameters

chartX

: number

[+]

The x-coordinate of the mouse with respect to the chart.

chartY

: number

[+]

The y-coordinate of the mouse with respect to the chart.

pageX

: number

[+]

The x-coordinate of the mouse with respect to the page.

pageY

: number

[+]

The y-coordinate of the mouse with respect to the page.

startXValue

: number

[+]

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

startYValue

: 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

chartX

: number

[+]

The x-coordinate of the mouse with respect to the chart.

chartY

: number

[+]

The y-coordinate of the mouse with respect to the chart.

pageX

: number

[+]

The x-coordinate of the mouse with respect to the page.

pageY

: number

[+]

The y-coordinate of the mouse with respect to the page.

startXValue

: number

[+]

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

startYValue

: number

[+]

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

endXValue

: number

[+]

The value on the canvas x-axis where the selection ended.

endYValue

: number

[+]

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

selectionLeft

: number

[+]

The x-coordinate from where selection started with respect to the chart.

selectionTop

: number

[+]

The y-coordinate from where selection started with respect to the chart.

selectionWidth

: number

[+]

The width of the selection in pixels.

selectionHeight

: number

[+]

The height of the selection box in pixels.

labelClick

This event is raised when a label on the drag-node chart is clicked.

Applicable only to the dragnode chart.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

x

: number

[+]

The x-value of the label node scaled as per the axis of the chart.

y

: number

[+]

The y-value of the label node scaled as per the axis of the chart.

text

: string

[+]

The text value of the label.

labelRollOver

This event is raised when the mouse pointer is rolled over a label on the drag-node chart.

Applicable only to the dragnode chart.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

x

: number

[+]

The x-value of the label node scaled as per the axis of the chart.

y

: number

[+]

The y-value of the label node scaled as per the axis of the chart.

text

: string

[+]

The text value of the label.

labelRollOut

This event is raised when the mouse pointer is rolled out of a label on the drag-node chart.

Applicable only to the dragnode chart.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

x

: number

[+]

The x-value of the label node scaled as per the axis of the chart.

y

: number

[+]

The y-value of the label node scaled as per the axis of the chart.

text

: string

[+]

The text value of the label.

labelDragStart

This event is raised when you start dragging a label on the drag-node chart.

Applicable only to the dragnode chart.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

x

: number

[+]

The x-value of the label node scaled as per the axis of the chart.

y

: number

[+]

The y-value of the label node scaled as per the axis of the chart.

text

: string

[+]

The text value of the label.

labelDragEnd

This event is raised when you finish dragging a label on the drag-node chart.

Applicable only to the dragnode chart.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

x

: number

[+]

The x-value of the label node scaled as per the axis of the chart.

y

: number

[+]

The y-value of the label node scaled as per the axis of the chart.

text

: string

[+]

The text value of the label.

dataplotDragStart

The four drag-able charts: dragnode, dragcolumn2d, dragline and dragarea raise this event just when you start dragging their data plots.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

datasetIndex

: number

[+]

The position of the dataset in order of its definition in source data.

datasetName

: string

[+]

The seriesName of the dataset.

dataIndex

: number

[+]

The position of the data-plot in order of its definition in source dataset.

index

: number

[+]

Index of the node by the order in which it was created

id

: number

[+]

Number assigned to the node

Applicable only to the dragnode chart.

label

: string

[+]

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

Applicable only to the dragnode chart.

URL configured for the data plot being dragged

Applicable only to the dragnode chart.

toolText

: string

[+]

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

x

: number

[+]

Updated value of the node

Applicable only to the dragnode chart.

y

: number

[+]

Updated value of the node

Applicable only to the dragnode chart.

shape

: string

[+]

Shape of the node

Applicable to dragnode chart only.

radius

: number

[+]

A node’s circumcircle radius, if it is a polygon or simply the radius, if the node’s is a circle

Applicable to dragnode chart only.

sides

: number

[+]

Number of sides of the node, if it is a polygon or ‘undefined’, if it is a circle

Applicable to dragnode chart only.

height

: number

[+]

Height of the shape represented by the node

width

: number

[+]

Width of the shape represented by the node

startValue

: number

[+]

Value of the data plot before being dragged

Applicable only to the dragcolumn2d, dragline and dragarea charts.

dataplotDragEnd

The four drag-able charts: dragnode, dragcolumn2d, dragline and dragarea raise this event when you finish dragging their data plots.

Parameters

chartX

: number

[+]

x-coordinate of the pointer relative to the chart.

chartY

: number

[+]

y-coordinate of the pointer relative to the chart.

pageX

: number

[+]

x-coordinate of the pointer relative to the page.

pageY

: number

[+]

y-coordinate of the pointer relative to the page.

datasetIndex

: number

[+]

The position of the dataset in order of its definition in source data.

datasetName

: string

[+]

The seriesName of the dataset.

dataIndex

: number

[+]

The position of the data-plot in order of its definition in source dataset.

index

: number

[+]

Index of the node by the order in which it was created

id

: number

[+]

Number assigned to the node

Applicable only to the dragnode chart.

label

: string

[+]

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

Applicable only to the dragnode chart.

URL configured for the data plot being dragged

Applicable only to the dragnode chart.

toolText

: string

[+]

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

x

: number

[+]

Updated value of the x-coordinate of the node

Applicable only to the dragnode chart.

y

: number

[+]

Updated value of the y-coordinate of the node

Applicable only to the dragnode chart.

shape

: string

[+]

Shape of the node

Applicable to dragnode chart only.

radius

: number

[+]

A node’s circumcircle radius, if it is a polygon or simply the radius, if the node’s is a circle

Applicable to dragnode chart only.

sides

: number

[+]

Number of sides of the node, if it is a polygon or ‘undefined’, if it is a circle

Applicable to dragnode chart only.

height

: number

[+]

Height of the shape represented by the node

width

: number

[+]

Width of the shape represented by the node

startValue

: number

[+]

Value of the data plot before being dragged

Applicable only to the dragcolumn2d, dragline and dragarea charts.

endValue

: number

[+]

Value of the plot after being dragged and updated

Applicable only to the dragcolumn2d, dragline and dragarea charts

chartTypeChanged

This event is fired when a change in chart type is triggered by calling 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 render. - A chart type is set for the first time on a chart, even using chartType. For example, if no type option is provided to the FusionCharts constructor when creating the chart, and later on chartType is called on that chart instance for the first time, this event is not triggered. - If the chart type parameter sent to chartType is the same as the current chart type. - If the new chart type provided is invalid.

Parameters

previousType

: string

[+]

The previously assigned chart type of the chart.

newType

: string

[+]

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

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

container

: string

[+]

The DOM element within which the chart has been rendered.

id

: string

[+]

The id of the chart that has triggered this event.

height

: string

[+]

The height of the chart specified at the time of rendering the chart in pixels or percent.

width

: string

[+]

The width of the chart specified at the time of rendering the chart in pixels or percent.

chartX

: number

[+]

The x-coordinate of the mouse relative to the position of the chart.

chartY

: number

[+]

The y-coordinate of the mouse relative to the position of the chart.

pageX

: number

[+]

The x-coordinate of the mouse relative to the document.

pageY

: number

[+]

The y-coordinate of the mouse relative to the document.

pixelHeight

: number

[+]

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container.

pixelWidth

: number

[+]

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container.

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

container

: string

[+]

The DOM element within which the chart has been rendered.

id

: string

[+]

The id of the chart that has triggered this event.

height

: string

[+]

The height of the chart specified at the time of rendering the chart in pixels or percent.

width

: string

[+]

The width of the chart specified at the time of rendering the chart in pixels or percent.

chartX

: number

[+]

The x-coordinate of the mouse relative to the position of the chart.

chartY

: number

[+]

The y-coordinate of the mouse relative to the position of the chart.

pageX

: number

[+]

The x-coordinate of the mouse relative to the document.

pageY

: number

[+]

The y-coordinate of the mouse relative to the document.

pixelHeight

: number

[+]

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container

pixelWidth

: number

[+]

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container

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

container

: string

[+]

The DOM element within which the chart has been rendered.

id

: string

[+]

The id of the chart that has triggered this event.

height

: string

[+]

The height of the chart specified at the time of rendering the chart in pixels or percent.

width

: string

[+]

The width of the chart specified at the time of rendering the chart in pixels or percent.

chartX

: number

[+]

The x-coordinate of the mouse relative to the position of the chart.

chartY

: number

[+]

The y-coordinate of the mouse relative to the position of the chart.

pageX

: number

[+]

The x-coordinate of the mouse relative to the document.

pageY

: number

[+]

The y-coordinate of the mouse relative to the document.

pixelHeight

: number

[+]

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container

pixelWidth

: number

[+]

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container

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

container

: string

[+]

The DOM element within which the chart has been rendered.

id

: string

[+]

The id of the chart that has triggered this event.

height

: string

[+]

The height of the chart specified at the time of rendering the chart in pixels or percent.

width

: string

[+]

The width of the chart specified at the time of rendering the chart in pixels or percent.

chartX

: number

[+]

The x-coordinate of the mouse relative to the position of the chart.

chartY

: number

[+]

The y-coordinate of the mouse relative to the position of the chart.

pageX

: number

[+]

The x-coordinate of the mouse relative to the document.

pageY

: number

[+]

The y-coordinate of the mouse relative to the document.

pixelHeight

: number

[+]

The height of the chart in pixels. This is equivalent to the offsetHeight of the chart container

pixelWidth

: number

[+]

The width of the chart in pixels. This is equivalent to the offsetWidth of the chart container

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

url

: string

[+]

URL of the background image

bgImageAlpha

: number

[+]

The value of the image alpha

bgImageDisplayMode

: string

[+]

The mode in which the images are displayed in background of the chart

bgImageVAlign

: string

[+]

The vertical alignment of the background image

bgImageHAlign

: string

[+]

The horizontal alignment of the background image

imageWidth

: number

[+]

The width of the background image

imageHeight

: number

[+]

The height of the background image

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

url

: string

[+]

The URL of the background image

bgImageAlpha

: number

[+]

The alpha value of the image.

error

: string

[+]

Contains error message.

bgImageDisplayMode

: string

[+]

The mode in which the images are displayed in the background of the chart.

bgImageVAlign

: string

[+]

Vertical alignment of the background image.

bgImageHAlign

: string

[+]

Horizontal alignment of the background image.

bgImageScale

: number

[+]

The value of the scaling of the image.

imageHeight

: number

[+]

The height of the background image.

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

minRange

: number

[+]

Minimum value of the color range represented by the legend item.

maxRange

: number

[+]

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

legendItemRollover

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

Parameters

chartX

: number

[+]

The relative X-Cordinate to chart container where the legend item was hovered.

chartY

: number

[+]

The relative Y-Cordinate to chart container where the legend item was hovered

datasetIndex

: number

[+]

The index of the dataset

datasetName

: string

[+]

The name of the dataset

id

: string

[+]

User-defined Id of the dataset.

pageX

: number

[+]

The relative X-Cordinate to screen where the legend item was hovered.

pageY

: number

[+]

The relative Y-Cordinate to screen where the legend item was hovered.

visible

: boolean

[+]

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

legendItemRollout

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

Parameters

chartX

: number

[+]

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

chartY

: number

[+]

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

datasetIndex

: number

[+]

The index of the dataset.

datasetName

: string

[+]

The name of the dataset.

id

: string

[+]

User-defined Id of the dataset.

pageX

: number

[+]

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

pageY

: number

[+]

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

visible

: boolean

[+]

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

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 tutorials/configuring-your-chart/loading-external-logos.md

Parameters

logoURL

: string

[+]

The URL of the logo image.

logoAlpha

: number

[+]

The value of the alpha of the logo image.

logoPosition

: string

[+]

The position of the logo.

logoScale

: number

[+]

The value of scaling of the logo image.

The URL linked to the logo which on clicking will be taken to the URL link.

chartX

: number

[+]

The relative X-Cordinate to screen where the mouse was hovered over the logo.

chartY

: number

[+]

The relative Y-Cordinate to screen where the mouse was hovered over the logo.

pageX

: number

[+]

The relative Y-Cordinate to screen where the mouse was hovered over the logo.

pageY

: number

[+]

The relative Y-Cordinate to screen where the mouse was hovered over the logo.

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 tutorials/configuring-your-chart/loading-external-logos.md

Parameters

logoURL

: string

[+]

The URL of the logo image.

logoAlpha

: number

[+]

The value of the alpha of the logo image.

logoPosition

: string

[+]

The position of the logo.

logoScale

: string

[+]

The value of scaling for logo image.

The URL linked to the logo which on clicking will be taken to the URL link.

chartX

: number

[+]

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

chartY

: number

[+]

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

pageX

: number

[+]

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

pageY

: number

[+]

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

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 tutorials/configuring-your-chart/loading-external-logos.md

Parameters

logoURL

: string

[+]

The URL of the logo image.

logoAlpha

: number

[+]

The value of the alpha of the logo image.

logoPosition

: string

[+]

The position of the position of the logo.

logoScale

: number

[+]

The value of scaling for logo image.

The URL linked to the logo which on clicking will be taken to the URL link.

chartX

: number

[+]

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

chartY

: number

[+]

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

pageX

: number

[+]

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

pageY

: number

[+]

is the relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.

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 tutorials/configuring-your-chart/loading-external-logos.md

Parameters

logoURL

: string

[+]

is the URL of the logo image.

logoAlpha

: number

[+]

is the value of the alpha of the logo image.

logoPosition

: string

[+]

is the position of the chart logo.

logoScale

: number

[+]

is the value of scaling for logo image.

is the URL linked to the logo which on clicking will be taken to the URL link.

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 tutorials/configuring-your-chart/loading-external-logos.md

Parameters

logoURL

: string

[+]

is the URL of the logo image.

logoAlpha

: number

[+]

is the value of the alpha of the logo image.

logoPosition

: string

[+]

is the position of the chart logo.

logoScale

: number

[+]

is the value of scaling for logo image.

is the URL linked to the logo which on clicking will be taken to the URL link.

error

: string

[+]

is the error message.

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 exportChart is called.

Parameters

bgcolor

: string

[+]

The background color of the exported chart.

exportaction

: 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

: boolean

[+]

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

exportfilename

: string

[+]

This attribute specifies the name (excluding the extension) of the file to be exported.

exportformat

: string

[+]

The format in which the chart is exported. jpg, png, pdf`.

exporthandler

: string

[+]

This refers to the path of the server-side export handler

exportparameters

: string

[+]

Additional parameters sent by the chart when defined on the chart data using the exportParameters chart attribute.

exporttargetwindow

: 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.

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 exportChart function.

Parameters

DOMId

: string

[+]

ID of the chart that has been exported

statusCode

: 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

: string

[+]

Success or failure message

fileName

: string

[+]

The name and path of the file where the exported file has been saved.

width

: string

[+]

The width of the chart

height

: string

[+]

The height of the chart

exportCancelled

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

beforePrint

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

printComplete

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

printCancelled

This event is fired when the printing request from a chart has been programmatically cancelled by calling eventObject.preventDefault() from the FusionCharts 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 print function.

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

text

: string

[+]

The data label in the axis

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

text

: string

[+]

The data label in the axis

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

text

: string

[+]

The data label in the axis

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

slicedState

: boolean

[+]

Indicates whether the data is sliced or not.

data

: string

[+]

The plot data from the chart to slice.

dataIndex

: 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

slicedState

: boolean

[+]

Indicates whether the data is sliced or not.

data

: string

[+]

The plot data from the chart to slice.

dataIndex

: number

[+]

The index of the data-plot in order of its definition in source dataset.

chartCleared

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

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

url

: string

[+]

The Url of the data source from where the data was fetched.

dataSource

: string

[+]

The content of the dataSource as fetched from the url.

dataFormat

: 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

url

: string

[+]

The Url that could not be successfully loaded.

dataFormat

: FusionCharts~dataFormats

[+]

The format of the data that was expected from the Url.

error

: 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

: 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 dataLoadRequested event is cancelled using eventObject.preventDefault(), this event is raised. Subsequently, the associated AJAX requests are aborted.

Parameters

url

: string

[+]

Url of the requested data source.

dataFormat

: 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 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

url

: string

[+]

URL of the data source.

dataFormat

: 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 {@link 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

data

: string or object

[+]

The data in one of the formats as in dataFormats, that has been passed on to the chart.

format

: 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 getCurrentRenderer) is javascript, the data format is JSON.

dataSource

: string

[+]

The original/source data as specified using data setter functions such as setChartData.

dataFormat

: FusionCharts~dataFormats

[+]

The data format of the original/source data.

error

: 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 beforeDataUpdate causes the dataUpdateCancelled event to be raised .This event can used to notify the user that the update of data was cancelled.

Parameters

data

: string or object

[+]

The data in one of the formats as in dataFormats, that was supposed to be passed on to the chart.

format

: FusionCharts~dataFormats

[+]

The format in which the data was to be passed on for rendering.

dataSource

: string

[+]

The original/source data as specified using data setter functions such as setChartData.

dataFormat

: FusionCharts~dataFormats

[+]

The data format of the original/source data.

error

: 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

source

: string

[+]

Nature of data load request. Presently its value is “XmlHttpRequest”

url

: string

[+]

URL of the data source

dataFormat

: FusionCharts~dataFormats

[+]

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

silent

: boolean

[+]

Save the silent instruction to arguments.

callback

: 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

data

: string

[+]

URL of the data source.

format

: FusionCharts~dataFormats

[+]

URL of the data source.

dataSource

: 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

: 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

: 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;
    });
});
  • ready static
  • beforeInitialize static
  • initialized static
  • beforeLinkedItemOpen
  • linkedItemOpened
  • beforeLinkedItemClose
  • linkedItemClosed
  • printReadyStateChange
  • beforeRender
  • renderCancelled
  • beforeResize
  • resized
  • resizeCancelled
  • beforeDispose
  • disposed
  • disposeCancelled
  • pageNavigated
  • rotationEnd
  • rotationStart
  • centerLabelRollover
  • centerLabelRollout
  • centerLabelClick
  • centerLabelChanged
  • zoomReset
  • zoomedOut
  • zoomedIn
  • zoomed
  • zoomModeChanged
  • pinned
  • alertComplete
  • realTimeUpdateComplete
  • realTimeUpdateError
  • legendPointerDragStart
  • legendPointerDragStop
  • legendRangeUpdated
  • dataplotRollOver
  • dataplotRollOut
  • dataplotClick
  • linkClicked
  • processClick
  • processRollOver
  • processRollOut
  • categoryClick
  • categoryRollOver
  • categoryRollOut
  • milestoneClick
  • milestoneRollOver
  • milestoneRollOut
  • overlayButtonClick
  • loaded
  • rendered
  • drawComplete
  • renderComplete
  • dataInvalid
  • dataXMLInvalid
  • dataLoaded
  • noDataToDisplay
  • entityRollOut
  • entityRollOver
  • entityClick
  • connectorRollOver
  • connectorRollOut
  • connectorClick
  • markerRollOver
  • markerRollOut
  • markerClick
  • dataRestored
  • beforeDataSubmit
  • dataSubmitError
  • dataSubmitted
  • dataSubmitCancelled
  • chartUpdated
  • nodeAdded
  • nodeUpdated
  • nodeDeleted
  • connectorAdded
  • connectorUpdated
  • connectorDeleted
  • labelAdded
  • labelDeleted
  • selectionRemoved
  • selectionStart
  • selectionEnd
  • labelClick
  • labelRollOver
  • labelRollOut
  • labelDragStart
  • labelDragEnd
  • dataplotDragStart
  • dataplotDragEnd
  • chartTypeChanged
  • chartClick
  • chartMouseMove
  • chartRollOver
  • chartRollOut
  • backgroundLoaded
  • backgroundLoadError
  • legendItemClicked
  • legendItemRollover
  • legendItemRollout
  • logoRollover
  • logoRollout
  • logoClick
  • logoLoaded
  • logoLoadError
  • beforeExport
  • exported
  • exportCancelled
  • beforePrint
  • printComplete
  • printCancelled
  • dataLabelClick
  • dataLabelRollOver
  • dataLabelRollOut
  • scrollStart
  • scrollEnd
  • slicingStart
  • slicingEnd
  • chartCleared
  • dataLoadRequestCompleted
  • dataLoadError
  • dataLoadCancelled
  • dataLoadRequestCancelled
  • dataUpdated
  • dataUpdateCancelled
  • dataLoadRequested
  • beforeDataUpdate
Top