Class: FusionCharts - FusionCharts XT Suite Documentation

new FusionCharts(options)

Create new instances of charts, gauges and maps using this function.

The preferred way to draw charts, gauges and maps using FusionCharts is to pass the chart configurations and data to this constructor and call render() on the returned instance. You can provide all the properties, data and event bindings of charts through the parameters passed to this function.

You can call methods of the FusionCharts class on the returned instance. For all practical purposes, this is the first step to creating a chart, gauges and maps using FusionCharts.

Accessing existing charts using FusionCharts() constructor:

The FusionCharts function has a dual behavior - other than creating new charts, it can also be used to access already created charts. This is done by dropping the new operator and passing only the chart id as a parameter. For example, var salesChart = FusionCharts('sales-chart'); will return the instance of the chart with the id "sales-chart". The previous code snippet is equivalent to var salesChart = FusionCharts.items['sales-chart'];. Refer to FusionCharts.items to know more.

Parameters:

Parameter Description

options

Type:: object

While creating a new instance of FusionCharts, you can pass an options object with all configuration parameters for that instance. All configurations passed through this object are referred to as "construction parameters". Through these parameters, you can customize the look and feel of a chart, pass data to the chart, configure its dimensions and bind to events.

Each of this object's properties correspond to a configuration option.

Properties

Parameter	Description
`type` Type: string Attributes: <optional>	Provide the name of the chart type to be rendered. Full list of charts is available at List of Charts. This parameter controls what chart will be rendered. The data passed to the chart has to be compatible with the chart type specified here. Alternatively, you can also call FusionCharts#chartType on the chart instance to provide the chart type.
`id` Type: string Attributes: <optional>	This name is used to refer to the current instance after the chart has been created. The chart instance is available under this name in FusionCharts.items. If no `id` is provided, FusionCharts automatically generates an `id` for each chart.
`width` Type: numeric or percent Attributes: <optional> Default: "400"	Set the width in pixels or percent such as `640` or `'50%'`. If width is in pixels, there is no need to provide the `px` unit suffix. You can call FusionCharts#resizeTo function on the chart instance to set the width later on.
`height` Type: numeric or percent Attributes: <optional> Default: "300"	Set the height in pixels or percent such as `640` or `'50%'`. If height is in pixels, there is no need to provide the `px` unit suffix. You can call FusionCharts#resizeTo function on the chart instance to set the height later on.
`renderAt` Type: string or DOMElement Attributes: <optional>	A chart needs reference to a DOM element on the page where it will be rendered. You can provide the HTML ID of the element as a string to this option, or you can pass a reference of the DOMElement itself where the chart needs to be rendered. For example, if you have a DOMElement like `<div class='chart-1' id='chart-container'></div>`, you can provide the value of the `div`'s `id` attribute to this option as a string. Alternatively, you can pass direct reference to the DOMElement like: `renderAt: document.getElementByClassName("chart-1")`. Instead of providing the DOMElement here, it can also be passed as the first parameter to the FusionCharts.render function. Setting the DOMElement in FusionCharts.render function overrides the value set here.
`dataFormat` Type: FusionCharts~dataFormats Attributes: <optional>	This is the name of the format of data passed to the `dataSource` option below. Currently, FusionCharts accepts only JSON and XML data. The value for this option is one of the formats specified in FusionCharts~dataFormats.
`dataSource` Type: string or object Attributes: <optional>	Provide the source of data and configuration of the chart. FusionCharts accepts data in the formats specified in FusionCharts~dataFormats. This is the preferred way to set data and configuration of the chart. The data and configuration can also be updated or set using the functions FusionCharts#setChartData and FusionCharts#setChartDataUrl.
`events` Type: object Attributes: <optional>	You can bind multiple events to this particular chart instance through this option. You need to pass an object to this option, where each key is an event name fired by FusionCharts and value for that key is a callback in the format of FusionCharts~eventListener. To bind multiple charts to the same event, you need to use FusionCharts#addEventListener function instead.
`link` Type: object Attributes: <optional>	Provide LinkedCharts configuration. See FusionCharts#configureLink for details.
`showDataLoadingMessage` Type: boolean Attributes: <optional> Default: false	FusionCharts shows a message while it is retrieving data from a `url` provided as `dataSource`. While displaying the message the chart is grayed out and interaction on it is blocked. This can be prevented by setting this option to `false`.
`showChartLoadingMessage` Type: boolean Attributes: <optional> Default: true	Shows `Loading chart...` message in `renderAt` container if the chart needs to load additional resource/JS files. This can be turned off by setting this option to `false`.
`baseChartMessageFont` Type: string Attributes: <optional> Default: 'Verdana'	Allows to set the common custom font face for all chart messages.
`baseChartMessageFontSize` Type: string Attributes: <optional> Default: '10'	Allows to set the common custom font size for all chart messages.
`baseChartMessageColor` Type: hexcolor Attributes: <optional> Default: '#666666'	Allows to set the common custom font color for all chart messages.
`dataLoadStartMessage` Type: string Attributes: <optional> Default: 'Retrieving data. Please wait.'	Allows to set the message to be displayed before the chart data begins loading. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`dataLoadErrorMessage` Type: string Attributes: <optional> Default: 'Error in loading data.'	Allows to set the message to be displayed when there is an error loading the chart data. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`dataInvalidMessage` Type: string Attributes: <optional> Default: 'Invalid data.'	Allows to set the message to be displayed when the data loaded for the chart is invalid. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`dataEmptyMessage` Type: string Attributes: <optional> Default: 'No data to display.'	Allows to set the message to be displayed if data loaded for the chart is empty. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`typeNotSupportedMessage` Type: string Attributes: <optional> Default: 'Chart type not supported.'	Allows to set the message to be displayed if specified chart type is not supported. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`loadMessage` Type: string Attributes: <optional> Default: 'Loading chart. Please wait.'	Allows to set the message to be displayed when the chart begins to load. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`renderErrorMessage` Type: string Attributes: <optional> Default: 'Unable to render chart.'	Allows to set the message to be displayed if there was an error while rendering the chart. Additional properties like the font face, size, and color can be set by suffixing the property name with the corresponding message key, e.g. dataLoadStartMessageFont, dataLoadStartMessageFontSize, dataLoadStartMessageColor. If message keys are not specified, base cosmetics are used.
`containerBackgroundColor` Type: hexcolor Attributes: <optional> Default: "#ffffff"	Sets the background color of the chart's container HTML DOM element. It is not same as `bgColor` chart attribute. To see this background color, a chart's own background alpha must be set to `0` by setting `bgAlpha` attribute to `"0"` in chart attributes.
`containerBackgroundOpacity` Type: opacity Attributes: <optional> Default: 1	Sets the opacity of the container element. Useful if the chart has underlying HTML elements or background image that needs to be made visible. If opacity is reduced, you need to configure the chart itself to be transparent by setting the `bgAlpha` chart attribute.
`containerClassName` Type: string Attributes: <optional>	Sets the CSS class that will be set on the container DOM element of the rendered chart. Default is `fusioncharts-container`.

Example

<html>
<head>
<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    // Create a new instance of FusionCharts for rendering inside an HTML
    // `&lt;div&gt;` element with id `my-chart-container`.
    var myChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',

        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Harry's SuperMart",
                subCaption: "Top 5 stores in last month by revenue",
            },
            data:[{
                label: "Bakersfield Central",
                value: "880000"
            },
            {
                label: "Garden Groove harbour",
                value: "730000"
            },
            {
                label: "Los Angeles Topanga",
                value: "590000"
            },
            {
                label: "Compton-Rancho Dom",
                value: "520000"
            },
            {
                label: "Daly City Serramonte",
                value: "330000"
            }]
        }
    });

    // Render the chart.
    myChart.render();
});
</script>
<body>
    <div id="chart-container">FusionCharts will load here...</div>
</body>
</html>

Namespaces

ajax
debugger
printManager
annotations

Members

Chart level API

ref :DOMElement

Every instance of FusionCharts, when rendered within a container element (provided by the renderAt parameter,) creates a <span> element within which a chart is rendered. As such, the user-provided container element is not polluted by the DOM elements created by a chart.

Type:

DOMElement

Since:

3.2.0

Deprecated:

3.4.0 - This method has been deprecated as direct access to `DOMElement` of the chart has become redundant.

Example

// Iterate on all charts rendered on a page and move them to a common location
var sidebar = document.getElementById('sidebar-html-div'), // assuming that your common container is this
    chart;

for (chart in FusionCharts.items) {
    chart = FusionCharts.items[chart];
    chart.ref && sidebar.appendChild(chart.ref.parentNode);
}

Data

<inner> dataFormats

The list of data formats that can be passed over to FusionCharts#setChartData or FusionCharts#setChartDataUrl or during creating a new instance of FusionCharts. The parameters that accept data format should have one of the values from this enumeration.

Properties:

Property	Description
`json` Type: string	This denotes that the data being passed on to the chart or returned by the chart is in standard `JSON` format. The JSON format can be a string containg JSON data or it can also be a JavaScript object.
`jsonurl` Type: string	Specifying the data format as `jsonurl` indicates that the data is not `JSON` data by itself but rather the data being passed is a `URL` pointing to a file that contains `JSON` data.
`csv` Type: string	FusionCharts supports data in comma separated value format. However, this is presently supported to retrieve data set in one of the other formats and data cannot be passed on to chart in `CSV` format.
`xml` Type: string	Specifies that the data passed on to the chart is in `XML` format. As such the data is expected to be a string containing XML data.
`xmlurl` Type: string	The `xml` data format is transportable by nature. This means that specifying the data as an `URL` to a file that contains XML is a valid option.

FusionCharts framework level API

<static> items :object

The reference to every new instance of FusionCharts is maintained in this object with the chart ID as the key. Upon FusionCharts#dispose of the instance, the key is removed from this. One can iterate through all instances of FusionCharts using this object.

A short-hand approach to accessing a single chart by its id is to use FusionCharts function itself but without the new operator and by passing the chart id as the first parameter.

Type:

object

Examples

// Assuming a page has many instances of FusionCharts, but
// none of them are rendered, we are going to iterate through all and
// render them.
for (var item in FusionCharts.items) {
    FusionCharts.items[item].render();
}

// Alternate method to access the charts using FusionCharts function to retrieve the chart from its id.
for (var item in FusionCharts.items) {
    FusionCharts(item).render();
}

<inner> DOMInsertModes :string

When a chart is rendered within a DOM element on a page, the chart by default clears its contents and replaces them with the chart. However, this behavior can be changed by specifying the insertMode of the chart during construction of a chart or while calling FusionCharts#render.

Type:

string

<static> version :array

Specifies the framework version of FusionCharts. In the format [major, minor, revision, nature, build]

Type:

array

annotations :FusionCharts~annotations

Annotations are a set of customisable shapes (squares, circles, texts, images) that can be created and positioned anywhere on charts. Whenever a new FusionCharts object is created, one instance of the class FusionCharts~annotations is created. Whenever annotation definitions are added via data, this object is updated with the same.

Type:

FusionCharts~annotations

<inner> chartStatusMessages :string

Type:

string

Methods

Event handling

<static> addEventListener(type, listener)

Bind callbacks to events fired throughout FusionCharts. This method can be used to listen to events across all FusionCharts instances on a page.

An event listener is used to execute custom functions when an event is fired. FusionCharts fires events at all stages of creating, updating, rendering or removing a chart. This function lets you tap into any of these events and provide your own functions which will be called when those events are triggered.

An alternative to this function is to use FusionCharts#addEventListener method on a chart instance to bind to an event fired by a specific chart.

Parameters:

Parameter	Description
`type` Type: string or array	The event name to listen to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
`listener` Type: FusionCharts~eventListener	Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.

Example

// Show a message when a number of charts have been rendered on a page.
FusionCharts.ready(function {
    var counter = 0,
        threshold = 3;

    FusionCharts.addEventListener("rendered", function (eventObject) {
        counter++;
        if (counter > threshold) {
            alert("More than " + threshold + "charts rendered!");
        }
    });
});

addEventListener(type, listener)

Listen to events fired by an individual chart. For more information on the available events, refer to the events section.

Parameters:

Parameter	Description
`type` Type: string or Array.<string>	The event name that needs to be listened to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
`listener` Type: FusionCharts~eventListener	Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.

Chart level API

dispose()

Calling this function on an instance of FusionCharts disposes the chart completely. This removes it from the DOM tree and also clears the entire chart object. Upon successful disposal, chartInstance.disposed is set to true.

It is recommended that you dispose unused charts to save memory and avoid memory leaks in your application or dashboard.

Fires:

centerLabel(labelText, options)

Sets the center label in Dougnut 2D chart. The label cosmetics are configurable via the second optional parameter, which accepts a host of related properties.

Available on doughnut chart only.

Parameters:

Parameter Description

labelText

Type:: string

The text to be displayed at doughnut center.

options

Type:: object
Attributes:: <optional>

The optional parameter that holds a host of configurable params with most them being cosmetic properties of the center label. The properties are case sensitive.

Properties

Parameter	Description
`font` Type: string Attributes: <optional>	Sets the font face of the label.
`fontSize` Type: string Attributes: <optional>	Defines the font size of the label.
`bold` Type: boolean Attributes: <optional>	Specifies of whether the label be bold.
`italic` Type: boolean Attributes: <optional>	Specifies of whether the label be in italic.
`color` Type: hexcolor Attributes: <optional>	Sets the color of the label text.
`alpha` Type: alpha Attributes: <optional>	Sets the opacity of the label text.
`hoverColor` Type: hexcolor Attributes: <optional>	Sets the hover color of the label text.
`hoverAlpha` Type: alpha Attributes: <optional>	Sets the hover opacity of the label text.
`bgColor` Type: hexcolor Attributes: <optional>	Sets the color of the label background.
`bgAlpha` Type: alpha Attributes: <optional>	Sets the opacity of the label background.
`borderColor` Type: hexcolor Attributes: <optional>	Sets the color of the label background border.
`borderAlpha` Type: alpha Attributes: <optional>	Sets the opacity of the label background border.
`borderThickness` Type: number Attributes: <optional>	Sets the thickness of the label background border.
`borderRadius` Type: number Attributes: <optional>	Sets the radius for rounded label background.
`padding` Type: number Attributes: <optional>	The padding between extremities of the label and inner periphery of the doughnut. For rectangular label background, it's relative to any of the 4 corners. While for circular background, it's the gap between the 2 concentric circles, background border and inner periphery.
`textPadding` Type: number Attributes: <optional>	For rectangular label background, it's the gutter between the text and the background border. While for circular background, it's the minimum space between the background border and the containing circle of the text.
`toolText` Type: string Attributes: <optional>	Sets the tooltext for the label.

Fires:

FusionCharts#event:centerLabelChanged

Example

// Render a doughnut 2d chart and set center label with some
// configuring params on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "doughnut2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of setting the center label when clicked on
    // a button (with an id set-center-label).
    document.getElementById("set-center-label").onclick = function () {
        chart.centerLabel("The central label", {bold: true, toolText: "center label tooltext"});
    };
});

isPlotItemSliced(index) → {boolean}

Pie charts have slices that can be clicked to slice in and out. Checks whether a particular wedge of Pie or Doughnut chart is sliced-out or sliced-in.

Available on pie and doughnut chart types only.

Parameters:

Parameter	Description
`index` Type: number	The index of the data corresponding to the pie/doughnut slice.

Returns:

The sliced state of the pie/doughnut wedge. Returns true if it's sliced out, or false if it's sliced in.

Type:

boolean

Example

// Render a pie 2d chart with some data in sliced out state, provide data index
// in an input textfield and get the sliced state of the pie on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Get the sliced state of a pie returned when clicked on a button
    // (with an id pie-sliced-state). It picks the data index from
    // an input textfield (with id pie-data-index).
    document.getElementById("pie-sliced-state").onclick = function () {
        var dataIndex = document.getElementById("pie-data-index").value,
            slicedState = chart.isPlotItemSliced(dataIndex);
    };
});

slicePlotItem(index, slice) → {boolean}

Pie charts have slices. These slices can be clicked by users to slice in or slice out. Slices a pie/doughnut wedge to in / out state. In absence of the optional second parameter, it toggles the sliced state of the pie. The second parameter only enforces a specific sliced state.

Available on pie and doughnut chart types only.

Parameters:

Parameter	Description
`index` Type: number	The index of the data corresponding to the pie/doughnut slice.
`slice` Type: boolean Attributes: <optional>	Gives direction to chart on what is the required sliced state. For `true`, it slices out, if in sliced-in state. Or else, maintains it's sliced-out state. And vice-versa.

Fires:

Returns:

The final sliced state of the pie/doughnut wedge. Returns true if it's sliced out, or false if it's sliced in.

Type:

boolean

Example

// Render a pie 2d chart, provide data index in an input textfield
// and toggle the sliced state of the pie on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Toggle the sliced state of the pie when clicked on a button
    // (with an id pie-sliced-state). It picks the data index from
    // an input textfield (with id pie-data-index).
    document.getElementById("pie-sliced-state").onclick = function () {
        var dataIndex = document.getElementById("pie-data-index").value;
        chart.slicePlotItem(dataIndex);
    };
});

startingAngle(angle, relative) → {degrees}

Rotates the pie/doughnut chart to a specific angle or by a specific angle. The mode of operation is controlled by the optional second parameter. Even the first parameter is optional, in absence of which, the chart doesn't rotate and simply returns the current starting angle of the pie/doughnut chart.

Starting angle of a pie/doughnut chart is the angle at which the starting face of the first data is aligned to. Each pie is drawn in counter clock-wise direction.

Available on pie and doughnut chart types only.

Parameters:

Parameter	Description
`angle` Type: degrees Attributes: <optional> Default: 0	The angle by which to rotate the entire pie/doughnut chart.
`relative` Type: boolean Attributes: <optional> Default: false	Specify whether the angle being set is relative to the current angle or with respect to absolute 0.

Returns:

The final state of the starting angle of the chart.

Type:

degrees

Example

// Render a pie 2d chart and rotate the chart by 90 degrees on click of a button
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of rotating the chart by 90 degrees when clicked on
    // a button (with an id rotate-chart).
    document.getElementById("rotate-chart").onclick = function () {
        chart.startingAngle(90, true);
    };
});

<static> removeEventListener(type, listener)

Removes an event that was originally added using FusionCharts.addEventListener.

Parameters:

Parameter	Description
`type` Type: string	The event name whose listener needs to be removed/detached.
`listener` Type: function	The listener function that needs to be removed.

removeEventListener(type, listener)

Removes an event that was originally added using FusionCharts#addEventListener.

Parameters:

Parameter	Description
`type` Type: string	The event name whose listener needs to be removed/detached.
`listener` Type: function	The listener function that needs to be removed.

resizeTo(width, height)

Calling this function on a chart instance resizes the chart to the specified width or height. This function is only available for charts that have already rendered.

Similar to setting the width and height of a chart through the new FusionCharts() constructor, the values for width and height can be passed in number or percentage for this function. Setting a percentage causes the chart to partially redraw itself when chart container is resized.

Calling this function without a value for either width or height will return the current value of the width or height respectively.

For example, this function is useful in controlling the dimension of chart based on the change in dimension of a resizable dialog box. It is also useful in resizing charts for responsive layouts, based on device orientation change.

When dimension is set in percentage, the charts use a very low-profile polling at an interval of 300ms to check whether the chart container has effectively resized. It ignores repeated resizes.

Parameters:

Parameter	Description
`width` Type: numeric or percent Attributes: <optional>	Set the width of the chart in pixels or percent.
`height` Type: numeric or percent Attributes: <optional>	Set the height of the chart in pixels or percent.

Fires:

lockResize(state) → {boolean}

Controls a chart's automatic resizing ability when its dimension is in percentage.

This function has to be called before a chart has rendered. Using FusionCharts#hasRendered can be useful here.

If this function is called without parameter, it returns the current state of resize lock.

Parameters:

Parameter	Description
`state` Type: boolean Attributes: <optional>	Sending `true` for this parameter causes the automatic percentage based resize to be turned off. If resize is already locked, sending `false` unlocks it.

Returns:

Returns whether the chart's automatic resize feature has been locked or not.

Type:

boolean

clone(overrides, argsOnly) → {FusionCharts|object}

Use this function to create a copy of a chart instance. Cloning a chart object results in creation of a new chart with identical construction properties of the chart being cloned. A cloned chart is not rendered by default and needs to be provided a container DOM element to be rendered into. A cloned chart gets one auto-generated chart Id assigned.

Parameters:

Parameter	Description
`overrides` Type: object Attributes: <optional> <nullable>	This parameter can be very useful in instructing what changes needs to be done while cloning a chart. It accepts all the construction parameters of a new FusionCharts instance. For example, passing `pieChart.clone({type: 'column2d'});` will clone the pie chart, but set its chart-type as `column2d`.
`argsOnly` Type: boolean Attributes: <optional> Default: false	Setting this to `true` does not return a new FusionCharts object. Instead, it causes the function to return a serializable object that can be later passed on while creating a new FusionCharts and as such create a clone.

Returns:

Type:

FusionCharts or object

isActive() → {boolean}

Denotes whether a chart is "active" or not after being rendered. This is primarily relevant for Flash variant of the charts since they tend to loose functionality when hidden or scrolled away as a measure to save system resources.

For JavaScript charts, this returns false when a chart has not been rendered. As such, using the function {@linkFusionCharts#hasRendered} is more relevant.

Deprecated:

3.4.0 - The removal of Flash variant of the charts discards the use of this function since JavaScript are always "active" and does not loose its functionalities when out of viewport of the browser.

Returns:

Returns true if a Flash chart is visible and can communicate with the rest of the page using its internal JavaScript API. For JavaScript charts, this returns false when a chart has not been rendered.

Type:

boolean

chartType(value, options) → {string}

Gets or sets the chart type of an instance of FusionCharts.

To change the chart type, pass the new chart type as the first parameter to this function. The chart is automatically re-rendered when a new chart type is set. To get the current chart type, call this function without any parameters.

When the chart type is changed using this method, the chart is re-rendered and the FusionCharts#event:chartTypeChanged event is fired.

Parameters:

Parameter Description

value

Type:: string
Attributes:: <optional>

Sets the new chart type.

options

Type:: object
Attributes:: <optional>

During modifying the chart type using this method, additional options can be passed on to update chart data and re-render the chart at the same time. Note that these options are ignored if you do not provide a value (first) parameter.

Properties

Parameter	Description
`dataSource` Type: string or object	Provide a new source of data during the change of chart type.
`dataFormat` Type: FusionCharts~dataFormats Attributes: <optional>	Specify the data format of the new `dataSource` provided during chart-type update. If this is not provded, then it is assumed that the `dataSource` provided is same as the existing or default `dataFormat`. If `dataSource` is not provided, this parameter is ignored.

Since:

3.4.0

See:

FusionCharts.render

Fires:

FusionCharts#event:chartTypeChanged

Returns:

The current chart type is returned.

Type:

string

Example

// Render a column chart and on click of a button toggle it from column to pie and vice versa.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        dataSource: 'weekly-sales.json',
        dataFormat: 'jsonurl'
    }).render();

    // Assign the functionality of toggling chart type when clicked on
    // a button (with an id toggle-chart-type).
    document.getElementById('toggle-chart-type').onclick = function () {
        if (chart.chartType() === 'column2d') {
            chart.chartType('pie2d');
        }
        else {
            chart.chartType('column2d');
        }
    };
});

render(containerElement, insertMode, callback)

Creating a chart using new FusionCharts() merely creates a JavaScript instance of the chart. The chart is not yet made visible on the page. In order to render it in a location on the page, this function needs to be called. Usually, when the chart is instantiated, the renderAt construction parameter specifies the element on the page inside which the chart will be rendered. If the renderAt parameter is not provided during construction of the page, then the same can be provided as the first parameter of this function.

This function renders a chart inside a container element on a page. If a chart is already rendered, it can be re-rendered inside the same container DOM element or some other element.

Parameters:

Parameter	Description
`containerElement` Type: string or DOMElement Attributes: <optional>	A reference or `id` of the `DOMElement` inside which the chart is to be rendered. If this argument is not provided, it is assumed that the `renderAt` option is provided during creation of the chart.
`insertMode` Type: FusionCharts~DOMInsertModes Attributes: <optional> Default: replace	This parameter specifies the method using which the chart's DOM element will be inserted within the `containerElement`. For more information regarding DOM insert modes, see FusionCharts~DOMInsertModes
`callback` Type: FusionCharts~renderCallback Attributes: <optional>	This parameter is a callback function that is called after the chart is successfully rendered. The last parameter to `render()` is always treated as a callback if it is a function.

Fires:

configure(option, value)

FusionCharts displays various status messages while rendering a chart. For example, while a chart's data is being fetched from a remote URL, the chart will display "Retrieving data. Please wait." These messages can be configured using this function.

Parameters:

Parameter	Description
`option` Type: FusionCharts~chartStatusMessages	The option can either be a string specifying the property that is to be configured, in which case, the second parameter must be provided. Otherwise, this can be an object having key-value pair of all configuration options.
`value` Type: string Attributes: <optional>	In case the first parameter is a single key as string, this parameter must be provided as value of that configuration key.

Since:

3.2.0

<static> render(options, callback) → {FusionCharts}

Render FusionCharts directly using the simplest one-line argument parameter. This function directly renders FusionCharts into the container specified in arguments.

Calling this function directly is same as creating a new instance of FusionCharts and calling .render() on it, i.e., var chart = FusionCharts.render({...}); is same as var chart = new FusionCharts({...}); chart.render();.

Parameters:

Parameter	Description
`options` Type: object	Options required to create FusionCharts. The option must have the `renderAt` parameter for the render to happen instantly.
`callback` Type: FusionCharts~renderCallback Attributes: <optional>	Upon successful render of a chart, a function passed to this parameter is called.

Fires:

Returns:

Returns the newly created instance of FusionCharts object.

Type:

FusionCharts

Example

FusionCharts.ready(function () {
    var chart = FusionCharts.render({
        type: "column2d",
        renderAt: "chart-container-div",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    });
});

hasRendered() → {boolean}

Returns whether a chart has been successfully rendered or not.

See:

Returns:

Type:

boolean

setTransparent(transparency) → {boolean}

Sets the chart's container background color as transparent. This is not the chart's background. It is the background of the container DOM element within which the chart has been rendered.

Parameters:

Parameter	Description
`transparency` Type: boolean	Passing `true` implies that the chart is transparent.

Deprecated:

3.4.0 - The container transparency can now be controlled using the `containerBackgroundOpacity` parameter while creating a new instance of FusionCharts.

Returns:

Type:

boolean

Realtime chart API

feedData(stream)

This function feeds real-time data to real-time charts and gauges. The function accepts a string containing the real-time data.

Parameters:

Parameter	Description
`stream` Type: string

See:

getData()

This function returns the value of the data set on real-time charts and gauges.

See:

setData(value, label)

This function feeds real-time data to real-time gauges. In single value gauges (LEDs, Bulb, Cylinder, Thermometer) the function takes a numeric value as the parameter. For Angular gauge and Horizontal Linear gauge, this function accepts two parameters - the dial number and the value to update.

Parameters:

Parameter	Description
`value` Type: string
`label` Type: string

See:

stopUpdate()

See:

restartUpdate()

See:

isUpdateActive()

See:

clearChart()

This function is used to clear the entire canvas when a real-time chart is being updated.

An alternative to using this function is to select the "Clear Chart" option from real-time context menu. The real-time context menu can be activated by setting the showRTMenuItem attribute to 1 in chart configuration.

See:

Fires:

FusionCharts#event:chartCleared

Data

setChartAttribute(attributes, value)

Updates a chart's data attributes with the new attribute-value pair. In other words, it updates a chart's data definition root. That would be <chart> node in case data is in XML format or the chart {} object in case it is in JSON format. You must have the chart's data being set for these attributes to take effect.

This function is useful when updating a chart's configuration after it has been rendered once. The function internally retrieves the last data set on the chart (using FusionCharts#getJSONData). It then updates the { chart: {} } object of the data using the new attributes provided and then sets this data back to the chart.

Setting the value of a parameter to null causes the attribute to be removed (unset) and restored to it's default value.

Parameters:

Parameter	Description
`attributes` Type: object or string	The set of attributes to be is passed on as key-value pair of an object. In case of updating a single attribute, the key can be passed as a `string` and the value as the second parameter.
`value` Type: string Attributes: <optional> <nullable>	In case the first parameter is a single attribute as string, the second parameter (i.e. this parameter) must be provided as the value of that key.

Example

// Here we would render a chart in a DOM element with an id, say "chart-container", and upon clicking the
// chart, we would toggle the visibility of its legend.
FusionCharts.ready(function () {
    FusionCharts.render({
        id: 'salesChart',
        type: 'pie2d',
        renderAt: 'chart-container',

        dataSource: {
            chart: {
                caption: 'Revenue distribution'
            },
            data: [
                { value: '22', label: 'Redistribution' },
                { value: '54', label: 'Internal Circulation' },
                { value: '24', label: 'Sale' },
            ]
        },

        events: {
            chartClick: function (event) {
                var chart = event.sender,
                    // Check whether legend is currently visible by fetching the showLegend attribute
                    legendVisible = !!+chart.getChartAttribute('showLegend');

                // Set the opposite of the current state of the legend's visibility.
                chart.setChartAttribute('showLegend', legendVisible ? '0' : '1');
            }
        }
    });
});

getChartAttribute(attribute) → {string|object}

Fetch value of chart attributes (configurations) that have been explicitly applied to root level chart. This function can be used to return value of a single attribute or a list of attributes or all attributes have been applied to the chart.

To fetch a single attribute, pass the name of the attribute as a string.
To fetch a list of selected attributes, pass an array of attribute names. This will return an object with items in the order in which they are provided in the array.
To fetch a list of all attributes, do not pass a parameter to this function.

If any attribute requested is not set on the chart, the value for that attribute is returned as undefined. This will be undefined even for values that are internally computed but not explicitly set. For example, for Multi-series Column2D charts, showLegend defaults to "1". But, if showLegend is not provided as part of chart configuration, requesting the value of showLegend through this function will return undefined.

Parameters:

Parameter	Description
`attribute` Type: string or Array.<string> Attributes: <optional>	The attribute or an array of attributes that is to be fetched. If this parameter is not provided, then all available chart attributes are returned.

Returns:

The value of the attribute in form of a string in case a single attribute was requested. Otherwise, an object containing a set of key value pairs.

Type:

string or object

getXML() → {string}

This function returns the data and and configuration set on a chart in XML format. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#getXMLData, which does not have this limitation of being available only after the loaded event has been fired.

Deprecated:

3.2.0 - It is recommended that the alternate functions FusionCharts#getXMLData or FusionCharts#getChartData be used instead of this.

See:

FusionCharts#getXMLData

Returns:

Type:

string

setDataXML()

Sets XML data set on chart. Equivalent to FusionCharts#setXMLData or FusionCharts#setChartData. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLData, which does not have this limitation of being available only after the loaded event has been fired.

Deprecated:

3.2.0 - It is recommended that the alternate functions FusionCharts#setXMLData or FusionCharts#setChartData be used instead of this.

See:

FusionCharts#setXMLData

setDataURL()

Sets XML data URL set on chart. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLUrl, which does not have this limitation of being available only after the loaded event has been fired.

Deprecated:

3.2.0 - It is recommended that the alternate functions FusionCharts#setXMLUrl or FusionCharts#setChartDataUrl be used instead of this.

See:

FusionCharts#setXMLUrl

setChartDataUrl(url, format)

Update the data of a chart by fetching contents from a URL. The URL can point to either a JSON or a XML file. The data format of the URL needs to be specified in the format parameter.

This function fetches content from the URL provided and passes the result to FusionCharts#setChartData to update chart data. So, if the chart is already rendered, it is updated with the new data as soon as it is fetched from the URL. If the chart is not rendered, data from the URL is fetched and stored locally till the chart is rendered.

If the data format of the URL is already known, an alternative to this function is to use either FusionCharts#setJSONUrl or FusionCharts#setXMLUrl to specify JSON or XML data URL respectively.

It is not recommended to use this function to set data to a new chart. Instead, it is preferred to pass the URL as dataSource in the FusionCharts constructor.

FusionCharts uses AJAX to transport data. So, ensure that the chart is running from a web-server in order to prevent browser's security restrictions of fetching local (file://) files.

Parameters:

Parameter	Description
`url` Type: string	The URL from where to fetch the data of the chart.
`format` Type: FusionCharts~dataFormats Attributes: <optional>	The format of data that is expected to contain in the `url` provided. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.

See:

Fires:

Example

// Render a chart and fetch data from a JSON file and then when a button is pressed, change the data.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container",
        dataSource: "weekly-sales.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of updating data to a button which already
    // exists in page body and has a specific Id.
    document.getElementById("data-update-button").onclick = function () {
        // Specify the new Url to fetch data from.
        chart.setChartDataUrl("average-employee-sales.json", "json");
    };
});

setChartData(data, format)

Update the data of a chart in the format specified in by the format parameter. The data passed as the format parameter should be in one of the FusionCharts~dataFormats. When this function is called on a chart which has already rendered, the chart is instantly updated with the new data.

This function can also be used to set data of a chart before it has rendered. In that case, the data being set is stored internally and passed on to the chart when it is rendered. However, this is not the preferred way to set chart data. Instead, initial chart data should be passed in the FusionCharts constructor.

If the data format is already known, an alternative to this function is to use either FusionCharts#setXMLData or FusionCharts#setJSONData to set XML or JSON data respectively.

Parameters:

Parameter	Description
`data` Type: string or object	The data to be passed on to the chart in one of the available data formats as specified by the `format` parameter.
`format` Type: FusionCharts~dataFormats Attributes: <optional>	The format of the data being passed on to the chart. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.

See:

Fires:

Example

// Create a chart in a page and pass data to it in `JSON` format and on click of a
// button update it with newer data.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "pie2d",
        renderAt: "chart-container",

                   dataSource: {
            chart: {
                caption: "Market Share",
                showPercentage: "1"
            },
            data: [
                { label: "Current Prototype", value: "30" },
                { label: "Revised Prototype", value: "35" },
                { label: "Previous Prototype", value: "25" },
                { label: "Recalled Prototype", value: "10" }
            ]
        },
        dataFormat: "json"
    }).render();

    // Set data on the chart using the setChartData function when a button is clicked.
    document.getElementById("update-data").onclick = function () {
        chart.setChartData({
            chart: {
                caption: "Market Share Impact",
                numberPrefix: "USD"
            },
            data: [
                { label: "Current Prototype", value: "13773" },
                { label: "Revised Prototype", value: "16069" },
                { label: "Previous Prototype", value: "11477" },
                { label: "Recalled Prototype", value: "4591" }
            ]
        }, "json");
    };
});

getChartData(format) → {object|string}

Fetch data that has been set on a chart in one of the formats specified in FusionCharts~dataFormats.

This function needs to be called on an existing chart. If this function is called on a chart which has no data set, it returns an empty object for json, an empty <chart /> element for xml and an empty string for csv.

Parameters:

Parameter	Description
`format` Type: FusionCharts~dataFormats	The format in which the data is to be retrieved from the chart.

See:

Returns:

Type:

object or string

Example

// Render a chart and upon click of a button alert the chart's data in
// CSV format.
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container",
        dataSource: "weekly-sales.json",
        dataFormat: "jsonurl"
    }).render();

    // Assign the functionality of retrieving and alerting CSV data to
    // click event of a button
    document.getElementById("alert-csv-data").onclick = function () {
        alert(chart.getChartData("csv"));
    };
});

dataReady(available) → {boolean|undefined}

This function is used to determine whether a chart will render properly with the data set on it. This includes data that are set using functions like FusionCharts#setChartData or FusionCharts#setChartDataUrl.

If the function is not able to determine whether the data is ready or not, it returns undefined. It will return true or false only after a chart has completed rendering, that is, the after the renderComplete event has fired.

The function will return false if no data is set on the chart, or the data is faulty. Also, it will return false if the data provided is incompatible with the current chart type, for example, if single-series data has been set for multi-series charts.

Parameters:

Parameter	Description
`available` Type: boolean Attributes: <optional> Default: false	Setting the `available` parameter to `true` returns the status of the data irrespective of its compatibility with chart-type. In that case, this function will return `false` if data provided to the chart causes FusionCharts#event:dataLoadError or FusionCharts#event:dataInvalid to be fired

Returns:

The returned boolean denotes whether data is ready or not. In case the status of data-readiness is unknown, this function returns undefined.

Type:

boolean or undefined

<static> transcodeData(data, source, target, advanced) → {string|object}

FusionCharts supports a number of formats in which data can be provided. The default list is mentioned at FusionCharts~dataFormats. This function allows data to be transcoded from one supported format to another.

The primary use of this function is to convert data in one format to another without initializing a new instance of FusionCharts. It is very useful when you already have a set of data stored or prepared in a particular FusionCharts data format and you would like to convert it to another format. The fact that we do not need to instantiate a new instance of FusionCharts makes the conversion process very fast.

Parameters:

Parameter Description

data

Type:: string or object

The data that needs to be transcoded from one format to another.

source

Type:: FusionCharts~dataFormats

The data format of the data provided.

target

Type:: FusionCharts~dataFormats

The desired data format in which the data needs to be converted.

advanced

Type:: boolean
Attributes:: <optional>
Default:: false

Request the transcoding to return data in a verbose format where it returns the conversion result along with additional transocing information. In advanced mode, the returned data of this function is in the following format:

Property	Type	Description
`data`	object	string	The result of the transcoding process
`error`	Error	undefined	In case the transcoding process failed, the error is passed here

Returns:

The transcoded data is returned in the data type as associated with the target data format. The return-type depends upon the FusionCharts~dataFormats specified as the target parameter.

Type:

string or object

Example

// We would convert JSON data that is already in FusionCharts data format into CSV data format.
FusionCharts.ready(function () {
    var salesData = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
        },
        data:[{
            label: "Bakersfield Central",
            value: "880000"
        },
        {
            label: "Garden Groove harbour",
            value: "730000"
        },
        {
            label: "Los Angeles Topanga",
            value: "590000"
        },
        {
            label: "Compton-Rancho Dom",
            value: "520000"
        },
        {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

    // Alert the data after converting it to CSV data format.
    alert(FusionCharts.transcodeData(salesData, 'json', 'csv'));
});

getCSVData() → {string}

Fetch data that has been set on a chart in CSV format. This function is shorthand of using chart.getChartData('csv').

The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart. However, the following chart attributes can be set to customise the CSV output.

Chart Attribute	Type	Description
`exportDataSeparator`	string	Sets the CSV delimiter string. Default is `,` (comma)
`exportDataQualifier`	string	Sets the CSV qualifier string. Default is `{quot}`
`exportDataFormattedVal`	boolean	Sets whether the output will be a formatted string or pure number
`exportErrorColumns`	boolean	Forces error output on ErrorColumn, ErrorLine and ErrorScatter charts

For exportDataSeparator and exportDataQualifier, one can provide quotation mark, apostrophe and tab character in form of {quot}, {apos} and {tab} short-codes, respectivey.

This function needs to be called on an existing chart that has been loaded and has a valid data. If this function is called on a chart which has no data set on it, it returns an empty string.

As of now, the CSV data generator uses heuristics heuristic methods to determine the nature of the output since, the method does not internaly have access to the chart-type being used. As such, when a specific chart type cannot determined from the data itself, this method falls back to a generic output format.

See:

FusionCharts#getChartData

Returns:

Type:

string

getDataAsCSV() → {string}

Fetch the data set to the chart in comma separated values format. The delimiter can be changed by passing relevant chart attributes.

Deprecated:

3.3.0 - In favour of FusionCharts#getCSVData

Returns:

Type:

string

getJSONData() → {object}

Fetch data that has been set on a chart in JSON format. This function is shorthand of using chart.getChartData('json').

This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty { } object.

See:

FusionCharts#getChartData

Returns:

Type:

object

setJSONData(data)

This function is used to update data of a chart using data in JSON format as defined in FusionCharts~dataFormats.

It is a shorthand of the function FusionCharts#setChartData where the data format is always JSON. So, calling chart.setXMLData({'chart': ...}) is the same as calling chart.setChartData({'chart': ...}, 'json').

Similar to FusionCharts#setChartData, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data. But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

Parameters:

Parameter	Description
`data` Type: string or object	This parameter accepts the `JSON` data to be passed on to the chart string or as JavaScript object.

See:

FusionCharts#setChartData

setJSONUrl(url)

This function is used to update data of a chart using data from a URL in JSON format.

It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always JSON (jsonurl). So, calling chart.setJSONUrl('data.json') is the same as calling chart.setChartDataUrl('data.json', 'jsonurl').

Similar to FusionCharts#setChartDataUrl, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data as soon as it is fetched from the URL. If the chart has not yet rendered But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.

Parameters:

Parameter	Description
`url` Type: string	Path to JSON data file.

See:

FusionCharts#setChartDataUrl

getXMLData() → {string}

Fetch data that has been set on a chart in XML format. This function is shorthand of using chart.getChartData('xml').

This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty <chart /> element as string.

See:

FusionCharts#getChartData

Returns:

Type:

string

setXMLData(data)

This function is used to update data of a chart using data in XML format as defined in FusionCharts~dataFormats.

It is a shorthand of the function FusionCharts#setChartData where the data format is always XML. So, calling chart.setXMLData('<chart>...</chart') is the same as calling chart.setChartData('<chart>...</chart>', 'xml').

Parameters:

Parameter	Description
`data` Type: string	This parameter accepts valid `XML` as a string to be passed on to the chart as data source.

See:

FusionCharts#setChartData

setXMLUrl(url)

This function is used to update data of a chart using data from a URL in XML format.

It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always XML (xmlurl). So, calling chart.setXMLUrl('data.xml') is the same as calling chart.setChartDataUrl('data.xml', 'xmlurl').

Parameters:

Parameter	Description
`url` Type: string	Path to XML data file.

See:

FusionCharts#setChartDataUrl

Printing and exporting charts

print(options)

You can use this function to print individual charts. This function hides all elements on the page except the chart in concern and then invokes the page printing function (window.print()).

This function works only for charts that have rendered completely, i.e. after FusionCharts#event:renderComplete event has fired.

Parameters:

Parameter Description

options

Type:: object
Attributes:: <optional>

Printing options

Properties

Parameter	Description
`hideButtons` Type: boolean Attributes: <optional> Default: true	Hides all buttons on the chart.

Fires:

Example

// In this snippet of code, we will render a chart on a page and
// call the print method on the chart on click of a button.
FusionCharts.ready(function () {
   FusionCharts.render({
       type: 'column2d',
       dataFormat: 'jsonurl',
       dataSource: 'data.json',

       // assuming an HTML div element exists on the page
       renderAt: 'chart-container-div'

       events: {
           renderComplete: function (event) {
               // assuming a button exists on page with a specific id
               var button = document.getElementById('print-button');
               button.onclick = function () {
                   event.sender.print();
               };
           }
       }

   });
});

exportChart(options) → {boolean}

Exports a chart to image or PDF document using this function. The function can be configured to export a chart and present it as a file download. Exporting of a chart is not enabled by default. The chart's data must have the exportEnabled chart attribute explicitly set to 1.

When exporting of a chart is enabled, it is exported using a set of default options. These options can be overridden by configuring the chart data. That would allow you to configure the behavior of the export related context-menu drawn on the chart. However, in the event that exporting is done programmatically, the export parameters can be customized using this function.

The exporting process can only be initiated after the FusionCharts#event:renderComplete event has been fired. The function itself remains undefined until the FusionCharts#event:loaded event is raised by the chart.

Parameters:

Parameter Description

options

Type:: object
Attributes:: <optional>

Properties

Parameter Description

exportFormat

Type:: string
Attributes:: <optional>
Default:: png

A chart can be exported in one of the following formats:

Export Format	Description
`png`	Exports the charts in high quality lossless PNG format
`jpg`	Exports the chart as high quality JPEG image format
`pdf`	Exports the chart as a PDF document

exportFileName

Type:: string
Attributes:: <optional>
Default:: FusionCharts

Using this attribute you can specify the name (excluding the extension) of the file to be exported. The extension is automatically appended depending on the exportFormat specified.

exportTargetWindow

Type:: string
Attributes:: <optional>
Default:: _self

When using download as exportAction, this lets you configure whether the return image or PDF will open in same window (as an attachment for download), or whether it will open in a new browser window (_blank).

exportHandler

Type:: string
Attributes:: <optional>

URL of the export server.

exportAction

Type:: string
Attributes:: <optional>
Default:: download

Specifies whether the exported image will be sent back to the browser as download, or whether it will be saved on to the server.

Action Value	Description
`download`	Causes the exported chart image or PDF to be downloaded as file.
`save`	Causes the exported chart to be saved on server.

For the charts to be saved on server, you would need to setup your own export handling server.

exportCallback

Type:: function
Attributes:: <optional>
Default:: FC_Exported

This attribute specifies the name of the callback JavaScript function which will be called when the export event is complete. The function window.FC_Exported is the default method that will be called when no value specified.

Tutorials:

Tutorial: interactivity-export-to-image-or-pdf-configuring-for-export
Tutorial: interactivity-export-to-image-or-pdf-set-your-export-server

See:

Returns:

The function returns true if export process of the chart was successfully triggered, otherwise it returns false.

Type:

boolean

getSVGString() → {string}

Fetch the SVG of a chart as a string. This function returns the SVG that has been created by FusionCharts when rendering the chart.

Note that this function is only available for a chart that has already been rendered.

Returns:

SVG string

Type:

string

FusionCharts framework level API

<static> getObjectReference(id) → {DOMElement}

The function returns the DOMElement that is created inside chart container by FusionCharts. The returned element is the same as accessing the FusionCharts#ref property. Note that this is the <span> element created by FusionCharts to render the chart. It is not the container element that was specified during rendering the chart as the renderAt parameter.

Parameters:

Parameter	Description
`id` Type: string	The ID of the chart, whose `DOMElement` is to be referenced.

Since:

3.1.1

Deprecated:

3.2.0 - This method has been deprecated as direct access to `DOMElement` of the chart has become redundant. FusionCharts#ref property can be used in the rare case where such access to the `DOMElement` of a chart is required.

Returns:

Type:

DOMElement

Example

// Iterate on all charts rendered on a page and move them to a common location
var sidebar = document.getElementById('sidebar-html-div'), // assuming that your common container is this
    chart;

for (chart in FusionCharts.items) {
    sidebar.appendChild(FusionCharts.getObjectReference(chart).parentNode);
}

// The above can be done without using this deprecated getObjectReference method.
for (chart in FusionCharts.items) {
    chart = FusionCharts.items[chart];
    chart.ref && sidebar.appendChild(chart.ref.parentNode);
}

<static> formatNumber(num, type, config) → {string}

FusionCharts formats input number based on configurations passed in chart attributes. It may be needed to similarly format other non-chart elements on page using same algorithm. This function is available to be used globally on FusionCharts object or on a specific instance of FusionCharts Suite XT.

When called on the FusionCharts object (FusionCharts.formatNumber(),) the default number configuration settings are utilised. These can be overridden by passing additional number format configuration settings as the second parameter. Refer to chart attributes for various number format configurations.

When called on an instance of a chart, gauge or map, the number formatting as set by the data of the chart is used. As such, the second parameter (type) accepts xAxisValues, yAxisValues or dataLabels to allow formatting to be done specific to them.

Parameters:

Parameter	Description
`num` Type: number	The number that needs to be formatted.
`type` Type: string Attributes: <optional> Default: datalabels	A chart can be configured to format numbers differently depending upon where it is being used. The formatting of data values can be different than that of x-axis labels. As such, passing `yaxisvalues`, `xaxisvalues` or `datalabels` as a value of this parameter returns the formatted number accordingly. __Note that this parameter is not available when `formatNumber` is executed on `FusionCharts` object instead of chart instances.
`config` Type: object Attributes: <optional>	One can optionally pass additional number formatting attributes as the `config` parameter to override the default number formatting options of a chart. While calling `formatNumber` on `FusionCharts` object, this becomes the second parameter.

Returns:

Type:

string

Examples

console.log(FusionCharts.formatNumber(1234.5)); // logs "1.2K"

console.log(FusionCharts.formatNumber(1234.5, {
    numberPrefix: "$"
})); // logs "$1.2K"

// Calling number formatter on a chart instance when `renderComplete` event is fired.
FusionCharts.ready(function () {
    // Render a chart within a chart container `div` element.
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container-div',
        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Quarterly sales summary",
                numberPrefix: "$",
                decimals: "2",
                forceDecimals: "1"
            }
            data: [
                { label: "Q1", value: "213345"},
                { label: "Q2", value: "192672"},
                { label: "Q3", value: "201238"},
                { label: "Q4", value: "209881"},
            ]
        },

        events: {
            renderComplete: function (eventObj) {
                // Call the formatNumber function of the specific chart we rendered.
                console.log(eventObj.sender.formatNumber(1234.5)); // logs "$1.23K"
            }
        }
    });
    chart.render();
});

