Loading
Events
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
The FusionCharts framework version is returned in form of an array. This is equivalent to the array version
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:
-
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 usingeventObject.sender.id
.) -
Pass the event listener as the FusionCharts constructor parameter itself.
Parameters
Height of the chart in pixels or percentage.
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 of the chart in pixels or percentage .
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 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
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
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 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
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
This contains the reference to the container HTMLDOMElement
within which the chart is to be rendered.
Width of the chart in percent or pixels.
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
This contains the refernce to the container HTMLDOMElement
whithin which the chart is to be rendered.
Width of the chart in percent or pixels.
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
Current width of the chart in pixels or percentage
Current height of the chart in pixels or percentage
new width of the chart in pixels or percentage
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 of the chart after being resized
Height of the chart after being resized
The width of the chart previous to being resized
The height of the chart previous to being resized
Width of the chart in pixels provided when chart was rendered using render.
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
Current width of the chart in pixels or percentage.
Current height of the chart in pixels or percentage.
The width of the chart that was requested to be set, but was cancelled.
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
Contains data of the sought page, with color, displayValue, originalText, value and y position for each data points.
Tells the index of the sought page.
rotationEnd
This event is fired on drag rotation end of pie chart.
Parameters
rotationStart
This event is fired on drag rotation start of pie chart.
Parameters
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
is the text for display at center label
is the relative X-Cordinate to chart container where the chart was clicked
is the relative Y-Cordinate to chart container where the chart was clicked.
is the DOM element where the chart is being rendered.
height of the chart
width of the chart
is the chart id
is the relative X-Cordinate to screen where the chart is clicked
is the relative Y-Cordinate to screen where the chart is clicked
is the height of the DOM element where the chart is being rendered in pixels
is the width of the DOM element where the chart is being rendered in pixels
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
is the text for display at center label
is the relative X-Cordinate to chart container where the chart was clicked
is the relative Y-Cordinate to chart container where the chart was clicked.
is the DOM element where the chart is being rendered.
height of the chart
width of the chart
is the chart id
is the relative X-Cordinate to screen where the chart is clicked
is the relative Y-Cordinate to screen where the chart is clicked
is the height of the DOM element where the chart is being rendered in pixels
is the width of the DOM element where the chart is being rendered in pixels
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
is the text for display at center label.
is the relative X-Cordinate to chart container where the chart was clicked.
is the relative Y-Cordinate to chart container where the chart was clicked.
is the DOM element where the chart is being rendered.
height of the chart
width of the chart
is the chart id
is the relative X-Cordinate to screen where the chart is clicked
is the relative Y-Cordinate to screen where the chart is clicked
is the height of the DOM element where the chart is being rendered in pixels
is the width of the DOM element where the chart is being rendered in pixels
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
is the text for display at center label
is the relative X-Cordinate to chart container where the chart was clicked
is the relative Y-Cordinate to chart container where the chart was clicked.
is the DOM element where the chart is being rendered.
height of the chart
width of the chart
is the chart id
is the relative X-Cordinate to screen where the chart is clicked
is the relative Y-Cordinate to screen where the chart is clicked
is the height of the DOM element where the chart is being rendered in pixels
is the width of the DOM element where the chart is being rendered in pixels
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
Indicates to which zoom level the user has zoomed out to. 1
indicates that the chart has been completely zoomed out.
The data start index that is in view for the zoomed out level
The label of the data of the starting item in view.
The data end index that is in view for the zoomed out level
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
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.
The data start index that is in view for the zoomed in level
The label of the data of the starting item in view.
The data end index that is in view for the zoomed in level
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
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.
The data start index that is in view for the zoomed level
The label of the data of the starting item in view.
The data end index that is in view for the zoomed level
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
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
The data start index of the pinned range.
The label of the data of the starting item of the pinned range.
The data end index that is in view of the pinned range.
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
realTimeUpdateError
This event is raised where there is an error in performing a real-time chart data update using dataStreamUrl
attribute.
Parameters
Nature of data load request. Presently its value is ‘XmlHttprequest’.
URL of the data source.
The object which has fetched data.
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
Indicates whether the index is 0 or 1.
It is an object containing the scale start value and scale end value.
It is the legend pointer height in pixels or percent.
It is the legend pointer width in pixels or percent.
legendPointerDragStop
This event is fired when the legend Pointer Drag is stopped.
Parameters
Indicates whether the index is 0 or 1.
Its an object containing the scale start value and the scale end value.
It is the legend pointer height in pixels or percentage.
It is the legend pointer width in pixels or percentage.
legendRangeUpdated
This is event is fired if there is any change in scale.
Parameters
dataplotRollOver
Parameters
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The position of the dataset in order of its definition in source data.
The seriesName
of the dataset.
The position of the data-plot in order of its definition in source dataset.
The value of the data-plot that trigerred this event
The displayValue
attribute that has been set for the data-plot.
The x-axis label that corresponds to the data-plot
The tooltext that is displayed when hovered over the data-plot
dataplotRollOut
Parameters
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The position of the dataset in order of its definition in source data.
The seriesName
of the dataset.
The position of the data-plot in order of its definition in source dataset.
The value of the data-plot that trigerred this event
The displayValue
attribute that has been set for the data-plot.
The x-axis label that corresponds to the data-plot
The tooltext that is displayed when hovered over the data-plot
dataplotClick
Parameters
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The position of the dataset in order of its definition in source data.
The seriesName
of the dataset.
The position of the data-plot in order of its definition in source dataset.
The value of the data-plot that trigerred this event
The displayValue
attribute that has been set for the data-plot.
The x-axis label that corresponds to the data-plot
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
This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
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
The alignment of the process label.
The vertical alignment of the process label.
The id of the process.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the process on mouse click.
The label in the process
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
The alignment of the process label.
The vertical alignment of the process label.
The id of the process.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the process on mouse click.
The label in the process.
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
The alignment of the process label.
The vertical alignment of the process label.
The id of the process.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the process on mouse click.
The label in the process
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
The alignment of the category label.
The vertical alignment of the category label.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the category on mouse click.
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
The alignment of the category label.
The vertical alignment of the category label.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the category on mouse click.
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
The alignment of the category label.
The vertical alignment of the category label.
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
URL set for the category on mouse click.
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
The date of the milestone.
The number of sides of the milestone.
The radius of the milestone.
The id of the task to which this milestone relates to.
The tooltext that is displayed when hovered over the milestone
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
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
The date of the milestone.
The number of sides of the milestone.
The radius of the milestone.
The id of the task to which this milestone relates to.
The tooltext that is displayed when hovered over the milestone
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
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
The date of the milestone.
The number of sides of the milestone.
The radius of the milestone.
The id of the task to which this milestone relates to.
The tooltext that is displayed when hovered over the milestone
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
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
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
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
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
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
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
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
The value of the entity.
The label of the entity.
Short label used by the user.
The ID of the entity stored in the JS file.
This could be the original ID or the ID assigned by the user.
Example
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
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
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
The Id of the marker from which the connector starts.
The Id of the marker to which the connector is drawn.
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
The original X co-ordinate of the marker.
The original Y co-ordinate of the marker.
The scaled value of X co-ordinate of the marker.
The scaled value of Y co-ordinate of the marker.
The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
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
The original X co-ordinate of the marker.
The original Y co-ordinate of the marker.
The scaled value of X co-ordinate of the marker.
The scaled value of Y co-ordinate of the marker.
The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
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
The original X co-ordinate of the marker.
The original Y co-ordinate of the marker.
The scaled value of X co-ordinate of the marker.
The scaled value of Y co-ordinate of the marker.
The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
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
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
Contains the XML string with complete chart data.
Tells the status code of the ajax POST request
Contains the ajax error message.
URL to which the data is sent as ajax POST request.
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
Contains the XML string with complete chart data.
Contains the reponse returned by the web server to which the HTTP POST request was submitted.
URL to which the data is sent as HTTP POST request.
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
Contains the XML string with complete chart data.
Tells the status code of the ajax POST request
Contains the ajax error message.
URL to which the data is sent as ajax POST request.
XMLHttpRequest object which takes care of sending the XML chart data. In case of error, this object won’t be defined.
Example
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
The index of the dataset
Name of the dataset
Index of the node by the order which it was created
The relative X-Cordinate to chart container where the node was dropped. > Applicable to dragnode
chart only.
The relative Y-Cordinate to chart container where the node was dropped. > Applicable to dragnode
chart only.
Relative X-Cordinate to screen where the node was dropped > Applicable to dragnode
chart only.
Relative X-Cordinate to screen where the node was dropped > Applicable to dragnode
chart only.
Number assigned to the node > Applicable to dragnode
chart only.
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.
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 of the node. > Applicable to dragnode
chart only.
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 defined for the node. > Applicable to dragnode
chart only.
The updated value of the node. > Applicable to dragnode
chart only.
The updated value of the node. > Applicable to dragnode
chart only.
The value of the plot previous to being updated. > Applicable to dragcolumn2d
, dragline
and dragarea
charts only
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
Index of the dataset to which the newly added node belongs to.
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.
Index of the newly added node.
Height of the shape represented by the newly added node.
ID of the newly added node which can be set using id
attribute for set
tag.
Text displayed inside the shape of the newly added node.
URL associated with the newly added node.
Radius of the circumcirle for the shape of the newly added node.
Shape of the newly added node.
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.
Text that is displayed over the shape of the newly added node.
Width of the shape of the newly added node.
X Co-ordinate of the newly added node in reference with the canvas / axis.
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
Index of the dataset to which the deleted node belongs to.
Name of the dataset which can defined by the attribute seriesName
for dataset
tag in the chart data.
Height of the shape represented by the node.
ID of the node which can be set using id
attribute for set
tag.
Index of the updated node.
Text displayed inside the shape of the node.
URL associated with the deleted node.
Radius of the circumcirle for the shape of the node.
Shape of the updated node.
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.
Text that is displayed over the shape of the updated node.
Width of the shape of the updated node.
X Co-ordinate of the updated node in reference with the canvas / axis.
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
Index of the dataset to which the deleted node belongs to.
Name of the dataset which can defined by the attribute seriesName
for dataset
tag in the chart data.
Height of the shape represented by the node.
ID of the node which can be set using id
attribute for set
tag.
Index of the node deleted.
Text displayed inside the shape of the node.
URL associated with the deleted node.
Radius of the circumcirle for the shape of the node.
Shape of the deleted node.
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.
Text that is displayed over the shape of the deleted node.
Width of the shape of the deleted node.
X Co-ordinate of the deleted node in reference with the canvas / axis.
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
True if there is an arrow at the end of the link else false.
True if there is an arrow at the start of the link else false.
Contains the index number or the node id from which the link originated.
ID of the connector.
Text displayed for the connector that was deleted.
URL set for the connector on mouse click.
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
True if there is an arrow at the end of the link else false.
True if there is an arrow at the start of the link else false.
Contains the index number or the node id from which the link originated.
ID of the connector.
Text displayed for the connector that was deleted.
URL set for the connector on mouse click.
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
true
if there is an arrow at the end of the link else false
.
True if there is an arrow at the start of the link else false.
Contains the index number or the node id from which the link originated.
ID of the connector.
Text displayed for the connector that was deleted.
URL set for the connector on mouse click.
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
labelDeleted
This event is fired on deleting a label of a chart. This event is only applicable to DragNode chart.
Parameters
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
This returns the subset of data that was selected.
selectionStart
Raised when user starts to draw a selection box on a selectScatter
chart.
Parameters
The x-coordinate of the mouse with respect to the chart.
The y-coordinate of the mouse with respect to the chart.
The x-coordinate of the mouse with respect to the page.
The y-coordinate of the mouse with respect to the page.
The value on the canvas x-axis where the selection started.
The value on the canvas y-axis where the selection started.
selectionEnd
Raised when user completes a selection box on a selectScatter
chart.
Parameters
The x-coordinate of the mouse with respect to the chart.
The y-coordinate of the mouse with respect to the chart.
The x-coordinate of the mouse with respect to the page.
The y-coordinate of the mouse with respect to the page.
The value on the canvas x-axis where the selection started.
The value on the canvas y-axis where the selection started.
The value on the canvas x-axis where the selection ended.
The value on the canvas y-axis where the selection ended.
The x-coordinate from where selection started with respect to the chart.
The y-coordinate from where selection started with respect to the chart.
The width of the selection in pixels.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The x-value of the label node scaled as per the axis of the chart.
The y-value of the label node scaled as per the axis of the chart.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The x-value of the label node scaled as per the axis of the chart.
The y-value of the label node scaled as per the axis of the chart.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The x-value of the label node scaled as per the axis of the chart.
The y-value of the label node scaled as per the axis of the chart.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The x-value of the label node scaled as per the axis of the chart.
The y-value of the label node scaled as per the axis of the chart.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The x-value of the label node scaled as per the axis of the chart.
The y-value of the label node scaled as per the axis of the chart.
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
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The position of the dataset in order of its definition in source data.
The seriesName
of the dataset.
The position of the data-plot in order of its definition in source dataset.
Index of the node by the order in which it was created
Number assigned to the node
Applicable only to the
dragnode
chart.
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.
The tooltext that is displayed when hovered over the data-plot
Updated value of the node
Applicable only to the
dragnode
chart.
Updated value of the node
Applicable only to the
dragnode
chart.
Shape of the node
Applicable to
dragnode
chart only.
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.
Number of sides of the node, if it is a polygon or ‘undefined’, if it is a circle
Applicable to
dragnode
chart only.
Height of the shape represented by the node
Width of the shape represented by the node
Value of the data plot before being dragged
Applicable only to the
dragcolumn2d
,dragline
anddragarea
charts.
dataplotDragEnd
The four drag-able charts: dragnode
, dragcolumn2d
, dragline
and dragarea
raise this event when you finish dragging their data plots.
Parameters
x-coordinate of the pointer relative to the chart.
y-coordinate of the pointer relative to the chart.
x-coordinate of the pointer relative to the page.
y-coordinate of the pointer relative to the page.
The position of the dataset in order of its definition in source data.
The seriesName
of the dataset.
The position of the data-plot in order of its definition in source dataset.
Index of the node by the order in which it was created
Number assigned to the node
Applicable only to the
dragnode
chart.
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.
The tooltext that is displayed when hovered over the data-plot
Updated value of the x-coordinate of the node
Applicable only to the
dragnode
chart.
Updated value of the y-coordinate of the node
Applicable only to the
dragnode
chart.
Shape of the node
Applicable to
dragnode
chart only.
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.
Number of sides of the node, if it is a polygon or ‘undefined’, if it is a circle
Applicable to
dragnode
chart only.
Height of the shape represented by the node
Width of the shape represented by the node
Value of the data plot before being dragged
Applicable only to the
dragcolumn2d
,dragline
anddragarea
charts.
Value of the plot after being dragged and updated
Applicable only to the
dragcolumn2d
,dragline
anddragarea
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
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
The DOM element within which the chart has been rendered.
The id
of the chart that has triggered this event.
The height of the chart specified at the time of rendering the chart in pixels or percent.
The width of the chart specified at the time of rendering the chart in pixels or percent.
The x-coordinate of the mouse relative to the position of the chart.
The y-coordinate of the mouse relative to the position of the chart.
The x-coordinate of the mouse relative to the document.
The y-coordinate of the mouse relative to the document.
The height of the chart in pixels. This is equivalent to the offsetHeight
of the chart container.
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
The DOM element within which the chart has been rendered.
The id
of the chart that has triggered this event.
The height of the chart specified at the time of rendering the chart in pixels or percent.
The width of the chart specified at the time of rendering the chart in pixels or percent.
The x-coordinate of the mouse relative to the position of the chart.
The y-coordinate of the mouse relative to the position of the chart.
The x-coordinate of the mouse relative to the document.
The y-coordinate of the mouse relative to the document.
The height of the chart in pixels. This is equivalent to the offsetHeight
of the chart container
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
The DOM element within which the chart has been rendered.
The id
of the chart that has triggered this event.
The height of the chart specified at the time of rendering the chart in pixels or percent.
The width of the chart specified at the time of rendering the chart in pixels or percent.
The x-coordinate of the mouse relative to the position of the chart.
The y-coordinate of the mouse relative to the position of the chart.
The x-coordinate of the mouse relative to the document.
The y-coordinate of the mouse relative to the document.
The height of the chart in pixels. This is equivalent to the offsetHeight
of the chart container
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
The DOM element within which the chart has been rendered.
The id
of the chart that has triggered this event.
The height of the chart specified at the time of rendering the chart in pixels or percent.
The width of the chart specified at the time of rendering the chart in pixels or percent.
The x-coordinate of the mouse relative to the position of the chart.
The y-coordinate of the mouse relative to the position of the chart.
The x-coordinate of the mouse relative to the document.
The y-coordinate of the mouse relative to the document.
The height of the chart in pixels. This is equivalent to the offsetHeight
of the chart container
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 of the background image
The value of the image alpha
The mode in which the images are displayed in background of the chart
The vertical alignment of the background image
The horizontal alignment of the background image
The width of the background image
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
The URL of the background image
The alpha value of the image.
Contains error message.
The mode in which the images are displayed in the background of the chart.
Vertical alignment of the background image.
Horizontal alignment of the background image.
The value of the scaling of the image.
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
legendItemRollover
This event is fired when the mouse pointer is moved over any individual legend item.
Parameters
The relative X-Cordinate to chart container where the legend item was hovered.
The relative Y-Cordinate to chart container where the legend item was hovered
The index of the dataset
The name of the dataset
User-defined Id of the dataset.
The relative X-Cordinate to screen where the legend item was hovered.
The relative Y-Cordinate to screen where the legend item was hovered.
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
The relative X-Cordinate to chart container where the mouse is hovered out of legend item.
The relative Y-Cordinate to chart container where the mouse is hovered out of legend item.
The index of the dataset.
The name of the dataset.
User-defined Id of the dataset.
The relative X-Cordinate to screen where the mouse is hovered out of legend item.
The relative Y-Cordinate to screen where the mouse is hovered out of legend item.
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
The URL of the logo image.
The value of the alpha of the logo image.
The position of the logo.
The value of scaling of the logo image.
The URL linked to the logo which on clicking will be taken to the URL link.
The relative X-Cordinate to screen where the mouse was hovered over the logo.
The relative Y-Cordinate to screen where the mouse was hovered over the logo.
The relative Y-Cordinate to screen where the mouse was hovered over the logo.
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
The URL of the logo image.
The value of the alpha of the logo image.
The position of the logo.
The value of scaling for logo image.
The URL linked to the logo which on clicking will be taken to the URL link.
The relative X-Cordinate to screen where the mouse was hovered out of logo image.
The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
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
The URL of the logo image.
The value of the alpha of the logo image.
The position of the position of the logo.
The value of scaling for logo image.
The URL linked to the logo which on clicking will be taken to the URL link.
The relative X-Cordinate to screen where the mouse was hovered out of the chart logo.
The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
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
is the URL of the logo image.
is the value of the alpha of the logo image.
is the position of the chart logo.
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
is the URL of the logo image.
is the value of the alpha of the logo image.
is the position of the chart logo.
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.
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
The background color of the exported chart.
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
Whether to use client side export handlers (the value would be 1), or server side export handlers (the value would be 0).
This attribute specifies the name (excluding the extension) of the file to be exported.
The format in which the chart is exported. jpg
, png
, pdf`.
This refers to the path of the server-side export handler
Additional parameters sent by the chart when defined on the chart data using the exportParameters
chart attribute.
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
ID of the chart that has been exported
Indicated the success status of the export process. In case of failure the value is passed as 0. On success, 1 is provided
Success or failure message
The name and path of the file where the exported file has been saved.
The width of the chart
The height of the chart
exportCancelled
This event is fired when chart export is cancelled by calling eventObject.preventDefault()
during the beforeExport.
beforePrint
printComplete
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
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
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
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
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
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
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
The Url that could not be successfully loaded.
The format of the data that was expected from the Url.
In case any aspect of loading data results in a JavaScript error, the error object is passed on to this event for debugging purposes.
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
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
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
The data in one of the formats as in dataFormats, that has been passed on to the chart.
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
.
The original/source data as specified using data setter functions such as setChartData.
The data format of the original/source data.
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
The data in one of the formats as in dataFormats, that was supposed to be passed on to the chart.
The format in which the data was to be passed on for rendering.
The original/source data as specified using data setter functions such as setChartData.
The data format of the original/source data.
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
Nature of data load request. Presently its value is “XmlHttpRequest”
URL of the data source
Type of Data format. It can be either xml or json
Save the silent instruction to arguments.
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
URL of the data source.
URL of the data source.
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.
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.
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