Methods

getObjectReferencestatic function

Returns the DOMElement created inside the chart container by FusionCharts. This is equivalent to accessing the DOMElement using the ref property.

The returned DOMElement here is the <span> element created by FusionCharts to render the chart, and not the the container element specified as the value of the renderAt attribute.

Try It Yourself!

Parameters

id

: string

[+]

ID of the chart, whose DOMElement is to be referenced.

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

clone

Creates a copy of a chart instance, creating a new chart with identical construction properties of the chart being cloned. The cloned chart, assigned an auto-generated ID, is rendered in a container DOM element that is explicitly provided.

Try It Yourself!

Parameters

overrides

: object

[+]

Object containing instructions for changes in the cloned chart. For example, passing pieChart.clone({type: 'column2d'}); will clone the pie chart, but set its chart-type as column2d. It accepts all the construction parameters of a new FusionCharts instance.

argsOnly

: boolean

[+]

Set to true, if a new FusionCharts object is not required. In that case, it causes the function to return a serializable object that can later be passed to create a new FusionCharts instance, and therefore, create a clone.

Default:

false

chartType

Gets or sets the chart type of a FusionCharts instance. To get the current chart type, call this function without any parameters. To set a new chart type, pass the chart type as the first parameter to this function. When a new chart type is set, the chart is automatically re-rendered and the chartTypeChanged event is triggered.

Try It Yourself!

Parameters

value

: string

[+]

New chart type to set

When changing the chart type, additional options can be passed to this method to update chart data and re-render the chart.

These additional options will be ignored if the value parameter is not specified.

options
: {		
dataSource
: string or object
[+]
New source of data while changing the chart type


dataFormat
: FusionCharts~dataFormats
[+]
Data format for the new data source. If this is not provided, then the existing/default data format is used. 




If the dataSource parameter is not provided, the dataFormat parameter is ignored.




}
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');
        }
    };
});
addEventListenerstatic function
Listens to events across all FusionCharts instances on a page and executes custom functions when an event is triggered. 




To listen to an event triggered by a specific chart, the non-static  addEventListener  method is used. 




 Try It Yourself! 


Parameters
type
: string or array
[+]
Type (name) of the event to listen to. To register the listener for multiple events in the same registration call, provide all event names as an array.


listener
: FusionCharts~eventListener
[+]
Function to be exceuted when the event is triggered. If multiple listeners are bound to an event, the listeners are executed in the order of definition, with arguments specific to the triggered event. 




Click  here  to read more about the eventListener 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!");
        }
    });
});
removeEventListenerstatic function
Removes the event listener(s) bound to an event. 


 Try It Yourself! 


Parameters
type
: string or array
[+]
Type (name) of the event whose listener(s) has to be removed


listener
: function
[+]
Listener function to remove


readystatic function
Allows to register callback functions that are executed when the FusionCharts library is ready to be used. In general, the FusionCharts framework is ready after the DOMContentLoaded browser event has been triggered and all the initial dependent files/modules are available. 


Multiple callbacks can be attached by calling this function any number of times. Callback functions are executed even when attached after the FusionCharts framework is ready.Therefore, it is recommended that all entry-point and initialization codes are written within the ready() function. This also helps to neatly organize all the code in a script file or the page <head> tag as well as contextually separate code from HTML blocks.


  Try It Yourself! 


Parameters
readyCallback
: FusionCharts~readyCallback
[+]
Callback function executed when the FusionCharts framework is ready


args
: *
[+]
Argument to be passed to the callback function


Default:
 FusionCharts 


context
: function
[+]
To execute a function, passed using the fn parameter, in a different scope than the default  FusionCharts  scope, pass the appropriate class object here.


Default:
 FusionCharts 


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();
});
addEventListener
Used to listen to events triggered by a specific chart. 




To listen to events triggered by all charts on a page, the static  addEventListener()  method is used. 




  Try It Yourself! 


Parameters
type
: string or array
[+]
Type (name) of the event to listen to. To register the listener for multiple events in the same registration call, provide all event names as an array.