LinkedCharts and drill-down

configureLink(param, level)

Configure the properties of LinkedCharts. This function accepts all properties that FusionCharts constructor function accepts. Any property passed to this function is applied to the LinkedCharts. If no properties are provided, LinkedCharts will inherit properties from the parent chart.

LinkedCharts are essentially n-level drill-down of charts, where data points on one chart can create and render a new chart. Each level can be configured by passing the level as the second parameter of this function. Note that the first chart that triggers the drill-down (root chart) has level 0.

Alternatively, LinkedCharts configuration for multiple levels of drill-down can be configured at once by passing them as an array to this function. In that case, the array is the only parameter passed to the function.

The Overlay Button:

Other than the usual construction parameters of FusionCharts, the param parameter of this function also accepts configuration for the "overlay button" of LinkedCharts. When a LinkedChart is rendered on clicking a data point, a button is rendered on the top-right corner of the chart. When this button is clicked, it closes (disposes) the linked chart.

The cosmetics of this button can be configured by passing an overlayButton object to param. This object can have the following properties.

Button Parameter	Type	Description
`show`	boolean	Whether to show the button or not
`message`	string	The label of the button. The default is "Close" or "Back"
`bgColor`	string	Background color of the button in hex format
`borderColor`	string	Border color of the button in hex format
`font`	string	Font family of the button (comma separated list of fonts)
`fontColor`	string	The color of the button label text
`fontSize`	string	The size of the button label text
`bold`	boolean	Specify whether the button label text appears bold
`padding`	number	The padding between the label and the edges of the button

Parameters:

Parameter	Description
`param` Type: object or array
`level` Type: number Attributes: <optional> Default: 0	Since linked charts are multi-level drill-down, you can configure the parameters of a particular drill-down level by specifying it in this parameter.

Tutorials:

Tutorial: interactivity-drill-down-linkedcharts

See:

Examples

myChart.configureLink({
    type: 'pie2d', // Set the linked-charts configuration to load all linked charts as Pie
    width: '80%', // The width of the charts would be 80% of their parent container
    overlayButton: {
        message: ' X ', // Set the button to show letter "X"
        bgColor:'#999999',
        borderColor: '#cccccc'
    }
});

// Configure linked charts to show the first level drill-down as bar chart, the next as line charts and
// the third level as pie charts.
myChart.configureLink([
    { type: 'bar2d' },
    { type: 'line' },
    { type: 'pie2d' }
]);

Others

getSWFHTML() → {string}

Gets the HTML of SWF

Deprecated:

3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.

Returns:

Type:

string

addVariable()

Adds variable to Flash chart. Equivalent to FusionCharts#configure for JavaScript charts

Deprecated:

3.4.0 - Use the alternate function FusionCharts#configure

See:

FusionCharts#configure

Rendering technologies (deprecated)

<static> setCurrentRenderer(name)

Sets the default renderer for all the charts that are subsequently instantiated. The renderer changes depending upon the variant of charts being rendered (example: flash, javascript)

Parameters:

Parameter	Description
`name` Type: string	The name of the renderer (variant of chart rendering method) that is used.

Deprecated:

3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.

<static> getCurrentRenderer() → {string}

Gets the current renderer that will be used during instantiation of new charts.

Deprecated:

3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.

Returns:

The name of the current renderer being used - flash or javascript.

Type:

string

<static> ready(readyCallback, args, context)

This function allows to register callback functions to be executed when FusionCharts library is ready to be used. In general, the framework is ready after DOMContentLoaded browser event has been fired and all the initial dependent files/modules are available. One can attach multiple callbacks by calling this function any number of time.

The callback function is executed even when attached after FusionCharts is already ready! Thus, it is recommended that all entry-point and initialization codes are written within this block. This also helps in neatly organizing all codes within a script file or the page <head> and as such contextually separating code from HTML blocks.

Parameters:

Parameter	Description
`readyCallback` Type: FusionCharts~readyCallback	Pass a function that would be executed as callback when FusionCharts framework is ready.
`args` Type: * Attributes: <optional> Default: FusionCharts	Argument to be passed on to the callback function.
`context` Type: function Attributes: <optional> Default: FusionCharts	In the situation where the function passed via `fn` parameter needs to be executed in a different scope than the default FusionCharts scope, pass the appropriate class object here.

Example

// Render a chart within a chart container `div` element.
FusionCharts.ready(function (FusionCharts) {
    var chart = new FusionCharts({
        type: "column2d",
        renderAt: "chart-container-div",
        dataSource: "my-chart-data.json",
        dataFormat: "jsonurl"
    });
    // Since we are in the `ready` block, the `chart-container-div`
    // element should be available by now.
    chart.render();
});

showChartMessage(text, modal, cancelable)

Shows a text message on a chart.

Parameters:

Parameter	Description
`text` Type: string	The text message that needs to be displayed.
`modal` Type: boolean Attributes: <optional> Default: false	Boolean value whether to show the message on an overlay or on the chart. Defaults to `false`.
`cancelable` Type: boolean Attributes: <optional> Default: false	Boolean value applicable only if modal is `true`. If set to true the modal can be closable on click. Defaults to `false`.

getDataJSON()

Zoomline chart specific API

getViewStartIndex() → {number}

Returns the index of the first visible point on canvas of ZoomLine chart

Returns:

Type:

number

getViewEndIndex() → {number}

Returns the index of the last visible point on canvas of ZoomLine chart

Returns:

Type:

number

zoomOut()

Zooms ZoomLine chart one level out

Fires:

zoomTo(startIndex, endIndex)

Zooms ZoomLine chart to a range of data.

Parameters:

Parameter	Description
`startIndex` Type: number	The index of the dataset from which it needs to be zoomed into.
`endIndex` Type: number	the index of the dataset until which it needs to be zoomed into.

Fires:

resetChart()

Reset all zoom, pan and pin actions that has been done on ZoomLine chart.

Fires:

FusionCharts#event:zoomReset

setZoomMode(yes)

Switches between zoom and pin mode. This function does not work when allowPinMode is set to 0 in chart XML or JSON.

Zoom Line charts can have either a zoom mode or a pin mode. Zoom mode lets you select a section of the chart by dragging mouse cursor across the canvas and the chart zooms in on the selected section. In pin mode, the selected portion can be dragged around to compare with the rest of the chart. Zoom mode and pin mode can be toggled by clicking a button on the top right corner of the chart. This function lets you switch between zoom mode and pin mode programmatically.

Parameters:

Parameter	Description
`yes` Type: boolean	Boolean value to be `true` if zoom mode needs to be activated, `false` to activate pin mode.

Fires:

FusionCharts#event:zoomModeChanged

Type Definitions

eventListener(eventObject, eventArgs)

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

These functions are known as "listeners" and are passed on to the second argument (listener) of the FusionCharts.addEventListener and FusionCharts#addEventListener functions.

Parameters:

Parameter Description

eventObject

Type:: object

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

Properties

Parameter	Description
`type` Type: string	The name of the event.
`eventId` Type: number	A unique ID associated with the event. Internally it is an incrementing counter and as such can be indirectly used to verify the order in which the event was fired.
`sender` Type: FusionCharts	The instance of FusionCharts object that fired this event. Occassionally, for events that are not fired by individual charts, but are fired by the framework, will have the framework as this property.
`cancelled` Type: boolean	Shows whether an event's propagation was cancelled or not. It is set to `true` when `.stopPropagation()` is called.
`stopPropagation` Type: function	Call this function from within a listener to prevent subsequent listeners from being executed.
`prevented` Type: boolean	Shows whether the default action of this event has been prevented. It is set to `true` when `.preventDefault()` is called.
`preventDefault` Type: function	Call this function to prevent the default action of an event. For example, for the event FusionCharts#event:beforeResize, if you do `.preventDefault()`, the resize will never take place and instead FusionCharts#event:resizeCancelled will be fired.
`detached` Type: boolean	Denotes whether a listener has been detached and no longer gets executed for any subsequent event of this particular `type`.
`detachHandler` Type: function	Allows the listener to remove itself rather than being called externally by FusionCharts.removeEventListener. This is very useful for one-time event listening or for special situations when the event is no longer required to be listened when the event has been fired with a specific condition.

eventArgs

Type:: object

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

See:

readyCallback(args)

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

Parameters:

Parameter	Description
`args` Type: FusionCharts or *	By default, the parameter passed to the callback function is the FusionCharts library class unless specified otherwise in the `args` parameter of FusionCharts.ready

renderCallback(container)

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

This:

FusionCharts

Parameters:

Parameter	Description
`container` Type: DOMElement	This parameter returns a reference to the container element within which the chart, gauge or map has been rendered.

Example

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

Events

Chart level API

beforeDispose

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

See:

disposed

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

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

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

See:

disposeCancelled

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

See:

PowerCharts specific API

dataplotDragStart

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

dataplotDragEnd

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

nodeAdded

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`datasetIndex` Type: number	Index of the dataset to which the newly added node belongs to.
`datasetName` Type: string	Name of the dataset to which the node was added. Name of the dataset can be defined by the attribute `seriesName` for `dataset` tag in the chart data.
`dataIndex` Type: number	Index of the newly added node.
`height` Type: number	Height of the shape represented by the newly added node.
`id` Type: string	ID of the newly added node which can be set using `id` attribute for `set` tag.
`label` Type: string	Text displayed inside the shape of the newly added node.
`link` Type: string	URL associated with the newly added node.
`radius` Type: number	Radius of the circumcirle for the shape of the newly added node.
`shape` Type: string	Shape of the newly added node.
`sides` Type: number	Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
`toolText` Type: string	Text that is displayed over the shape of the newly added node.
`width` Type: number	Width of the shape of the newly added node.
`x` Type: number	X Co-ordinate of the newly added node in reference with the canvas / axis.
`y` Type: number	Y Co-ordinate of the newly added node in reference with the canvas / axis.

nodeUpdated

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`datasetIndex` Type: number	Index of the dataset to which the deleted node belongs to.
`datasetName` Type: string	Name of the dataset which can defined by the attribute `seriesName` for `dataset` tag in the chart data.
`height` Type: number	Height of the shape represented by the node.
`id` Type: string	ID of the node which can be set using `id` attribute for `set` tag.
`dataIndex` Type: number	Index of the updated node.
`label` Type: string	Text displayed inside the shape of the node.
`link` Type: string	URL associated with the deleted node.
`radius` Type: number	Radius of the circumcirle for the shape of the node.
`shape` Type: string	Shape of the updated node.
`sides` Type: number	Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
`toolText` Type: string	Text that is displayed over the shape of the updated node.
`width` Type: number	Width of the shape of the updated node.
`x` Type: number	X Co-ordinate of the updated node in reference with the canvas / axis.
`y` Type: number	Y Co-ordinate of the updated node in reference with the canvas / axis.

nodeDeleted

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`datasetIndex` Type: number	Index of the dataset to which the deleted node belongs to.
`datasetName` Type: string	Name of the dataset which can defined by the attribute `seriesName` for `dataset` tag in the chart data.
`height` Type: number	Height of the shape represented by the node.
`id` Type: string	ID of the node which can be set using `id` attribute for `set` tag.
`dataIndex` Type: number	Index of the node deleted.
`label` Type: string	Text displayed inside the shape of the node.
`link` Type: string	URL associated with the deleted node.
`radius` Type: number	Radius of the circumcirle for the shape of the node.
`shape` Type: string	Shape of the deleted node.
`sides` Type: number	Depending on the shape of the node it is the number of sides of the polygon. If it is a circle it will have 0 sides.
`toolText` Type: string	Text that is displayed over the shape of the deleted node.
`width` Type: number	Width of the shape of the deleted node.
`x` Type: number	X Co-ordinate of the deleted node in reference with the canvas / axis.
`y` Type: number	Y Co-ordinate of the deleted node in reference with the canvas / axis.

