Loading
Methods
getObjectReference static function
The function returns the DOMElement that is created inside chart container by FusionCharts. The returned element is the same as accessing the 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
The 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);
}addEventListener static function
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 addEventListener method on a chart instance to bind to an event fired by a specific chart.
Parameters
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.
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 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!");
}
});
});removeEventListener static function
Removes an event that was originally added using addEventListener.
Parameters
ready static function
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
Pass a function that would be executed as callback when FusionCharts framework is ready.
Argument to be passed on to the callback function.
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();
});addEventListener
Listen to events fired by an individual chart. For more information on the available events, refer to the events section.
Parameters
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.
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 eventListener for more details on the arguments.
removeEventListener
Removes an event that was originally added using addEventListener.
Parameters
clone
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
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.
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.
false
isActive
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 hasRendered is more relevant.
chartType
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 chartTypeChanged event is fired.
Parameters
Sets the new chart type.
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.
options
: {
Provide a new source of data during the change of chart type.
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.
}
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');
}
};
});setChartAttribute
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 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
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.
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
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
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.
configureLink
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
param
: object or array
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.
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'
}
});render
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
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.
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 DOMInsertModes
replace
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.
resizeTo
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
300msto check whether the chart container has effectively resized. It ignores repeated resizes.
Parameters
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.
configure
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
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.
In case the first parameter is a single key as string, this parameter must be provided as value of that configuration key.
setCurrentRenderer static function
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
The name of the renderer (variant of chart rendering method) that is used.
getCurrentRenderer static function
Gets the current renderer that will be used during instantiation of new charts.
render static function
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
Options required to create FusionCharts. The option must have the renderAt parameter for the render to happen instantly.
Upon successful render of a chart, a function passed to this parameter is called.
Example
isPlotItemSliced
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
pieanddoughnutchart types only.
Parameters
The index of the data corresponding to the pie/doughnut slice.
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
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
pieanddoughnutchart types only.
Parameters
The index of the data corresponding to the pie/doughnut slice.
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.
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
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
doughnutchart only.
Parameters
The text to be displayed at doughnut center.
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.
options
: {
Sets the font face of the label.
Defines the font size of the label.
Specifies of whether the label be bold.
Specifies of whether the label be in italic.
Sets the color of the label text.
Sets the opacity of the label text.
Sets the hover color of the label text.
Sets the hover opacity of the label text.
Sets the color of the label background.
Sets the opacity of the label background.
Sets the color of the label background border.
Sets the opacity of the label background border.
Sets the thickness of the label background border.
Sets the radius for rounded label background.
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.
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.
Sets the tooltext 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. 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
pieanddoughnutchart types only.
Parameters
The angle by which to rotate the entire pie/doughnut chart.
0
Specify whether the angle being set is relative to the current angle or with respect to absolute 0.
false
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 ZoomLine chart one level out
zoomTo
Zooms ZoomLine chart to a range of data.
Parameters
resetChart
Reset all zoom, pan and pin actions that has been done on ZoomLine chart.
setZoomMode
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
Boolean value to be true if zoom mode needs to be activated, false to activate pin mode.
getViewStartIndex
Returns the index of the first visible point on canvas of ZoomLine chart
getViewEndIndex
Returns the index of the last visible point on canvas of ZoomLine chart
formatNumber static function
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
The number that needs to be formatted.
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.
datalabels
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.
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();
});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 renderComplete event has fired.
Parameters
Printing options
options
: {
Hides all buttons on the chart.
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 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 renderComplete event > has been fired. The function itself remains undefined until the loaded event > is raised by the chart.
Parameters
-
options
: {
| 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 |
png
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.
FusionCharts
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).
_self
URL of the export server.
| 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. |
download
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.
FC_Exported
}
getSVGString
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.
lockResize
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 hasRendered can be useful here. If this function is called without parameter, it returns the current state of resize lock.
Parameters
Sending true for this parameter causes the automatic percentage based resize to be turned off. If resize is already locked, sending false unlocks it.
showChartMessage
Shows a text message on a chart.
Parameters
The text message that needs to be displayed.
Boolean value whether to show the message on an overlay or on the chart. Defaults to false.
false
Boolean value applicable only if modal is true. If set to true the modal can be closable on click. Defaults to false.
false
getSWFHTML
Gets the HTML of SWF
addVariable
Adds variable to Flash chart. Equivalent to configure for JavaScript charts
getXML
This function returns the data and and configuration set on a chart in XML format. The function is usable after the loaded event of a chart has been fired. As such, it is recommended to use the alternate function getXMLData, which does not have this limitation of being available only after the loaded event has been fired.
setDataXML
Sets XML data set on chart. Equivalent to setXMLData or setChartData. The function is usable after the loaded event of a chart has been fired. As such, it is recommended to use the alternate function setXMLData, which does not have this limitation of being available only after the loaded event has been fired.
setDataURL
hasRendered
Returns whether a chart has been successfully rendered or not.
setTransparent
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
Passing true implies that the chart is transparent.
feedData
This function feeds real-time data to real-time charts and gauges. The function accepts a string containing the real-time data.
Parameters
stream
: string
getData
This function returns the value of the data set on real-time charts and gauges.
setData
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
value
: string
label
: string
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.
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.
setChartDataUrl
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 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 setJSONUrl or 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
The URL from where to fetch the data of the chart.
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 dataFormats then the current default or previously set data format is assumed.
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
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 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 setXMLData or setJSONData to set XML or JSON data respectively.
Parameters
The data to be passed on to the chart in one of the available data formats as specified by the format parameter.
The format of the data being passed on to the chart. If this parameter is not provided or is not a valid member of dataFormats then the current default or previously set data format is assumed.
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
Fetch data that has been set on a chart in one of the formats specified in 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
The format in which the data is to be retrieved from the chart.
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
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 setChartData or 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
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 dataLoadError or dataInvalid to be fired
false
transcodeData static function
FusionCharts supports a number of formats in which data can be provided. The default list is mentioned at 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
The data that needs to be transcoded from one format to another.
The data format of the data provided.
The desired data format in which the data needs to be converted.
| 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 |
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'));
});getCSVData
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.
getDataAsCSV
Fetch the data set to the chart in comma separated values format. The delimiter can be changed by passing relevant chart attributes.
getJSONData
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.
setJSONData
This function is used to update data of a chart using data in JSON format as defined in dataFormats. It is a shorthand of the function setChartData where the data format is always JSON. So, calling chart.setXMLData({'chart': ...}) is the same as calling chart.setChartData({'chart': ...}, 'json'). Similar to 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
This parameter accepts the JSON data to be passed on to the chart string or as JavaScript object.
setJSONUrl
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 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 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
Path to JSON data file.
getXMLData
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.
setXMLData
This function is used to update data of a chart using data in XML format as defined in dataFormats.
It is a shorthand of the function setChartData where the data format is always XML. So, calling chart.setXMLData('<chart>...</chart') is the same as calling chart.setChartData('<chart>...</chart>', 'xml').
Similar to 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
This parameter accepts valid XML as a string to be passed on to the chart as data source.
setXMLUrl
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 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').
Similar to 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
Path to XML data file.
- getObjectReference static
- addEventListener static
- removeEventListener static
- ready static
- addEventListener
- removeEventListener
- clone
- isActive
- chartType
- setChartAttribute
- getChartAttribute
- configureLink
- render
- resizeTo
- dispose
- configure
- setCurrentRenderer static
- getCurrentRenderer static
- render static
- isPlotItemSliced
- slicePlotItem
- centerLabel
- startingAngle
- zoomOut
- zoomTo
- resetChart
- setZoomMode
- getViewStartIndex
- getViewEndIndex
- formatNumber static
- exportChart
- getSVGString
- lockResize
- showChartMessage
- getSWFHTML
- addVariable
- getXML
- setDataXML
- setDataURL
- hasRendered
- setTransparent
- feedData
- getData
- setData
- stopUpdate
- restartUpdate
- isUpdateActive
- clearChart
- setChartDataUrl
- setChartData
- getChartData
- dataReady
- transcodeData static
- getCSVData
- getDataAsCSV
- getJSONData
- setJSONData
- setJSONUrl
- getXMLData
- setXMLData
- setXMLUrl