listener
: FusionCharts~eventListener
[+]
Function to be exceuted when the event is triggered. If multiple listeners are bound to an event, the listeners are executed in the order of definition, with arguments specific to the triggered event. 




Click  here  to read more about the eventListener arguments.




removeEventListener
Removes the event listener(s) bound to an event using the  addEventListener()  method. 


  Try It Yourself! 


Parameters
type
: string or array
[+]
Type (name) of the event whose listener(s) has to be removed


listener
: function
[+]
Listener function to remove


Configured properties for LinkedCharts.This function accepts all properties that the FusionCharts constructor 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. This function lets you configure individual or multiple drill-down levels in linked charts. 


The Overlay Button:


Other than the usual construction parameters of FusionCharts, 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 as a parameter to this function. This object can have the following properties: 






Button Parameter
Type
Description






show
boolean
Whether to show the button or not




message
string
Button label. Default: Close or Back




bgColor
string
Background color for the button




borderColor
string
Border color for the button




font
string
Font family of the button (comma-separated list of fonts)




fontColor
string
Color of the button label text




fontSize
string
Size of the button label text




bold
boolean
Specify whether the button label text is bold formatted




padding
number
Padding between the label and the edges of the button






 Try It Yourself! 


Configuration properties for the LinkedCharts. To configure multiple levels at once, pass the level numbers as an array to this parameter. To configure the overlay button, pass the overlayButton object to this parameter.


To configure a specific level of the drill-down chart, this parameter specifies the level number.


Default:
0


Example
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' }
]);
setChartAttribute
Updates a chart's attributes with a new attribute-value pair, thus updating the chart's data definition root (the <chart> node in the XML data or the chart object in the JSON data). 


This function is useful when  a chart's configuration has to be updated after it has been rendered once. The function internally retrieves the last data set for the chart using the  getJSONData()  method ( or the  getXMLData()  method, for XML data). It then updates the chart object (or the <chart> element) using the new attribute-value pair and sets this data back to the chart. 




Setting the value of an attribute to null will cause the attribute to be removed from the definition and set to its default value. 




  Try It Yourself! 


Parameters
attributes
: object or string
[+]
To set/update multiple attributes at once, an object containing all the key-value pairs is passed. In case of a single value, a string that is the key (the attribute name) is passed.


value
: string
[+]
If the attributes parameter is a single string value, the value parameter contains the value for 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
Fetches value of chart attributes explicitly applied to the root chart object (or the <chart> node element). 




To fetch a list of all attributes, do not pass any parameters to this function. 




 If any attribute requested is not set for the chart or is internally computed but not explicitly set, the value is returned as undefined. For example, for multi-series column 2D charts, the default value of the  showLegends attribute is 1. However, if the attribute is not included in the chart definition and its value is requested, the function returns undefined. 


  Try It Yourself! 


Parameters
attribute
: string or array
[+]
To fetch the value of a single attribute, pass the attribute name as a string. For multiple attributes, pass an array of attribute names. Values will be returned in the order of the attribute names in the array.


getXMLData
Fetches chart data in the XML format. This function needs to be called on an existing chart; if called on a chart that has no data set for it, it returns an empty <chart /> element. 




The getXMLData() function is shorthand for chart.getChartData('xml').




  Try It Yourself! 


setXMLData
Sets chart data in the XML data format. When this function is called on a chart that has already rendered, it immediately updates the chart with the new data. The function can also be used to set data for a new chart. 




A preferrable alternative to using this method is to pass chart data to the dataSource attribute of the FusionCharts constructor. 






The setXMLData() function is shorthand for the  setChartData()  method, where the data format is set to xml. So, calling chart.setXMLData('<chart>...</chart') is the same as calling chart.setChartData('<chart>...</chart>', 'xml'). 




  Try It Yourself! 


Parameters
data
: string or object
[+]
XML data to be set for the chart, as a string