connectorAdded

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`arrowAtEnd` Type: boolean	True if there is an arrow at the end of the link else false.
`arrowAtStart` Type: boolean	True if there is an arrow at the start of the link else false.
`fromNodeId` Type: number	Contains the index number or the node id from which the link originated.
`id` Type: number	ID of the connector.
`label` Type: string	Text displayed for the connector that was deleted.
`link` Type: string	URL set for the connector on mouse click.
`toNodeId` Type: number	Contains the index number or the node id to which the link ends.

connectorUpdated

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`arrowAtEnd` Type: boolean	True if there is an arrow at the end of the link else false.
`arrowAtStart` Type: boolean	True if there is an arrow at the start of the link else false.
`fromNodeId` Type: number	Contains the index number or the node id from which the link originated.
`id` Type: number	ID of the connector.
`label` Type: string	Text displayed for the connector that was deleted.
`link` Type: string	URL set for the connector on mouse click.
`toNodeId` Type: number	Contains the index number or the node id to which the link ends.

connectorDeleted

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`arrowAtEnd` Type: boolean	`true` if there is an arrow at the end of the link else `false`.
`arrowAtStart` Type: boolean	True if there is an arrow at the start of the link else false.
`fromNodeId` Type: number	Contains the index number or the node id from which the link originated.
`id` Type: number	ID of the connector.
`label` Type: string	Text displayed for the connector that was deleted.
`link` Type: string	URL set for the connector on mouse click.
`toNodeId` Type: number	Contains the index number or the node id to which the link ends.

labelAdded

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`text` Type: string	The text in the label
`x` Type: number	x position of the label.
`y` Type: number	y position of the label.

labelDeleted

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

This event is only applicable to DragNode chart.

Parameters:

Parameter	Description
`text` Type: string	The text in the label
`x` Type: number	x position of the label.
`y` Type: number	y position of the label.

labelClick

Applicable to dragnode chart only.

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`x` Type: number	The x-value of the label node scaled as per the axis of the chart.
`y` Type: number	The y-value of the label node scaled as per the axis of the chart.
`text` Type: string	The text value of the label.

labelRollOver

Applicable to dragnode chart only.

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`x` Type: number	The x-value of the label node scaled as per the axis of the chart.
`y` Type: number	The y-value of the label node scaled as per the axis of the chart.
`text` Type: string	The text value of the label.

labelRollOut

Applicable to dragnode chart only.

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`x` Type: number	The x-value of the label node scaled as per the axis of the chart.
`y` Type: number	The y-value of the label node scaled as per the axis of the chart.
`text` Type: string	The text value of the label.

labelDragStart

Applicable to dragnode chart only.

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`x` Type: number	The x-value of the label node scaled as per the axis of the chart.
`y` Type: number	The y-value of the label node scaled as per the axis of the chart.
`text` Type: string	The text value of the label.

labelDragEnd

Applicable to dragnode chart only.

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`x` Type: number	The x-value of the label node scaled as per the axis of the chart.
`y` Type: number	The y-value of the label node scaled as per the axis of the chart.
`text` Type: string	The text value of the label.

Map related API

entityRollOut

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

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

Parameters:

Parameter	Description
`value` Type: number	The value of the entity.
`label` Type: string	The label of the entity.
`shortLabel` Type: string	Short label used by the user.
`originalId` Type: string	The ID of the entity stored in the map definition file.
`id` Type: string	This could be the original ID or the ID assigned by the user.

See:

entityRollOver

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

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

Parameters:

Parameter	Description
`value` Type: number	The value of the entity.
`label` Type: string	The label of the entity.
`shortLabel` Type: string	Short label used by the user.
`originalId` Type: string	The ID of the entity stored in the map definition file.
`id` Type: string	This could be the original ID or the ID assigned by the user.

See:

entityClick

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

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

Parameters:

Parameter	Description
`value` Type: number	The value of the entity.
`label` Type: string	The label of the entity.
`shortLabel` Type: string	Short label used by the user.
`originalId` Type: string	The ID of the entity stored in the JS file.
`id` Type: string	This could be the original ID or the ID assigned by the user.

See:

Example