setXMLUrl
Fetches chart data from the URL provided, in the XML format. When this function is called on a chart that has already rendered, it immediately updates the chart with the new data. The function can also be used to set data for a new chart. 




A preferrable alternative to using this method is to pass chart data to the dataSource attribute of the FusionCharts constructor. 






The setXMLUrl() function is shorthand for the  setChartDataUrl()  method, where the data format of the URL is set to xmlurl. So, calling chart.setXMLUrl('data.xml') is the same as calling chart.chart.setChartDataUrl('data.xml', 'xmlurl'). 




Parameters
url
: string
[+]
Path to the XML data file


setChartDataUrl
Fetches chart data from the URL provided and passes it to the  setChartData()  method. 


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 is fetched from the URL and stored locally till the chart is rendered. 




It is not recommended to use this method to set data for a new chart. A preferrable alternative is to pass the URL as value to the dataSource attribute in the FusionCharts constructor. 






FusionCharts uses AJAX to transport data. Therefore, ensure that the chart is running from a web-server to prevent the browsers' restrictions of fetching local (file://) files. 




Parameters
url
: string
[+]
URL to fetch the chart data


format
: FusionCharts~dataFormats
[+]
Format of the data being fetched. If the value for this parameter is not a valid  dataFormat , then the default or previously set data format is assumed. 




If the data format is already known, then the  setJSONUrl()  or the  setXMLUrl()  methods can be used. 




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
Sets the data for a chart. 


When this function is called on a chart that is already rendered, the chart is instantly updated with the new data. When it is used to set data for a chart before it has rendered, data is initially stored internally and is passed to the chart when it is rendered. 




A preferrable alternative to using the setChartData() method is to pass chart data to the dataSource attribute of the FusionCharts constructor. 




 Try It Yourself! 


Parameters
data
: string or object
[+]
Data to be passed to the chart


format
: FusionCharts~dataFormats
[+]
Format of the data being passed. If the value for this parameter is not a valid  dataFormat , then the default or previously set data format is assumed. 




If the data format is already known, then the  setJSONData()  or the  setXMLData()  methods can be used. 




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
Fetches the data set for a chart, in one of the valid  dataFormats . The function needs to be called on an existing chart. If called on a chart that has no data, it returns an empty chart object for json data, an empty <chart /> node for xml data, and an empty string for csv. 


  Try It Yourself! 


Parameters
format
: FusionCharts~dataFormats
[+]
Format in which chart data has to be retrieved


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
Determines whether a chart will render properly with the data set on it. This includes data that is set using the  setChartData()  or  setChartDataUrl()  methods. 


If the function is unable to determine whether data is ready or not, it returns undefined. 


The function returns true or false only after the chart has rendered (the renderComplete event is triggered). The function returns false when:   no data is set     faulty data is set    data is incompatible with the chart type; for example, single-series data is set for a multi-series chart.


 Try It Yourself! 


Parameters
available
: boolean
[+]
Setting this parameter to true returns the status of the data, irrespective of its compatibility with the chart type. In that case, this function will return false if data provided to the chart triggers the  dataLoadError  or  dataInvalid  events


Default:
false


transcodeDatastatic function
FusionCharts supports a number of formats in which data can be provided. Click  here  to view the list of formats supported. This function allows data to be transcoded from one supported 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 one FusionCharts data format and want to convert it to another format. The fact that we do not need to instantiate a new FusionCharts instance speeds the conversion process. 


  Try It Yourself! 


Parameters
data
: string or object
[+]
Data to transcode


source
: FusionCharts~dataFormats
[+]
Source format


target
: FusionCharts~dataFormats
[+]
Target format


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






Property
Type
Description






data
object, string
Result of the transcoding process




error
object
Object containing the error message






Default:
false


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'));
});
feedData
Feeds real-time data to real-time charts and gauges. 


  Try It Yourself! 


Parameters
stream
: string
[+]
Real-time data for charts and gauges


getData
Returns the value of the data set for real-time charts and gauges.


getDataWithId
Returns a three-dimensional array that contains the data and the dataset IDs. Once the reference for the chart is obtained, this function can be invoked to retrieve data. 


  Try It Yourself! 


setData
Feeds real-time data to real-time charts and gauges. 


  Try It Yourself! 


Parameters
value
: number
[+]
Numeric value to feed to the real-time chart/gauge. For single-value gauges (LEDs, bulb, cylinder, and thermometer gauges), this is the only parameter required.


label
: string
[+]
For the angular gauge and the horizontal linear gauge, this parameter specifies the dial number.


stopUpdate
Stops a self-updating real-time chart/gauge from polling the server for real-time updates.


restartUpdate
Resumes real-time updates for a chart/gauge.


isUpdateActive
Returns true if real-time update is enabled for a chart. Returns false is real-time update is stopped using the  stopUpdate()  method. 


 Try It Yourself! 


clearChart
Clears the entire chart canvas when a real-time chart is being updated. 




An alternative to calling this function is using the Clear Chart option from the real-time context menu, on real-time charts. To activate the real-time context menu, set the showRTMenuItem (under the chart object) to 1. 




  Try It Yourself! 


getXML
Returns the chart configuration and data in the XML format. 




This method can be called only after the  loaded  event is triggered. Alternatively, the  getXMLData()  method can be used, which does not have this limitation. 




  Try It Yourself! 


setDataXML
Sets XML data for a chart, equivalent to the  setXMLData()  or the  setChartData()  methods. 


 This method can be called only after the  loaded  event is triggered. Alternatively, the  setXMLData()  method can be used, which does not have this limitation. 


  Try It Yourself! 


setDataURL (Deprecated API)
Sets the URL to fetch the XML chart data from. 


 This method can be called only after the  loaded  event is triggered. Alternatively, the  setXMLUrl()  method can be used, which does not have this limitation. 


getDataForId
Returns data for the given pointer (for real-time horizontal linear gauge) or dial (for real-time angular gauge) using its defined ID. 


  Try It Yourself! 


setDataForId
Sets data for a given pointer (for real-time horizontal linear gauge) or dial (for real-time angular gauge) using its defined ID. 


  Try It Yourself! 


hasRendered
Returns true if the chart has rendered successfully, false if it has not. 


  Try It Yourself! 


setTransparent
Sets the background color of the container DOM element, within which the chart is rendered, as transparent. 




This is not to be confused with the chart's background.




 Try It Yourself! 


Parameters
transparency
: boolean
[+]
Passing true implies that the chart is transparent.


isPlotItemSliced
Checks whether a particular slice of the pie/doughnut chart is sliced-out or sliced-in. 


  Try It Yourself! 


Parameters
index
: number
[+]
Index of the pie/doughnut slice being checked


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
Slices in/slices out a pie/doughnut slice. 




You have to provide a  callback Function if asyncRender is set to 1 (default) where you get the svg-string as a parameter of the callback function. The boolean value determines if the plot item is sliced (true) or not (false). The callback implementation does not require the user to the renderComplete event. 




  Try It Yourself! 


Parameters
index
: number
[+]
Index of the pie/doughnut slice


slice
: boolean
[+]
If set to true, it will slice out a slice, which is in the sliced-in state. If the slice is already in the sliced-out state, the state is retained.


callBackFN( sliced)
: slicePlotItem-callBack
[+]
callBackFN is called only when slicePlotItem() completes its execution.


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);
    };
});
centerLabel
Configures the center label in a doughnut chart. 


  Try It Yourself! 


Parameters
labelText
: string
[+]
Text to be displayed as the center label in the doughnut chart


Optional parameter holding a host of configurable parameters, like the cosmetic properties, for the center label. 




The properties are case sensitive.