FusionCharts.ready(function () {
    var map = new FusionCharts({
        type: 'maps/world',
        renderAt: 'map-container-div',

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

logoRollover

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

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

Parameters:

Parameter	Description
`logoURL` Type: string	The URL of the logo image.
`logoAlpha` Type: number	The value of the alpha of the logo image.
`logoPosition` Type: string	The position of the logo.
`logoScale` Type: number	The value of scaling of the logo image.
`logoLink` Type: string	The URL linked to the logo which on clicking will be taken to the URL link.
`chartX` Type: number	The relative X-Cordinate to screen where the mouse was hovered over the logo.
`chartY` Type: number	The relative Y-Cordinate to screen where the mouse was hovered over the logo.
`pageX` Type: number	The relative Y-Cordinate to screen where the mouse was hovered over the logo.
`pageY` Type: number	The relative Y-Cordinate to screen where the mouse was hovered over the logo.

Tutorials:

Tutorial: configuring-your-chart-loading-external-logos

See:

logoRollout

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

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

Parameters:

Parameter	Description
`logoURL` Type: string	The URL of the logo image.
`logoAlpha` Type: number	The value of the alpha of the logo image.
`logoPosition` Type: string	The position of the logo.
`logoScale` Type: string	The value of scaling for logo image.
`logoLink` Type: string	The URL linked to the logo which on clicking will be taken to the URL link.
`chartX` Type: number	The relative X-Cordinate to screen where the mouse was hovered out of logo image.
`chartY` Type: number	The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
`pageX` Type: number	The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.
`pageY` Type: number	The relative Y-Cordinate to screen where the mouse was hovered out of the logo image.

Tutorials:

Tutorial: configuring-your-chart-loading-external-logos

See:

logoClick

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

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

Parameters:

Parameter	Description
`logoURL` Type: string	The URL of the logo image.
`logoAlpha` Type: number	The value of the alpha of the logo image.
`logoPosition` Type: string	The position of the position of the logo.
`logoScale` Type: number	The value of scaling for logo image.
`logoLink` Type: string	The URL linked to the logo which on clicking will be taken to the URL link.
`chartX` Type: number	The relative X-Cordinate to screen where the mouse was hovered out of the chart logo.
`chartY` Type: number	The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
`pageX` Type: number	The relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.
`pageY` Type: number	is the relative Y-Cordinate to screen where the mouse was hovered out of the chart logo.

Tutorials:

Tutorial: configuring-your-chart-loading-external-logos

See:

logoLoaded

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

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

Parameters:

Parameter	Description
`logoURL` Type: string	is the URL of the logo image.
`logoAlpha` Type: number	is the value of the alpha of the logo image.
`logoPosition` Type: string	is the position of the chart logo.
`logoScale` Type: number	is the value of scaling for logo image.
`logoLink` Type: string	is the URL linked to the logo which on clicking will be taken to the URL link.

Tutorials:

Tutorial: configuring-your-chart-loading-external-logos

See:

logoLoadError

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

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

Parameters:

Parameter	Description
`logoURL` Type: string	is the URL of the logo image.
`logoAlpha` Type: number	is the value of the alpha of the logo image.
`logoPosition` Type: string	is the position of the chart logo.
`logoScale` Type: number	is the value of scaling for logo image.
`logoLink` Type: string	is the URL linked to the logo which on clicking will be taken to the URL link.
`error` Type: string	is the error message.

Tutorials:

Tutorial: configuring-your-chart-loading-external-logos

See:

rotationEnd

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

Parameters:

Parameter	Description
`changeInAngle` Type: number	Gives the value by how much the chart was rotated
`startingAngle` Type: number	Gives the value of the startingAngle of the chart on rotation end.

rotationStart

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

Parameters:

Parameter	Description
`startingAngle` Type: number	Gives the value of the startingAngle of the chart, when the chart starts rotating

centerLabelRollover

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

Available on doughnut chart only.

Parameters:

Parameter	Description
`centerLabelText` Type: string	is the text for display at center label
`chartX` Type: number	is the relative X-Cordinate to chart container where the chart was clicked
`chartY` Type: number	is the relative Y-Cordinate to chart container where the chart was clicked.
`container` Type: string	is the DOM element where the chart is being rendered.
`height` Type: numeric or percent	height of the chart
`width` Type: numeric or percent	width of the chart
`id` Type: string	is the chart id
`pageX` Type: number	is the relative X-Cordinate to screen where the chart is clicked
`pageY` Type: number	is the relative Y-Cordinate to screen where the chart is clicked
`pixelHeight` Type: number	is the height of the DOM element where the chart is being rendered in pixels
`pixelWidth` Type: number	is the width of the DOM element where the chart is being rendered in pixels
`renderer` Type: string	tells if the chart is rendered using JavaScript or Flash

centerLabelRollout

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

Available on doughnut chart only.

Parameters:

Parameter	Description
`centerLabelText` Type: string	is the text for display at center label
`chartX` Type: number	is the relative X-Cordinate to chart container where the chart was clicked
`chartY` Type: number	is the relative Y-Cordinate to chart container where the chart was clicked.
`container` Type: string	is the DOM element where the chart is being rendered.
`height` Type: numeric or percent	height of the chart
`width` Type: numeric or percent	width of the chart
`id` Type: string	is the chart id
`pageX` Type: number	is the relative X-Cordinate to screen where the chart is clicked
`pageY` Type: number	is the relative Y-Cordinate to screen where the chart is clicked
`pixelHeight` Type: number	is the height of the DOM element where the chart is being rendered in pixels
`pixelWidth` Type: number	is the width of the DOM element where the chart is being rendered in pixels
`renderer` Type: string	tells if the chart is rendered using JavaScript or Flash

centerLabelClick

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

Available on doughnut chart only.

Parameters:

Parameter	Description
`centerLabelText` Type: string	is the text for display at center label.
`chartX` Type: number	is the relative X-Cordinate to chart container where the chart was clicked.
`chartY` Type: number	is the relative Y-Cordinate to chart container where the chart was clicked.
`container` Type: string	is the DOM element where the chart is being rendered.
`height` Type: numeric or percent	height of the chart
`width` Type: numeric or percent	width of the chart
`id` Type: string	is the chart id
`pageX` Type: number	is the relative X-Cordinate to screen where the chart is clicked
`pageY` Type: number	is the relative Y-Cordinate to screen where the chart is clicked
`pixelHeight` Type: number	is the height of the DOM element where the chart is being rendered in pixels
`pixelWidth` Type: number	is the width of the DOM element where the chart is being rendered in pixels
`renderer` Type: string	tells if the chart is rendered using JavaScript or Flash

centerLabelChanged

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

Available on doughnut chart only.

Parameters:

Parameter	Description
`centerLabelText` Type: string	is the text for display at center label
`chartX` Type: number	is the relative X-Cordinate to chart container where the chart was clicked
`chartY` Type: number	is the relative Y-Cordinate to chart container where the chart was clicked.
`container` Type: string	is the DOM element where the chart is being rendered.
`height` Type: numeric or percent	height of the chart
`width` Type: numeric or percent	width of the chart
`id` Type: string	is the chart id
`pageX` Type: number	is the relative X-Cordinate to screen where the chart is clicked
`pageY` Type: number	is the relative Y-Cordinate to screen where the chart is clicked
`pixelHeight` Type: number	is the height of the DOM element where the chart is being rendered in pixels
`pixelWidth` Type: number	is the width of the DOM element where the chart is being rendered in pixels
`renderer` Type: string	tells if the chart is rendered using JavaScript or Flash

rotationEnd

Parameters:

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

rotationStart

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

Parameters:

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

slicingStart

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

Parameters:

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

slicingEnd

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

Parameters:

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

beforeResize

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

Parameters:

Parameter	Description
`currentWidth` Type: numeric or percent	Current width of the chart in pixels or percentage
`currentHeight` Type: numeric or percent	Current height of the chart in pixels or percentage
`newWidth` Type: numeric or percent	new width of the chart in pixels or percentage
`newHeight` Type: numeric or percent	new height of the chart in pixels or percentage

See:

resized

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

Parameters:

Parameter	Description
`width` Type: numeric or percent	Width of the chart after being resized
`height` Type: numeric or percent	Height of the chart after being resized
`prevWidth` Type: numeric or percent	The width of the chart previous to being resized
`prevHeight` Type: numeric or percent	The height of the chart previous to being resized
`originalWidth` Type: number	Width of the chart in pixels provided when chart was rendered using FusionCharts#render.
`originalHeight` Type: number	Original render-time height of the chart in pixels.

See:

resizeCancelled

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

Parameters:

Parameter	Description
`currentWidth` Type: numeric or percent	Current width of the chart in pixels or percentage.
`currentHeight` Type: numeric or percent	Current height of the chart in pixels or percentage.
`cancelledTargetWidth` Type: numeric or percent	The width of the chart that was requested to be set, but was cancelled.
`cancelledTargetHeight` Type: numeric or percent	The height of the chart that was requested to be set, but was cancelled.

See:

scrollStart

This event is fired when chart reaches a scroll point.

scrollEnd

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

selectionRemoved

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

Parameters:

Parameter	Description
`data` Type: object	This returns the subset of data that was selected.

beforeInitialize

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

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

Listen to FusionCharts global events using FusionCharts.addEventListener before even creating a new instance. (The required instance can be identified by the id of the chart using eventObject.sender.id.)
Pass the event listener as the FusionCharts constructor parameter itself.

Parameters:

Parameter	Description
`height` Type: numeric or percent	Height of the chart in pixels or percentage.
`width` Type: numeric or percent	Width of the chart in pixels or percentage.

Example

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

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

initialized

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

Parameters:

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

Example

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

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

beforeRender

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

Parameters:

Parameter	Description
`container` Type: DOMElement	This contains the reference to the container `HTMLDOMElement` within which the chart is to be rendered.
`width` Type: numeric or percent	Width of the chart in percent or pixels.
`height` Type: numeric or percent	Height of the chart in percent or pixels.

See:

Example

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

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

renderCancelled

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

Parameters:

Parameter	Description
`container` Type: DOMElement	This contains the refernce to the container `HTMLDOMElement` whithin which the chart is to be rendered.
`width` Type: numeric or percent	Width of the chart in percent or pixels.
`height` Type: numeric or percent	Height of the chart in percent or pixels.

See:

Example

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

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

pageNavigated

This event is fired on page change in SSGrid chart.

Parameters:

Parameter	Description
`data` Type: object	Contains data of the sought page, with color, displayValue, originalText, value and y position for each data points.
`pageId` Type: number	Tells the index of the sought page.

linkClicked

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

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

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

Parameters:

Parameter	Description
`linkProvided` Type: string	This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
`linkInvoked` Type: string	This will contain the link which contains the newchart-xml-id of the XML of the linked chart item
`linkAction` Type: object	Indicates what the link click will do. In case of opening a new chart it is 'newchart'.

chartTypeChanged

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

This event is not fired when:

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

Parameters:

Parameter	Description
`previousType` Type: string	The previously assigned chart type of the chart.
`newType` Type: string	The new chart type that has been set on the chart.

See:

FusionCharts#chartType

chartClick

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

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

Parameters:

Parameter	Description
`container` Type: string	The DOM element within which the chart has been rendered.
`id` Type: string	The `id` of the chart that has triggered this event.
`height` Type: string	The height of the chart specified at the time of rendering the chart in pixels or percent.
`width` Type: string	The width of the chart specified at the time of rendering the chart in pixels or percent.
`chartX` Type: number	The x-coordinate of the mouse relative to the position of the chart.
`chartY` Type: number	The y-coordinate of the mouse relative to the position of the chart.
`pageX` Type: number	The x-coordinate of the mouse relative to the document.
`pageY` Type: number	The y-coordinate of the mouse relative to the document.
`pixelHeight` Type: number	The height of the chart in pixels. This is equivalent to the `offsetHeight` of the chart container.
`pixelWidth` Type: number	The width of the chart in pixels. This is equivalent to the `offsetWidth` of the chart container.

Since:

3.4.0

See:

Example

FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: 'column2d',
        dataFormat: 'jsonurl',
        dataSource: 'chart-data.json',
        renderAt: 'chart-container-div',

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

    chart.render();
});

chartMouseMove

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

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

Parameters:

Parameter	Description
`container` Type: string	The DOM element within which the chart has been rendered.
`id` Type: string	The `id` of the chart that has triggered this event.
`height` Type: string	The height of the chart specified at the time of rendering the chart in pixels or percent.
`width` Type: string	The width of the chart specified at the time of rendering the chart in pixels or percent.
`chartX` Type: number	The x-coordinate of the mouse relative to the position of the chart.
`chartY` Type: number	The y-coordinate of the mouse relative to the position of the chart.
`pageX` Type: number	The x-coordinate of the mouse relative to the document.
`pageY` Type: number	The y-coordinate of the mouse relative to the document.
`pixelHeight` Type: number	The height of the chart in pixels. This is equivalent to the `offsetHeight` of the chart container
`pixelWidth` Type: number	The width of the chart in pixels. This is equivalent to the `offsetWidth` of the chart container

Since:

3.4.0

See:

chartRollOver

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

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

Parameters:

Parameter	Description
`container` Type: string	The DOM element within which the chart has been rendered.
`id` Type: string	The `id` of the chart that has triggered this event.
`height` Type: string	The height of the chart specified at the time of rendering the chart in pixels or percent.
`width` Type: string	The width of the chart specified at the time of rendering the chart in pixels or percent.
`chartX` Type: number	The x-coordinate of the mouse relative to the position of the chart.
`chartY` Type: number	The y-coordinate of the mouse relative to the position of the chart.
`pageX` Type: number	The x-coordinate of the mouse relative to the document.
`pageY` Type: number	The y-coordinate of the mouse relative to the document.
`pixelHeight` Type: number	The height of the chart in pixels. This is equivalent to the `offsetHeight` of the chart container
`pixelWidth` Type: number	The width of the chart in pixels. This is equivalent to the `offsetWidth` of the chart container

Since:

3.4.0

See:

Example

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

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

chartRollOut

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

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

Parameters:

Parameter	Description
`container` Type: string	The DOM element within which the chart has been rendered.
`id` Type: string	The `id` of the chart that has triggered this event.
`height` Type: string	The height of the chart specified at the time of rendering the chart in pixels or percent.
`width` Type: string	The width of the chart specified at the time of rendering the chart in pixels or percent.
`chartX` Type: number	The x-coordinate of the mouse relative to the position of the chart.
`chartY` Type: number	The y-coordinate of the mouse relative to the position of the chart.
`pageX` Type: number	The x-coordinate of the mouse relative to the document.
`pageY` Type: number	The y-coordinate of the mouse relative to the document.
`pixelHeight` Type: number	The height of the chart in pixels. This is equivalent to the `offsetHeight` of the chart container
`pixelWidth` Type: number	The width of the chart in pixels. This is equivalent to the `offsetWidth` of the chart container

Since:

3.4.0

See:

Example

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

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

backgroundLoaded

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

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

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

Parameters:

Parameter	Description
`url` Type: string	URL of the background image
`bgImageAlpha` Type: number	The value of the image alpha
`bgImageDisplayMode` Type: string	The mode in which the images are displayed in background of the chart
`bgImageVAlign` Type: string	The vertical alignment of the background image
`bgImageHAlign` Type: string	The horizontal alignment of the background image
`imageWidth` Type: number	The width of the background image
`imageHeight` Type: number	The height of the background image

See:

FusionCharts#event:backgroundLoadError

backgroundLoadError

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

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

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

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

Parameters:

Parameter	Description
`url` Type: string	The URL of the background image
`bgImageAlpha` Type: number	The alpha value of the image.
`error` Type: string	Contains error message.
`bgImageDisplayMode` Type: string	The mode in which the images are displayed in the background of the chart.
`bgImageVAlign` Type: string	Vertical alignment of the background image.
`bgImageHAlign` Type: string	Horizontal alignment of the background image.
`bgImageScale` Type: number	The value of the scaling of the image.
`imageHeight` Type: number	The height of the background image.

See:

FusionCharts#event:backgroundLoaded

dataRestored

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

beforeDataSubmit

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

Parameters:

Parameter	Description
`data` Type: string	Contains the XML string with complete chart data at it's current state.

dataSubmitError

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

Parameters:

Parameter	Description
`data` Type: string	Contains the XML string with complete chart data.
`httpStatus` Type: number	Tells the status code of the ajax POST request
`statusText` Type: string	Contains the ajax error message.
`url` Type: string	URL to which the data is sent as ajax POST request.
`xhrObject` Type: object	XMLHttpRequest object which takes care of sending the XML chart data. In case of error, this object won't be defined.

dataSubmitted

Parameters:

Parameter	Description
`data` Type: string	Contains the XML string with complete chart data.
`reponse` Type: string	Contains the reponse returned by the web server to which the HTTP POST request was submitted.
`url` Type: string	URL to which the data is sent as HTTP POST request.
`xhrObject` Type: object	XMLHttpRequest object which takes care of sending the XML chart data

dataSubmitCancelled

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

Parameters:

Parameter	Description
`data` Type: string	Contains the XML string with complete chart data.
`httpStatus` Type: number	Tells the status code of the ajax POST request
`statusText` Type: string	Contains the ajax error message.
`url` Type: string	URL to which the data is sent as ajax POST request.
`xhrObject` Type: object	XMLHttpRequest object which takes care of sending the XML chart data. In case of error, this object won't be defined.

Example

FusionCharts.addEventListener('beforeDataSubmit', function(eventObject, parameterObject) {
  eventObject.preventDefault();
}

chartUpdated

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

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

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

Parameters:

Parameter	Description
`datasetIndex` Type: number	The index of the dataset
`datasetName` Type: string	Name of the dataset
`index` Type: number	Index of the node by the order which it was created
`chartX` Type: number	The relative X-Cordinate to chart container where the node was dropped. Applicable to `dragnode` chart only.
`chartY` Type: number	The relative Y-Cordinate to chart container where the node was dropped. Applicable to `dragnode` chart only.
`pageX` Type: number	Relative X-Cordinate to screen where the node was dropped Applicable to `dragnode` chart only.
`pageY` Type: number	Relative X-Cordinate to screen where the node was dropped Applicable to `dragnode` chart only.
`id` Type: number	Number assigned to the node Applicable to `dragnode` chart only.
`label` Type: string	Label assigned to the node for identifying it and can be used to display it for toolText Applicable to `dragnode` chart only.
`link` Type: string	URL linked to a node when clicked will be taken to that URL Applicable to `dragnode` chart only.
`radius` Type: number	A Node's circumcircle radius if it is a polygon or simply the radius if the node's shape is a circle Applicable to `dragnode` chart only.
`shape` Type: string	Shape of the node. Applicable to `dragnode` chart only.
`sides` Type: number	It is the number of sides of the node if it is a polygon or 'undefined' if it is a circle. Applicable to `dragnode` chart only.
`toolText` Type: string	Tooltext defined for the node. Applicable to `dragnode` chart only.
`x` Type: number	The updated value of the node. Applicable to `dragnode` chart only.
`y` Type: number	The updated value of the node. Applicable to `dragnode` chart only.
`startValue` Type: number	The value of the plot previous to being updated. Applicable to `dragcolumn2d`, `dragline` and `dragarea` charts only
`endValue` Type: number	The value of the plot after being dragged and updated. Applicable to `dragcolumn2d`, `dragline` and `dragarea` charts only

Realtime chart API

alertComplete

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

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

Example

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

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

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

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

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

realTimeUpdateComplete

This event is raised every time a real-time chart or gauge updates itself with new data. This event is raised in any of the following cases:

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

Parameters:

Parameter	Description
`data` Type: string	Chart data as XML or JSON string
`updateObject` Type: object	It is the update object.
`prevData` Type: number	The previous data values.
`source` Type: number	Nature of data load request. Presently its value is 'XmlHttprequest'.
`url` Type: string	URL of the data source.

realTimeUpdateError

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

Parameters:

Parameter	Description
`source` Type: number	Nature of data load request. Presently its value is 'XmlHttprequest'.
`url` Type: string	URL of the data source.
`xmlHttpReqestObject` Type: object	The object which has fetched data.
`httpStatus` Type: string	A number which denotes the HTTP status number when the error was raised. For example, the status will be `404` for URL not found.

realTimeUpdateComplete

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

Parameters:

Parameter	Description
`data` Type: string	The data stream .
`updateObject` Type: object	The new data with which the chart should be updated with .
`source` Type: string	The name of the source,usually 'feedData'
`url` Type: string	url of the data source

chartCleared

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

See:

FusionCharts#clearChart

Zoomline chart specific API

pinned

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

Parameters:

Parameter	Description
`startIndex` Type: number	The data start index of the pinned range.
`startLabel` Type: string	The label of the data of the starting item of the pinned range.
`endIndex` Type: number	The data end index that is in view of the pinned range.
`endLabel` Type: string	The label of the data of the last item of the pinned range.

Printing and exporting charts

beforeExport

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

Parameters:

Parameter	Description
`bgcolor` Type: string	The background color of the exported chart.
`exportaction` Type: string	Specifies whether the exported image will be sent back to client as download, or whether it'll be saved on the server. Possible values are save/download
`exportatclient` Type: boolean	Whether to use client side export handlers (the value would be 1), or server side export handlers (the value would be 0).
`exportfilename` Type: string	This attribute specifies the name (excluding the extension) of the file to be exported.
`exportformat` Type: string	The format in which the chart is exported. `jpg`, `png`, pdf`.
`exporthandler` Type: string	This refers to the path of the server-side export handler
`exportparameters` Type: string	Additional parameters sent by the chart when defined on the chart data using the `exportParameters` chart attribute.
`exporttargetwindow` Type: string	In case of server-side exporting and when using download as action, this shows whether the return image/PDF would open in same window (as an attachment for download), or whether it will open in a new window. NOTE: Thus is only available for server side export.

Tutorials:

Tutorial: interactivity-export-to-image-or-pdf

See:

exported

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

Parameters:

Parameter	Description
`DOMId` Type: string	ID of the chart that has been exported
`statusCode` Type: string	Indicated the success status of the export process. In case of failure the value is passed as 0. On success, 1 is provided
`statusMessage` Type: string	Success or failure message
`fileName` Type: string	The name and path of the file where the exported file has been saved.
`width` Type: string	The width of the chart
`height` Type: string	The height of the chart

Tutorials:

Tutorial: interactivity-export-to-image-or-pdf

See:

exportCancelled

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

Tutorials:

Tutorial: interactivity-export-to-image-or-pdf

See:

beforePrint

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

See:

printComplete

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

See:

printCancelled

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

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

See:

FusionCharts framework level API

ready

This event is fired when the FusionCharts library is ready to be used. By the time this event is raised the browser's DOM is ready to be interacted with, which corresponds to the DOMContentLoaded event of browsers. In older browsers, where DOMContentLoaded is not fired, the ready event corresponds to the load event of the page. In case FusionCharts library is included in the page when the DOMContentLoaded event is already fired (i.e. script is loaded asyncronously using AJAX or by using script deferring methods,) the ready event is still fired to ensure integrity of all the listeners.

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

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

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

Parameters:

Parameter	Description
`version` Type: array	The FusionCharts framework version is returned in form of an array. This is equivalent to the array FusionCharts.version
`now` Type: boolean	This indicates whether this event was fired at the instant of `window.ondomcontentloaded` event (or `window.onload` of older browsers) or whether the window was already loaded and this event is fired just to maintain integrity.

Since:

3.4.0

Example

<html>
<head>
<script type="text/javascript" src="/fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript">
// Render a chart within a chart container `div` element.
FusionCharts.addEventListener('ready', function () {
    var chart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container-div',
        dataFormat: 'json',
        dataSource: {
            chart: {
                caption: "Quarterly sales summary",
                numberPrefix: "$"
            }
            data: [
                { label: "Q1", value: "213345"},
                { label: "Q2", value: "192672"},
                { label: "Q3", value: "201238"},
                { label: "Q4", value: "209881"},
            ]
        }
    });
    // Since we are in the `ready` block, the `chart-container-div`
    // element should be available by now.
    chart.render();
});
</script>
<body>
    <div id="chart-container-div">Chart loads here...</div>
</body>
</html>

Legend

legendPointerDragStart

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

Parameters:

Parameter	Description
`pointerIndex` Type: number	Indicates whether the index is 0 or 1.
`pointers` Type: object	It is an object containing the scale start value and scale end value.
`legendPointerHeight` Type: number	It is the legend pointer height in pixels or percent.
`legendPointerWidth` Type: number	It is the legend pointer width in pixels or percent.

legendPointerDragStop

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

Parameters:

Parameter	Description
`pointerIndex` Type: number	Indicates whether the index is 0 or 1.
`pointers` Type: object	Its an object containing the scale start value and the scale end value.
`legendPointerHeight` Type: number	It is the legend pointer height in pixels or percentage.
`legendPointerWidth` Type: number	It is the legend pointer width in pixels or percentage.

legendRangeUpdated

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

Parameters:

Parameter	Description
`previousMinValue` Type: number	Indicates the previous minimum value.
`previousMaxValue` Type: number	Indicates the previous maximum value.
`minValue` Type: number	Indicates the scale start value.
`maxValue` Type: number	Indicates the scale end value.

legendItemClicked

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

Parameters:

Parameter	Description
`minRange` Type: number	Minimum value of the color range represented by the legend item.
`maxRange` Type: number	Maximum value of the color range represented by the legend item.

See:

legendItemRollover

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

Parameters:

Parameter	Description
`chartX` Type: number	The relative X-Cordinate to chart container where the legend item was hovered.
`chartY` Type: number	The relative Y-Cordinate to chart container where the legend item was hovered
`datasetIndex` Type: number	The index of the dataset
`datasetName` Type: string	The name of the dataset
`id` Type: string	User-defined Id of the dataset.
`pageX` Type: number	The relative X-Cordinate to screen where the legend item was hovered.
`pageY` Type: number	The relative Y-Cordinate to screen where the legend item was hovered.
`visible` Type: boolean	`true` if the legend item is visible in the chart or false if it is hidden.

See:

legendItemRollout

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

Parameters:

Parameter	Description
`chartX` Type: number	The relative X-Cordinate to chart container where the mouse is hovered out of legend item.
`chartY` Type: number	The relative Y-Cordinate to chart container where the mouse is hovered out of legend item.
`datasetIndex` Type: number	The index of the dataset.
`datasetName` Type: string	The name of the dataset.
`id` Type: string	User-defined Id of the dataset.
`pageX` Type: number	The relative X-Cordinate to screen where the mouse is hovered out of legend item.
`pageY` Type: number	The relative Y-Cordinate to screen where the mouse is hovered out of legend item.
`visible` Type: boolean	`true` if the legend item is visible in the chart or false if it is hidden.

See:

LinkedCharts and drill-down

beforeLinkedItemOpen

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

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

Parameters:

Parameter	Description
`level` Type: string	Level of the linked item with respect to the parent chart (starts from '0').

See:

linkedItemOpened

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

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

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

Parameters:

Parameter	Description
`item` Type: object	The JavaScript object instance of the LinkedChart that is opened
`level` Type: string	Level (as number) of the LinkedChart.

Tutorials:

Tutorial: interactivity-drill-down-linkedcharts

See:

beforeLinkedItemClose

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

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

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

Parameters:

Parameter	Description
`item` Type: object	The JavaScript object instance of the LinkedChart that is opened
`level` Type: string	Level (as number) of the LinkedChart.

See:

linkedItemClosed

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

The level of the linked item starts from 0.

Parameters:

Parameter	Description
`level` Type: string	Level of the linked item which starts from '0'.

See:

connectorRollOver

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

Parameters:

Parameter	Description
`fromMarkerId` Type: string	The Id of the marker from which the connector starts.
`toMarkerId` Type: string	The Id of the marker to which the connector is drawn.
`label` Type: label	The label on the connector.

connectorRollOut

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

Parameters:

Parameter	Description
`fromMarkerId` Type: string	The Id of the marker from which the connector starts.
`toMarkerId` Type: string	The Id of the marker to which the connector is drawn.
`label` Type: label	The label on the connector.

See:

FusionCharts#event:connectorRollOver

markerRollOver

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

Parameters:

Parameter	Description
`x` Type: number	The original X co-ordinate of the marker.
`y` Type: number	The original Y co-ordinate of the marker.
`scaledX` Type: number	The scaled value of X co-ordinate of the marker.
`scaledY` Type: number	The scaled value of Y co-ordinate of the marker.
`chartX` Type: number	The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`chartY` Type: number	The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`label` Type: string	The label of the marker.

Example

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

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

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

markerRollOut

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

Parameters:

Parameter	Description
`x` Type: number	The original X co-ordinate of the marker.
`y` Type: number	The original Y co-ordinate of the marker.
`scaledX` Type: number	The scaled value of X co-ordinate of the marker.
`scaledY` Type: number	The scaled value of Y co-ordinate of the marker.
`chartX` Type: number	The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`chartY` Type: number	The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`label` Type: string	The label of the marker.

Example

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

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

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

markerClick

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

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

Parameters:

Parameter	Description
`x` Type: number	The original X co-ordinate of the marker.
`y` Type: number	The original Y co-ordinate of the marker.
`scaledX` Type: number	The scaled value of X co-ordinate of the marker.
`scaledY` Type: number	The scaled value of Y co-ordinate of the marker.
`chartX` Type: number	The x position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`chartY` Type: number	The y position of the marker with respect to the top-left corner of the map canvas (that is 0,0 position).
`label` Type: string	The label of the marker.

Example

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

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

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

printReadyStateChange

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

Parameters:

Parameter	Description
`ready` Type: boolean	This is the ready flag.
`bypass` Type: boolean	This is the bypass flag.

Deprecated:

Since 3.4 onwards, flash renderer is not part of the suite.

dataplotRollOver

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`datasetIndex` Type: number	The position of the dataset in order of its definition in source data.
`datasetName` Type: string	The `seriesName` of the dataset.
`dataIndex` Type: number	The position of the data-plot in order of its definition in source dataset.
`dataValue` Type: number	The value of the data-plot that trigerred this event
`dsplayValue` Type: string	The `displayValue` attribute that has been set for the data-plot.
`categoryLabel` Type: string	The x-axis label that corresponds to the data-plot
`toolText` Type: string	The tooltext that is displayed when hovered over the data-plot

dataplotRollOut

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`datasetIndex` Type: number	The position of the dataset in order of its definition in source data.
`datasetName` Type: string	The `seriesName` of the dataset.
`dataIndex` Type: number	The position of the data-plot in order of its definition in source dataset.
`dataValue` Type: number	The value of the data-plot that trigerred this event
`dsplayValue` Type: string	The `displayValue` attribute that has been set for the data-plot.
`categoryLabel` Type: string	The x-axis label that corresponds to the data-plot
`toolText` Type: string	The tooltext that is displayed when hovered over the data-plot

dataplotClick

Parameters:

Parameter	Description
`chartX` Type: number	x-coordinate of the pointer relative to the chart.
`chartY` Type: number	y-coordinate of the pointer relative to the chart.
`pageX` Type: number	x-coordinate of the pointer relative to the page.
`pageY` Type: number	y-coordinate of the pointer relative to the page.
`datasetIndex` Type: number	The position of the dataset in order of its definition in source data.
`datasetName` Type: string	The `seriesName` of the dataset.
`dataIndex` Type: number	The position of the data-plot in order of its definition in source dataset.
`dataValue` Type: number	The value of the data-plot that trigerred this event
`dsplayValue` Type: string	The `displayValue` attribute that has been set for the data-plot.
`categoryLabel` Type: string	The x-axis label that corresponds to the data-plot
`toolText` Type: string	The tooltext that is displayed when hovered over the data-plot

processClick

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