options
: {		
font
: string
[+]
Font face for the label text


fontSize
: string
[+]
Font size of the label text


bold
: boolean
[+]
Specifies whether bold formatting will be applied for the label text


italic
: boolean
[+]
Specifies whether the label text will be in italics


color
: hexcolor
[+]
Font color for the label text


alpha
: alpha
[+]
Font opacity for the label text


hoverColor
: hexcolor
[+]
Hover color for the label text


hoverAlpha
: alpha
[+]
Hover opacity for the label text


bgColor
: hexcolor
[+]
Background color for the label


bgAlpha
: alpha
[+]
Opacity of the label background


borderColor
: hexcolor
[+]
Border color for the label background


borderAlpha
: alpha
[+]
Opacity of the label background border


borderThickness
: number
[+]
Thickness of the label background border


borderRadius
: number
[+]
Radius for a rounded label background border


padding
: number
[+]
Padding between the extremities of the label and the inner periphery of the doughnut. For a rectangular label background, it is relative to any of the four corners. For a circular background, is the gap between the two concentric circles-the background border and the inner periphery.


textPadding
: number
[+]
For a rectangular label background, it is the gutter between the text and the background border. For a circular background, it is the minimum space between the background border and the containing circle of the text.


toolText
: string
[+]
Tooltip text for the label


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




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






You have to provide a  callback Function if asyncRender is set to 1 (default) where you get the angle provided as input as a parameter of the callback function.The callback implementation does not require to listen to the renderComplete event. 




  Try It Yourself! 


Parameters
angle
: degrees
[+]
Angle measure by which the pie/doughnut chart will be rotated


Default:
0


relative
: boolean
[+]
Mode of operation for the rotation. Specifies whether the angle being set is relative to the current angle or is w.r.t absolute 0


Default:
false


callBackFN(angle)
: startingAngle-callBack
[+]
callBackFN is called only when startingAngle() completes its execution.


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);
    };
});
zoomOut
Zooms out the zoom line chart by one level. 


  Try It Yourself! 


zoomTo
Zooms the zoom line chart to view a specific range of data. 


 Try It Yourself! 


Parameters
startIndex
: number
[+]
Index of the data point starting at which the chart will be zoomed into


endIndex
: number
[+]
Index of the data point until which the chart will be zoomed into


resetChart
Resets all the zooming, panning, and pinning actions performed on a zoom line chart.


  Try It Yourself! 


setZoomMode
Switches between the zoom mode and pin mode of a zoom line chart programmatically. 




You can manually switch between the zoom mode and the pin mode by clicking a button in the top-right corner of the zoom line chart. Click  here  to read about how the zoom line chart works under each mode.




  Try It Yourself! 


Parameters
yes
: boolean
[+]
Set to true to activate the zoom mode, set to false to activate the pin mode


getViewStartIndex
Returns the index of the first visible data point (in order of its definition in the source data) on the canvas of a zoom line chart. 




You have to provide a  callback function if asyncRender is set to 1 (default) where you get the starting index as a parameter of the callback function.The callback implementation does not require to listen to the renderComplete event. 




  Try It Yourself! 


Parameters
callBackFN(index)
: getViewStartIndex-callBack
[+]
callBackFN is called only when getViewStartIndex() completes its execution.


getViewEndIndex
Returns the index of the last visible data point (in order of its definition in the source data) on the canvas of a zoom line chart. 




You have to provide a  callback function if asyncRender is set to 1 (default) where you get the starting index as a parameter of the callback function.The callback implementation does not require to listen to the renderComplete event. 




  Try It Yourself! 


Parameters
callBackFN(index)
: getViewEndIndex-callBack
[+]
callBackFN is called only when getViewEndIndex() completes its execution.


scrollTo
Scrolls the zoom-line chart to a particular position. 


  Try It Yourself! 


Parameters
scrollPosition
: Number
[+]
scrollTo is called to scroll the chart. 


 Range : 0 - 1


Default:
0


print
Prints individual charts. It hides all elements on a page except the chart to print and then invokes the page printing function (window.print()). 




This function works only for charts that have rendered completely, i.e. only after the  renderComplete  event has been triggered. 




  Try It Yourself! 


Object containing the printing options configured


options
: {		
Hides all buttons on the chart


Default:
true


}
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
Exports a chart as an image or as a PDF document. 


To enable exporting of a chart, the exportEnabled attribute (of the chart object) should be set to 1. 


 When exporting is done programmatically using this method, the export configuration is passed as parameters to this function. 




The exportChart function remains undefined until the  loaded  event is triggered. The exporting process is initiated only after the  renderComplete  event is triggered.




 To read on how you can export charts using the export-related context menu, click  here . 


  Try It Yourself! 


Parameters
The exportChart method takes the following parameters:


options
: {		
exportFormat
: string
[+]
A chart can be exported in one of the following formats:  


 | Export Format | Description | 


 | --------- | :-------------| 


 | png| Exports the charts in the high quality lossless PNG format | 


 | jpg | Exports the chart in the high quality JPEG image format       | 


 | pdf | Exports the chart as a PDF document |


Default:
png


exportFileName
: string
[+]
File name for the chart being exported, excluding the extension. The extension is automatically appended depending on the value of exportFormat parameter.


Default:
FusionCharts


exportTargetWindow
: string
[+]
When the exportAction parameter is set to download as , this parameter lets you configure whether the return image or PDF will open in the same window (as an attachment for download), or in a new browser window (_blank).


Default:
_self


exportHandler
: string
[+]
URL of the export server


exportAction
: string
[+]
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 | The exported chart image or PDF will be downloaded as file. | 


 | save | The exported chart will be saved on the server.| 




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




Default:
download


exportCallback
: function
[+]
Callback JavaScript function executed when the export process is complete. If this parameter is not assigned a value, then the window.FC_Exported is executed.


Default:
FC_Exported


}
batchExportstatic function
Exports multiple charts in a single image. This method either takes no arguments or takes an object as an argument. 


 Try It Yourself! 


Parameters
imageWidth
: number
[+]
Width of the exported image (of the charts)


Default:
Maximum chart width + 10


imageHeight
: number
[+]
Height of the exported image (of the charts)


Default:
(Total height of all charts + 5) * (number of charts + 1)


The configuration required for the chart(s) being exported can be provided in this object using the attributes given below:


charts
: {		
id
: string
[+]
Valid FusionCharts ID, to attach the chart on the main image


x
: number
[+]
x-coordinate for positioning the exported image


Default:
5


y
: number
[+]
y-coordinate for positioning the exported image


Default:
previous chart's y-coordinate + 5


width
: number
[+]
Custom width for the exported image 


 Note: If only one value from the width and the height of the chart is provided, the value of the other is calculated in a way that the aspect ratio is maintained.


Default:
Current chart width


height
: number
[+]
Custom height for the exported image 


 Note: If only one value from the width and the height of the chart is provided, the value of the other is calculated in a way that the aspect ratio is maintained.


Default:
Current chart height


}
The configuration required for the exported image's background can be provided in this object using the attributes given below:


background
: {		
bgColor
: hexcolor
[+]
Background color for the exported image


Default:
#ffffff


bgImage
: string
[+]
Background image for the exported images


bgImageAlpha
: number
[+]
Transparency of the background image


bgImageX
: number
[+]
Starting x-coordinate for positioning the background image


bgImageY
: number
[+]
Starting y-coordinate for positioning the background image


bgImageWidth
: number
[+]
Width of the background image 


 Note: If only one value from the width and the height is provided, the value of the other is calculated in a way that the aspect ratio is maintained.


Default:
Original width of the image


bgImageHeight
: number
[+]
Height of the background image 


 Note: If only one value from the width and the height is provided, the value of the other is calculated in a way that the aspect ratio is maintained.


Default:
Original height of the image


}
exportTargetWindow
: string
[+]
Set to _self to open the exported image in the same window 


 Set to _blank to open the exported image in a new window


Default:
_self


exportAction
: string
[+]
Set to _save to save the exported image on the server 


 Set to _download to send back the image to the client as a download


Default:
_download


exportFileName
: string
[+]
Default file name (excluding the extension) for the exported image


exportHandler
: string
[+]
For server-side exporting: Path of the export handler (the ready-to-use scripts provided by FusionCharts) 


 For client-side exporting: DOM ID of the FusionCharts Export Component embedded in the web page, along with the chart


Default:
_download


exportFormats
: string
[+]
List of formats in which the chart can be exported 


 The formats are separated using the | (pipe) character.


Default:
_download


exportCallback
: string
[+]
Name of the JavaScript function that is called when the export process finishes


exportAtClientSide
: string
[+]
Set to 1 to enable client-side exporting


Default:
_download


getSVGString
Fetches the SVG of a chart, created by FusionCharts while rendering the chart, as a string. 




This function can be called only after the chart has rendered. 






You have to provide a  callback Function if asyncRender is set to 1 (default) where you get the svg-string as a parameter of the callback function. The callback implementation does not require to listen to the renderComplete event. 




  Try It Yourself! 


Parameters
callBackFN( svgString )
: getSVGString-callBack
[+]
callBackFN is called only when getSVGString() completes its execution.


lockResize
Controls a chart’s automatic resizing ability when its dimensions are in percentage. This function has to be called before a chart has rendered. Using the  hasRendered()  method can be useful here. If the lockResize() function is called without a parameter, it returns the current state of the resize lock.


Parameters
state
: boolean
[+]
Setting this parameter to true will lock the automatic percentage-based resizing. If resize is already locked, sending false unlocks it.


showChartMessage
Shows a text message on a chart. 


 Try It Yourself! 


Parameters
text
: string
[+]
Text message to be displayed


modal
: boolean
[+]
Boolean value to indicate whether the message will be shown on an overlay button or on the chart.


Default:
false


cancelable
: boolean
[+]
If set to true, the modal can be closed by clicking. Defaults to false. 




Applicable only if modal is set to true. 




Default:
false


formatNumberstatic function
Formats input numbers based on the formatting configuration passed. The function can be called globally on the  FusionCharts  object or on a specific instance of FusionCharts Suite XT. 


 When called globally on the FusionCharts object, the function applies the configuration settings to all numbers on the chart. 


  Try It Yourself! 


Parameters
num
: number
[+]
Number to be formatted


type
: string
[+]
When called globally on the FusionCharts object, the function applies the configuration settings to all numbers on the chart. This parameter selectively formats numbers based on chart elements, by taking yaxisvalues, xaxisvalues, and datalabels as values.


Default:
datalabels


config
: object
[+]
Optional number formatting attributes to override the default number formatting options of a chart 




While calling formatNumber on the FusionCharts object, this becomes the second parameter.




Example
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();
});
getJSONData
Fetches chart data in the JSON format. This function needs to be called on an existing chart; if called on a chart that has no data set for it, it returns an empty chart object. 




This function is shorthand for chart.getChartData('json').




  Try It Yourself! 


setJSONData
Sets chart data in the JSON data format. When this function is called on a chart that has already rendered, it immediately updates the chart with the new data. The function can also be used to set data for a new chart. 




A preferrable alternative to using this method is to pass chart data to the dataSource attribute of the FusionCharts constructor. 






The setJSONData() function is shorthand for the  setChartData()  method, where the data format is set to json. So, calling chart.setXMLData({'chart': ...}) is the same as calling chart.setChartData({'chart': ...}, 'json'). 




  Try It Yourself! 


Parameters
data
: string or object
[+]
JSON data to be set for the chart, as a string or as a JavaScript object


setJSONUrl
Fetches chart data from the URL provided, in the JSON format. When this function is called on a chart that has already rendered, it immediately updates the chart with the new data. The function can also be used to set data for a new chart.  




A preferrable alternative to using this method is to pass chart data to the dataSource attribute of the FusionCharts constructor. 






The setJSONUrl() function is shorthand for the  setChartDataUrl()  method, where the data format of the URL is set to jsonurl. So, calling chart.setJSONUrl('data.json') is the same as calling chart.setChartDataUrl('data.json', 'jsonurl'). 




Parameters
url
: string
[+]
Path to the JSON data file


getCSVData
Fetch chart data set in the CSV format. 


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: , (comma)




exportDataQualifier
string
Sets the CSV qualifier string. Default: {quot}




exportDataFormattedVal
boolean
Sets whether the output will be a formatted string or a pure number




exportErrorColumns
boolean
Forces error output on the error bar, error line, and error scatter charts






 For the exportDataSeparator and exportDataQualifier attributes, you can provide the quotation mark, the apostrophe, and the tab character using the {quot}, {apos} and {tab} short-codes, respectively.


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




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






This function is the shorthand for  chart.getChartData('csv'). 




 Try It Yourself! 


getDataAsCSV
Fetch chart data as comma-separated values. The delimiter can be changed by passing relevant chart attributes. 


  Try It Yourself! 


render
Renders a chart inside a container element on a page. If the chart is already rendered, it can be re-rendered inside the same container DOM element or a different element. 


 Creating a chart using new FusionCharts() only creates a JavaScript instance for the chart; this function is called to render the chart. Usually, the renderAt construction parameter specifies the element on the page, inside which the chart will be rendered. If renderAt is not provided, then the container element is specified as the parameter to this function.


 Try It Yourself! 


Parameters
containerElement
: string or DOMElement
[+]
Reference or ID of the DOM element inside which the chart is to be rendered. If this argument is not provided, it is assumed that the renderAt attribute is provided during chart creation.


insertMode
: FusionCharts~DOMInsertModes
[+]
Method for inserting the chart's DOM element within the containerElement. Click  here  to read more about  the DOM insert modes.


Default:
replace


callback
: FusionCharts~renderCallback
[+]
Callback function executed after the chart is successfully rendered. If the last parameter to the render() function is a function, it is treated as a callback.


resizeTo
Resizes the chart to the specified width and height. The values for the width and height are passed, in pixels or percentage, as parameters to this function. If the function is called without any parameters, it returns the current value of the chart width and height. 


 This function is useful in controlling the chart dimensions based on changes in the dimensions of a resizable dialog box. It is also useful in resizing charts for responsive layouts, based on device orientation change. 




When the chart dimensions are set in percentage, the chart partially redraws itself when the chart container is resized. The chart uses a very low-profile polling, at an interval of 300 ms to check whether the container has effectively resized. 




  Try It Yourself! 


Parameters
width
: number or percent
[+]
Chart width to set, in pixels or percentage


height
: number or percent
[+]
Chart height to set, in pixels or percentage


dispose
Disposes a chart completely, when called on an instance of FusionCharts. This clears the entire chart object and removes it from the DOM tree structure. When the chart is successfully disposed, chartInstance.disposed is set to true. 


  Try It Yourself! 


configure
Configures status messages that are displayed while rendering a chart. For example, while a chart’s data is being fetched from a remote URL, the chart will display the message Retrieving data. Please wait. 


 Try It Yourself! 


Parameters
option
: FusionCharts~chartStatusMessages
[+]
To configure a single attribute, specify the attribute (the key) as a string. To configure multiple attributes, this can be an object having key-value pairs of all configuration options.


value
: string
[+]
If the option parameter has a single value as the key, this parameter is the value of that key.


renderstatic function
Uses a one-line argument parameter to render FusionCharts directly into the container specified in the arguments.


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


 Try It Yourself! 


Parameters
options
: object
[+]
Chart configuration options required to create a chart. The options must include the renderAt parameter for the chart to render instantly.


callback
: FusionCharts~renderCallback
[+]
Callback function executed when the chart is successfully rendered


Example
FusionCharts.ready(function () {
    var chart = FusionCharts.render({
        type: "column2d",
        renderAt: "chart-container-div",
        dataSource: "data.json",
        dataFormat: "jsonurl"
    });
});
Was this article helpful to you ?
Where do you think this article needs improvement?