-
clone(overrides, argsOnly) → {FusionCharts|object}
-
Use this function to create a copy of a chart instance. Cloning a chart object results in creation of a new chart with identical construction properties of the chart being cloned. A cloned chart is not rendered by default and needs to be provided a container DOM element to be rendered into. A cloned chart gets one auto-generated chart Id assigned.
Parameters:
Parameter Description overrides
- object
-
<optional>
<nullable>
This parameter can be very useful in instructing what changes needs to be done while cloning a chart. It accepts all the construction parameters of a new FusionCharts instance.
For example, passing
pieChart.clone({type: 'column2d'});
will clone the pie chart, but set its chart-type ascolumn2d
.argsOnly
- boolean
-
<optional>
- false
Setting this to
true
does not return a new FusionCharts object. Instead, it causes the function to return a serializable object that can be later passed on while creating a new FusionCharts and as such create a clone.Returns:
Type:
-
isActive() → {boolean}
-
Denotes whether a chart is "active" or not after being rendered. This is primarily relevant for Flash variant of the charts since they tend to loose functionality when hidden or scrolled away as a measure to save system resources.
For JavaScript charts, this returns
false
when a chart has not been rendered. As such, using the function {@linkFusionCharts#hasRendered} is more relevant.- Deprecated:
- 3.4.0 - The removal of Flash variant of the charts discards the use of this function since JavaScript are always "active" and does not loose its functionalities when out of viewport of the browser.
Returns:
- Returns
true
if a Flash chart is visible and can communicate with the rest of the page using its internal JavaScript API. For JavaScript charts, this returnsfalse
when a chart has not been rendered.
Type:
-
chartType(value, options) → {string}
-
Gets or sets the chart type of an instance of FusionCharts.
To change the chart type, pass the new chart type as the first parameter to this function. The chart is automatically re-rendered when a new chart type is set. To get the current chart type, call this function without any parameters.
When the chart type is changed using this method, the chart is re-rendered and the FusionCharts#event:chartTypeChanged event is fired.
Parameters:
Parameter Description value
- string
-
<optional>
Sets the new chart type.
options
- object
-
<optional>
During modifying the chart type using this method, additional options can be passed on to update chart data and re-render the chart at the same time. Note that these options are ignored if you do not provide a
value
(first) parameter.Properties
Parameter Description dataSource
Provide a new source of data during the change of chart type.
dataFormat
- FusionCharts~dataFormats
-
<optional>
Specify the data format of the new
dataSource
provided during chart-type update. If this is not provded, then it is assumed that thedataSource
provided is same as the existing or defaultdataFormat
. IfdataSource
is not provided, this parameter is ignored.- Since:
- 3.4.0
- See:
Fires:
Returns:
The current chart type is returned.
Type:
Example
// Render a column chart and on click of a button toggle it from column to pie and vice versa. FusionCharts.ready(function () { var chart = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', dataSource: 'weekly-sales.json', dataFormat: 'jsonurl' }).render(); // Assign the functionality of toggling chart type when clicked on // a button (with an id toggle-chart-type). document.getElementById('toggle-chart-type').onclick = function () { if (chart.chartType() === 'column2d') { chart.chartType('pie2d'); } else { chart.chartType('column2d'); } }; });
-
render(containerElement, insertMode, callback)
-
Creating a chart using
new FusionCharts()
merely creates a JavaScript instance of the chart. The chart is not yet made visible on the page. In order to render it in a location on the page, this function needs to be called. Usually, when the chart is instantiated, therenderAt
construction parameter specifies the element on the page inside which the chart will be rendered. If therenderAt
parameter is not provided during construction of the page, then the same can be provided as the first parameter of this function.This function renders a chart inside a container element on a page. If a chart is already rendered, it can be re-rendered inside the same container DOM element or some other element.
Parameters:
Parameter Description containerElement
- string or DOMElement
-
<optional>
A reference or
id
of theDOMElement
inside which the chart is to be rendered. If this argument is not provided, it is assumed that therenderAt
option is provided during creation of the chart.insertMode
- FusionCharts~DOMInsertModes
-
<optional>
- replace
This parameter specifies the method using which the chart's DOM element will be inserted within the
containerElement
. For more information regarding DOM insert modes, see FusionCharts~DOMInsertModescallback
- FusionCharts~renderCallback
-
<optional>
This parameter is a callback function that is called after the chart is successfully rendered. The last parameter to
render()
is always treated as a callback if it is a function.Fires:
-
resizeTo(width, height)
-
Calling this function on a chart instance resizes the chart to the specified width or height. This function is only available for charts that have already rendered.
Similar to setting the width and height of a chart through the
new FusionCharts()
constructor, the values for width and height can be passed in number or percentage for this function. Setting a percentage causes the chart to partially redraw itself when chart container is resized.Calling this function without a value for either width or height will return the current value of the width or height respectively.
For example, this function is useful in controlling the dimension of chart based on the change in dimension of a resizable dialog box. It is also useful in resizing charts for responsive layouts, based on device orientation change.
When dimension is set in percentage, the charts use a very low-profile polling at an interval of
300ms
to check whether the chart container has effectively resized. It ignores repeated resizes.Parameters:
Parameter Description width
Set the width of the chart in pixels or percent.
height
Set the height of the chart in pixels or percent.
Fires:
-
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 totrue
.It is recommended that you dispose unused charts to save memory and avoid memory leaks in your application or dashboard.
Fires:
-
configure(option, value)
-
FusionCharts displays various status messages while rendering a chart. For example, while a chart's data is being fetched from a remote URL, the chart will display "Retrieving data. Please wait." These messages can be configured using this function.
Parameters:
Parameter Description option
The option can either be a string specifying the property that is to be configured, in which case, the second parameter must be provided. Otherwise, this can be an object having key-value pair of all configuration options.
value
- string
-
<optional>
In case the first parameter is a single key as string, this parameter must be provided as value of that configuration key.
- Since:
- 3.2.0
-
<static> render(options, callback) → {FusionCharts}
-
Render FusionCharts directly using the simplest one-line argument parameter. This function directly renders FusionCharts into the container specified in arguments.
Calling this function directly is same as creating a new instance of
FusionCharts
and calling.render()
on it, i.e.,var chart = FusionCharts.render({...});
is same asvar chart = new FusionCharts({...}); chart.render();
.Parameters:
Parameter Description options
Options required to create FusionCharts. The option must have the
renderAt
parameter for the render to happen instantly.callback
- FusionCharts~renderCallback
-
<optional>
Upon successful render of a chart, a function passed to this parameter is called.
Fires:
- FusionCharts#event:beforeRender
- FusionCharts#event:rendered
- FusionCharts#event:renderComplete
- FusionCharts#event:renderCancelled
Returns:
- Returns the newly created instance of FusionCharts object.
Type:
Example
FusionCharts.ready(function () { var chart = FusionCharts.render({ type: "column2d", renderAt: "chart-container-div", dataSource: "data.json", dataFormat: "jsonurl" }); });
-
isPlotItemSliced(index) → {boolean}
-
Pie charts have slices that can be clicked to slice in and out. Checks whether a particular wedge of Pie or Doughnut chart is sliced-out or sliced-in.
Available on
pie
anddoughnut
chart types only.Parameters:
Parameter Description index
The index of the data corresponding to the pie/doughnut slice.
Returns:
- The sliced state of the pie/doughnut wedge. Returns
true
if it's sliced out, orfalse
if it's sliced in.
Type:
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); }; });
- The sliced state of the pie/doughnut wedge. Returns
-
slicePlotItem(index, slice) → {boolean}
-
Pie charts have slices. These slices can be clicked by users to slice in or slice out. Slices a pie/doughnut wedge to in / out state. In absence of the optional second parameter, it toggles the sliced state of the pie. The second parameter only enforces a specific sliced state.
Available on
pie
anddoughnut
chart types only.Parameters:
Parameter Description index
The index of the data corresponding to the pie/doughnut slice.
slice
- boolean
-
<optional>
Gives direction to chart on what is the required sliced state. For
true
, it slices out, if in sliced-in state. Or else, maintains it's sliced-out state. And vice-versa.Fires:
Returns:
- The final sliced state of the pie/doughnut wedge. Returns
true
if it's sliced out, orfalse
if it's sliced in.
Type:
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(labelText, options)
-
Sets the center label in Dougnut 2D chart. The label cosmetics are configurable via the second optional parameter, which accepts a host of related properties.
Available on
doughnut
chart only.Parameters:
Parameter Description labelText
The text to be displayed at doughnut center.
options
- object
-
<optional>
The optional parameter that holds a host of configurable params with most them being cosmetic properties of the center label. The properties are case sensitive.
Properties
Parameter Description font
- string
-
<optional>
Sets the font face of the label.
fontSize
- string
-
<optional>
Defines the font size of the label.
bold
- boolean
-
<optional>
Specifies of whether the label be bold.
italic
- boolean
-
<optional>
Specifies of whether the label be in italic.
color
- hexcolor
-
<optional>
Sets the color of the label text.
alpha
- alpha
-
<optional>
Sets the opacity of the label text.
hoverColor
- hexcolor
-
<optional>
Sets the hover color of the label text.
hoverAlpha
- alpha
-
<optional>
Sets the hover opacity of the label text.
bgColor
- hexcolor
-
<optional>
Sets the color of the label background.
bgAlpha
- alpha
-
<optional>
Sets the opacity of the label background.
borderColor
- hexcolor
-
<optional>
Sets the color of the label background border.
borderAlpha
- alpha
-
<optional>
Sets the opacity of the label background border.
borderThickness
- number
-
<optional>
Sets the thickness of the label background border.
borderRadius
- number
-
<optional>
Sets the radius for rounded label background.
padding
- number
-
<optional>
The padding between extremities of the label and inner periphery of the doughnut. For rectangular label background, it's relative to any of the 4 corners. While for circular background, it's the gap between the 2 concentric circles, background border and inner periphery.
textPadding
- number
-
<optional>
For rectangular label background, it's the gutter between the text and the background border. While for circular background, it's the minimum space between the background border and the containing circle of the text.
toolText
- string
-
<optional>
Sets the tooltext for the label.
Fires:
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(angle, relative) → {degrees}
-
Rotates the pie/doughnut chart to a specific angle or by a specific angle. The mode of operation is controlled by the optional second parameter. Even the first parameter is optional, in absence of which, the chart doesn't rotate and simply returns the current starting angle of the pie/doughnut chart.
Starting angle of a pie/doughnut chart is the angle at which the starting face of the first data is aligned to. Each pie is drawn in counter clock-wise direction.
Available on
pie
anddoughnut
chart types only.Parameters:
Parameter Description angle
- degrees
-
<optional>
- 0
The angle by which to rotate the entire pie/doughnut chart.
relative
- boolean
-
<optional>
- false
Specify whether the angle being set is relative to the current angle or with respect to absolute 0.
Returns:
- The final state of the starting angle of the chart.
Type:
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); }; });
-
lockResize(state) → {boolean}
-
Controls a chart's automatic resizing ability when its dimension is in percentage.
This function has to be called before a chart has rendered. Using FusionCharts#hasRendered can be useful here.
If this function is called without parameter, it returns the current state of resize lock.
Parameters:
Parameter Description state
- boolean
-
<optional>
Sending
true
for this parameter causes the automatic percentage based resize to be turned off. If resize is already locked, sendingfalse
unlocks it.Returns:
- Returns whether the chart's automatic resize feature has been locked or not.
Type:
-
hasRendered() → {boolean}
-
Returns whether a chart has been successfully rendered or not.
- See:
Returns:
Type:
-
setTransparent(transparency) → {boolean}
-
Sets the chart's container background color as transparent. This is not the chart's background. It is the background of the container DOM element within which the chart has been rendered.
Parameters:
Parameter Description transparency
Passing
true
implies that the chart is transparent.- Deprecated:
- 3.4.0 - The container transparency can now be controlled using the `containerBackgroundOpacity` parameter while creating a new instance of FusionCharts.
Returns:
Type:
-
feedData(stream)
-
This function feeds real-time data to real-time charts and gauges. The function accepts a string containing the real-time data.
Parameters:
Parameter Description stream
-
getData()
-
This function returns the value of the data set on real-time charts and gauges.
-
setData(value, label)
-
This function feeds real-time data to real-time gauges. In single value gauges (LEDs, Bulb, Cylinder, Thermometer) the function takes a numeric value as the parameter. For Angular gauge and Horizontal Linear gauge, this function accepts two parameters - the dial number and the value to update.
Parameters:
Parameter Description value
label
-
stopUpdate()
-
- See:
-
- FusionCharts#startUpdate
- FusionCharts#restartUpdate
- FusionCharts#isUpdateActive
- FusionCharts#clearChart
-
restartUpdate()
-
- See:
-
- FusionCharts#startUpdate
- FusionCharts#stopUpdate
- FusionCharts#isUpdateActive
- FusionCharts#clearChart
-
isUpdateActive()
-
- See:
-
- FusionCharts#startUpdate
- FusionCharts#stopUpdate
- FusionCharts#clearChart
- FusionCharts#restartUpdate
-
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 to1
in chart configuration.- See:
-
- FusionCharts#startUpdate
- FusionCharts#stopUpdate
- FusionCharts#isUpdateActive
- FusionCharts#restartUpdate
Fires:
-
zoomOut()
-
Zooms ZoomLine chart one level out
Fires:
-
zoomTo(startIndex, endIndex)
-
Zooms ZoomLine chart to a range of data.
Parameters:
Parameter Description startIndex
The index of the dataset from which it needs to be zoomed into.
endIndex
the index of the dataset until which it needs to be zoomed into.
Fires:
-
resetChart()
-
Reset all zoom, pan and pin actions that has been done on ZoomLine chart.
Fires:
-
setZoomMode(yes)
-
Switches between zoom and pin mode. This function does not work when
allowPinMode
is set to0
in chart XML or JSON.Zoom Line charts can have either a zoom mode or a pin mode. Zoom mode lets you select a section of the chart by dragging mouse cursor across the canvas and the chart zooms in on the selected section. In pin mode, the selected portion can be dragged around to compare with the rest of the chart. Zoom mode and pin mode can be toggled by clicking a button on the top right corner of the chart. This function lets you switch between zoom mode and pin mode programmatically.
Parameters:
Parameter Description yes
Boolean value to be
true
if zoom mode needs to be activated,false
to activate pin mode.Fires:
-
getViewStartIndex() → {number}
-
Returns the index of the first visible point on canvas of ZoomLine chart
Returns:
Type:
-
getViewEndIndex() → {number}
-
Returns the index of the last visible point on canvas of ZoomLine chart
Returns:
Type:
-
setChartAttribute(attributes, value)
-
Updates a chart's data attributes with the new attribute-value pair. In other words, it updates a chart's data definition root. That would be
<chart>
node in case data is inXML
format or thechart {}
object in case it is inJSON
format. You must have the chart's data being set for these attributes to take effect.This function is useful when updating a chart's configuration after it has been rendered once. The function internally retrieves the last data set on the chart (using FusionCharts#getJSONData). It then updates the
{ chart: {} }
object of the data using the new attributes provided and then sets this data back to the chart.Setting the value of a parameter to
null
causes the attribute to be removed (unset) and restored to it's default value.Parameters:
Parameter Description attributes
The set of attributes to be is passed on as key-value pair of an object. In case of updating a single attribute, the key can be passed as a
string
and the value as the second parameter.value
- string
-
<optional>
<nullable>
In case the first parameter is a single attribute as string, the second parameter (i.e. this parameter) must be provided as the value of that key.
Example
// Here we would render a chart in a DOM element with an id, say "chart-container", and upon clicking the // chart, we would toggle the visibility of its legend. FusionCharts.ready(function () { FusionCharts.render({ id: 'salesChart', type: 'pie2d', renderAt: 'chart-container', dataSource: { chart: { caption: 'Revenue distribution' }, data: [ { value: '22', label: 'Redistribution' }, { value: '54', label: 'Internal Circulation' }, { value: '24', label: 'Sale' }, ] }, events: { chartClick: function (event) { var chart = event.sender, // Check whether legend is currently visible by fetching the showLegend attribute legendVisible = !!+chart.getChartAttribute('showLegend'); // Set the opposite of the current state of the legend's visibility. chart.setChartAttribute('showLegend', legendVisible ? '0' : '1'); } } }); });
-
getChartAttribute(attribute) → {string|object}
-
Fetch value of chart attributes (configurations) that have been explicitly applied to root level
chart
. This function can be used to return value of a single attribute or a list of attributes or all attributes have been applied to the chart.- To fetch a single attribute, pass the name of the attribute as a string.
- To fetch a list of selected attributes, pass an array of attribute names. This will return an object with items in the order in which they are provided in the array.
- To fetch a list of all attributes, do not pass a parameter to this function.
If any attribute requested is not set on the chart, the value for that attribute is returned as
undefined
. This will beundefined
even for values that are internally computed but not explicitly set. For example, for Multi-series Column2D charts,showLegend
defaults to"1"
. But, ifshowLegend
is not provided as part of chart configuration, requesting the value ofshowLegend
through this function will returnundefined
.Parameters:
Parameter Description attribute
The attribute or an array of attributes that is to be fetched. If this parameter is not provided, then all available chart attributes are returned.
Returns:
The value of the attribute in form of a string in case a single attribute was requested. Otherwise, an object containing a set of key value pairs.
Type:
-
getXML() → {string}
-
This function returns the data and and configuration set on a chart in
XML
format. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#getXMLData, which does not have this limitation of being available only after theloaded
event has been fired.- Deprecated:
- 3.2.0 - It is recommended that the alternate functions FusionCharts#getXMLData or FusionCharts#getChartData be used instead of this.
- See:
Returns:
Type:
-
setDataXML()
-
Sets XML data set on chart. Equivalent to FusionCharts#setXMLData or FusionCharts#setChartData. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLData, which does not have this limitation of being available only after the
loaded
event has been fired.- Deprecated:
- 3.2.0 - It is recommended that the alternate functions FusionCharts#setXMLData or FusionCharts#setChartData be used instead of this.
- See:
-
setDataURL()
-
Sets XML data URL set on chart. The function is usable after the FusionCharts#event:loaded event of a chart has been fired. As such, it is recommended to use the alternate function FusionCharts#setXMLUrl, which does not have this limitation of being available only after the
loaded
event has been fired.- Deprecated:
- 3.2.0 - It is recommended that the alternate functions FusionCharts#setXMLUrl or FusionCharts#setChartDataUrl be used instead of this.
- See:
-
setChartDataUrl(url, format)
-
Update the data of a chart by fetching contents from a URL. The URL can point to either a JSON or a XML file. The data format of the URL needs to be specified in the
format
parameter.This function fetches content from the URL provided and passes the result to FusionCharts#setChartData to update chart data. So, if the chart is already rendered, it is updated with the new data as soon as it is fetched from the URL. If the chart is not rendered, data from the URL is fetched and stored locally till the chart is rendered.
If the data format of the URL is already known, an alternative to this function is to use either FusionCharts#setJSONUrl or FusionCharts#setXMLUrl to specify JSON or XML data URL respectively.
It is not recommended to use this function to set data to a new chart. Instead, it is preferred to pass the URL as
dataSource
in the FusionCharts constructor.FusionCharts uses
AJAX
to transport data. So, ensure that the chart is running from a web-server in order to prevent browser's security restrictions of fetching local (file://
) files.Parameters:
Parameter Description url
The URL from where to fetch the data of the chart.
format
- FusionCharts~dataFormats
-
<optional>
The format of data that is expected to contain in the
url
provided. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.Fires:
- FusionCharts#event:dataLoadRequested
- FusionCharts#event:dataLoadRequestCompleted
- FusionCharts#event:dataLoadRequestCancelled
Example
// Render a chart and fetch data from a JSON file and then when a button is pressed, change the data. FusionCharts.ready(function () { var chart = new FusionCharts({ type: "column2d", renderAt: "chart-container", dataSource: "weekly-sales.json", dataFormat: "jsonurl" }).render(); // Assign the functionality of updating data to a button which already // exists in page body and has a specific Id. document.getElementById("data-update-button").onclick = function () { // Specify the new Url to fetch data from. chart.setChartDataUrl("average-employee-sales.json", "json"); }; });
-
setChartData(data, format)
-
Update the data of a chart in the format specified in by the
format
parameter. The data passed as theformat
parameter should be in one of the FusionCharts~dataFormats. When this function is called on a chart which has already rendered, the chart is instantly updated with the new data.This function can also be used to set data of a chart before it has rendered. In that case, the data being set is stored internally and passed on to the chart when it is rendered. However, this is not the preferred way to set chart data. Instead, initial chart data should be passed in the FusionCharts constructor.
If the data format is already known, an alternative to this function is to use either FusionCharts#setXMLData or FusionCharts#setJSONData to set XML or JSON data respectively.
Parameters:
Parameter Description data
The data to be passed on to the chart in one of the available data formats as specified by the
format
parameter.format
- FusionCharts~dataFormats
-
<optional>
The format of the data being passed on to the chart. If this parameter is not provided or is not a valid member of FusionCharts~dataFormats then the current default or previously set data format is assumed.
Fires:
- FusionCharts#event:beforeDataUpdate
- FusionCharts#event:dataUpdated
- FusionCharts#event:dataUpdateCancelled
Example
// Create a chart in a page and pass data to it in `JSON` format and on click of a // button update it with newer data. FusionCharts.ready(function () { var chart = new FusionCharts({ type: "pie2d", renderAt: "chart-container", dataSource: { chart: { caption: "Market Share", showPercentage: "1" }, data: [ { label: "Current Prototype", value: "30" }, { label: "Revised Prototype", value: "35" }, { label: "Previous Prototype", value: "25" }, { label: "Recalled Prototype", value: "10" } ] }, dataFormat: "json" }).render(); // Set data on the chart using the setChartData function when a button is clicked. document.getElementById("update-data").onclick = function () { chart.setChartData({ chart: { caption: "Market Share Impact", numberPrefix: "USD" }, data: [ { label: "Current Prototype", value: "13773" }, { label: "Revised Prototype", value: "16069" }, { label: "Previous Prototype", value: "11477" }, { label: "Recalled Prototype", value: "4591" } ] }, "json"); }; });
-
getChartData(format) → {object|string}
-
Fetch data that has been set on a chart in one of the formats specified in FusionCharts~dataFormats.
This function needs to be called on an existing chart. If this function is called on a chart which has no data set, it returns an empty object for
json
, an empty<chart />
element forxml
and an empty string forcsv
.Parameters:
Parameter Description format
The format in which the data is to be retrieved from the chart.
Returns:
Type:
Example
// Render a chart and upon click of a button alert the chart's data in // CSV format. FusionCharts.ready(function () { var chart = new FusionCharts({ type: "column2d", renderAt: "chart-container", dataSource: "weekly-sales.json", dataFormat: "jsonurl" }).render(); // Assign the functionality of retrieving and alerting CSV data to // click event of a button document.getElementById("alert-csv-data").onclick = function () { alert(chart.getChartData("csv")); }; });
-
dataReady(available) → {boolean|undefined}
-
This function is used to determine whether a chart will render properly with the data set on it. This includes data that are set using functions like FusionCharts#setChartData or FusionCharts#setChartDataUrl.
If the function is not able to determine whether the data is ready or not, it returns
undefined
. It will returntrue
orfalse
only after a chart has completed rendering, that is, the after therenderComplete
event has fired.The function will return
false
if no data is set on the chart, or the data is faulty. Also, it will returnfalse
if the data provided is incompatible with the current chart type, for example, if single-series data has been set for multi-series charts.Parameters:
Parameter Description available
- boolean
-
<optional>
- false
Setting the
available
parameter totrue
returns the status of the data irrespective of its compatibility with chart-type. In that case, this function will returnfalse
if data provided to the chart causes FusionCharts#event:dataLoadError or FusionCharts#event:dataInvalid to be firedReturns:
The returned boolean denotes whether data is ready or not. In case the status of data-readiness is unknown, this function returns
undefined
.Type:
boolean or undefined
-
<static> transcodeData(data, source, target, advanced) → {string|object}
-
FusionCharts supports a number of formats in which data can be provided. The default list is mentioned at FusionCharts~dataFormats. This function allows data to be transcoded from one supported format to another.
The primary use of this function is to convert data in one format to another without initializing a new instance of FusionCharts. It is very useful when you already have a set of data stored or prepared in a particular FusionCharts data format and you would like to convert it to another format. The fact that we do not need to instantiate a new instance of
FusionCharts
makes the conversion process very fast.Parameters:
Parameter Description data
The data that needs to be transcoded from one format to another.
source
The data format of the
data
provided.target
The desired data format in which the
data
needs to be converted.advanced
- boolean
-
<optional>
- false
Request the transcoding to return data in a verbose format where it returns the conversion result along with additional transocing information. In advanced mode, the returned data of this function is in the following format:
Property Type Description data
object string The result of the transcoding process error
Error undefined In case the transcoding process failed, the error is passed here Returns:
- The transcoded data is returned in the data type as associated with the target
data format. The return-type depends upon the FusionCharts~dataFormats specified as the
target
parameter.
Type:
Example
// We would convert JSON data that is already in FusionCharts data format into CSV data format. FusionCharts.ready(function () { var salesData = { chart: { caption: "Harry's SuperMart", subCaption: "Top 5 stores in last month by revenue", }, data:[{ label: "Bakersfield Central", value: "880000" }, { label: "Garden Groove harbour", value: "730000" }, { label: "Los Angeles Topanga", value: "590000" }, { label: "Compton-Rancho Dom", value: "520000" }, { label: "Daly City Serramonte", value: "330000" }] }; // Alert the data after converting it to CSV data format. alert(FusionCharts.transcodeData(salesData, 'json', 'csv')); });
-
getCSVData() → {string}
-
Fetch data that has been set on a chart in CSV format. This function is shorthand of using
chart.getChartData('csv')
.The data returned is the closest possible comma-separated value representation that has been provided to the chart. The exported data does not contain any functional or cosmetic attribute that was set on the chart. However, the following chart attributes can be set to customise the CSV output.
Chart Attribute Type Description exportDataSeparator
string Sets the CSV delimiter string. Default is ,
(comma)exportDataQualifier
string Sets the CSV qualifier string. Default is {quot}
exportDataFormattedVal
boolean Sets whether the output will be a formatted string or pure number exportErrorColumns
boolean Forces error output on ErrorColumn, ErrorLine and ErrorScatter charts For
exportDataSeparator
andexportDataQualifier
, 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.
Returns:
Type:
-
getDataAsCSV() → {string}
-
Fetch the data set to the chart in comma separated values format. The delimiter can be changed by passing relevant chart attributes.
- Deprecated:
- 3.3.0 - In favour of FusionCharts#getCSVData
Returns:
Type:
-
getJSONData() → {object}
-
Fetch data that has been set on a chart in JSON format. This function is shorthand of using
chart.getChartData('json')
.This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty
{ }
object.Returns:
Type:
-
setJSONData(data)
-
This function is used to update data of a chart using data in JSON format as defined in FusionCharts~dataFormats.
It is a shorthand of the function FusionCharts#setChartData where the data format is always JSON. So, calling
chart.setXMLData({'chart': ...})
is the same as callingchart.setChartData({'chart': ...}, 'json')
.Similar to FusionCharts#setChartData, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data. But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.
Parameters:
Parameter Description data
This parameter accepts the
JSON
data to be passed on to the chart string or as JavaScript object. -
setJSONUrl(url)
-
This function is used to update data of a chart using data from a URL in JSON format.
It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always JSON (
jsonurl
). So, callingchart.setJSONUrl('data.json')
is the same as callingchart.setChartDataUrl('data.json', 'jsonurl')
.Similar to FusionCharts#setChartDataUrl, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data as soon as it is fetched from the URL. If the chart has not yet rendered But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.
Parameters:
Parameter Description url
Path to JSON data file.
-
getXMLData() → {string}
-
Fetch data that has been set on a chart in XML format. This function is shorthand of using
chart.getChartData('xml')
.This function needs to be called on an existing chart. If this function is called on a chart which has no data set on it, it returns an empty
<chart />
element as string.Returns:
Type:
-
setXMLData(data)
-
This function is used to update data of a chart using data in XML format as defined in FusionCharts~dataFormats.
It is a shorthand of the function FusionCharts#setChartData where the data format is always XML. So, calling
chart.setXMLData('<chart>...</chart')
is the same as callingchart.setChartData('<chart>...</chart>', 'xml')
.Similar to FusionCharts#setChartData, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data. But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.
Parameters:
Parameter Description data
This parameter accepts valid
XML
as a string to be passed on to the chart as data source. -
setXMLUrl(url)
-
This function is used to update data of a chart using data from a URL in XML format.
It is a shorthand of the function FusionCharts#setChartDataUrl where the data format of the URL is always XML (
xmlurl
). So, callingchart.setXMLUrl('data.xml')
is the same as callingchart.setChartDataUrl('data.xml', 'xmlurl')
.Similar to FusionCharts#setChartDataUrl, if this function is called on a chart that has already rendered, the chart is immediately updated with the new data as soon as it is fetched from the URL. If the chart has not yet rendered But it can also be used to set data to a chart that has not yet rendered. However, using this function to set data of a chart is not recommended. The initial data of a chart is preferred to be set in the FusionCharts constructor.
Parameters:
Parameter Description url
Path to XML data file.
-
<static> addEventListener(type, listener)
-
Bind callbacks to events fired throughout FusionCharts. This method can be used to listen to events across all FusionCharts instances on a page.
An event listener is used to execute custom functions when an event is fired. FusionCharts fires events at all stages of creating, updating, rendering or removing a chart. This function lets you tap into any of these events and provide your own functions which will be called when those events are triggered.
An alternative to this function is to use FusionCharts#addEventListener method on a chart instance to bind to an event fired by a specific chart.
Parameters:
Parameter Description type
The event name to listen to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
listener
Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.
Example
// Show a message when a number of charts have been rendered on a page. FusionCharts.ready(function { var counter = 0, threshold = 3; FusionCharts.addEventListener("rendered", function (eventObject) { counter++; if (counter > threshold) { alert("More than " + threshold + "charts rendered!"); } }); });
-
<static> removeEventListener(type, listener)
-
Removes an event that was originally added using FusionCharts.addEventListener.
Parameters:
Parameter Description type
The event name whose listener needs to be removed/detached.
listener
The listener function that needs to be removed.
-
addEventListener(type, listener)
-
Listen to events fired by an individual chart. For more information on the available events, refer to the events section.
Parameters:
Parameter Description type
The event name that needs to be listened to. The event name is not case sensitive. In case you want to register an event to multiple events in the same registration call, provide them as an array of event names.
listener
Pass the function that is to be executed when the event is fired. Upon an event, the listeners for that event are executed sequentially with arguments that are specific to that event. See FusionCharts~eventListener for more details on the arguments.
-
removeEventListener(type, listener)
-
Removes an event that was originally added using FusionCharts#addEventListener.
Parameters:
Parameter Description type
The event name whose listener needs to be removed/detached.
listener
The listener function that needs to be removed.
-
print(options)
-
You can use this function to print individual charts. This function hides all elements on the page except the chart in concern and then invokes the page printing function (
window.print()
).This function works only for charts that have rendered completely, i.e. after FusionCharts#event:renderComplete event has fired.
Parameters:
Parameter Description options
- object
-
<optional>
Printing options
Properties
Parameter Description hideButtons
- boolean
-
<optional>
- true
Hides all buttons on the chart.
Fires:
Example
// In this snippet of code, we will render a chart on a page and // call the print method on the chart on click of a button. FusionCharts.ready(function () { FusionCharts.render({ type: 'column2d', dataFormat: 'jsonurl', dataSource: 'data.json', // assuming an HTML div element exists on the page renderAt: 'chart-container-div' events: { renderComplete: function (event) { // assuming a button exists on page with a specific id var button = document.getElementById('print-button'); button.onclick = function () { event.sender.print(); }; } } }); });
-
exportChart(options) → {boolean}
-
Exports a chart to image or PDF document using this function. The function can be configured to export a chart and present it as a file download. Exporting of a chart is not enabled by default. The chart's data must have the
exportEnabled
chart attribute explicitly set to1
.When exporting of a chart is enabled, it is exported using a set of default options. These options can be overridden by configuring the chart data. That would allow you to configure the behavior of the export related context-menu drawn on the chart. However, in the event that exporting is done programmatically, the export parameters can be customized using this function.
The exporting process can only be initiated after the FusionCharts#event:renderComplete event has been fired. The function itself remains undefined until the FusionCharts#event:loaded event is raised by the chart.
Parameters:
Parameter Description options
- object
-
<optional>
-
Properties
Parameter Description exportFormat
- string
-
<optional>
- png
A chart can be exported in one of the following formats:
Export Format Description png
Exports the charts in high quality lossless PNG format jpg
Exports the chart as high quality JPEG image format pdf
Exports the chart as a PDF document exportFileName
- string
-
<optional>
- FusionCharts
Using this attribute you can specify the name (excluding the extension) of the file to be exported. The extension is automatically appended depending on the
exportFormat
specified.exportTargetWindow
- string
-
<optional>
- _self
When using
download
asexportAction
, this lets you configure whether the return image or PDF will open in same window (as an attachment for download), or whether it will open in a new browser window (_blank
).exportHandler
- string
-
<optional>
URL of the export server.
exportAction
- string
-
<optional>
- download
Specifies whether the exported image will be sent back to the browser as download, or whether it will be saved on to the server.
Action Value Description download
Causes the exported chart image or PDF to be downloaded as file. save
Causes the exported chart to be saved on server. For the charts to be saved on server, you would need to setup your own export handling server.
exportCallback
- function
-
<optional>
- FC_Exported
This attribute specifies the name of the callback JavaScript function which will be called when the export event is complete. The function
window.FC_Exported
is the default method that will be called when no value specified.- Tutorials:
-
- Tutorial: interactivity-export-to-image-or-pdf-configuring-for-export
- Tutorial: interactivity-export-to-image-or-pdf-set-your-export-server
- See:
Returns:
The function returns
true
if export process of the chart was successfully triggered, otherwise it returnsfalse
.Type:
-
getSVGString() → {string}
-
Fetch the SVG of a chart as a string. This function returns the SVG that has been created by FusionCharts when rendering the chart.
Note that this function is only available for a chart that has already been rendered.
Returns:
- SVG string
Type:
-
<static> getObjectReference(id) → {DOMElement}
-
The function returns the
DOMElement
that is created inside chart container by FusionCharts. The returned element is the same as accessing the FusionCharts#ref property. Note that this is the<span>
element created by FusionCharts to render the chart. It is not the container element that was specified during rendering the chart as therenderAt
parameter.Parameters:
Parameter Description id
The ID of the chart, whose
DOMElement
is to be referenced.- Since:
- 3.1.1
- Deprecated:
- 3.2.0 - This method has been deprecated as direct access to `DOMElement` of the chart has become redundant. FusionCharts#ref property can be used in the rare case where such access to the `DOMElement` of a chart is required.
Returns:
Type:
Example
// Iterate on all charts rendered on a page and move them to a common location var sidebar = document.getElementById('sidebar-html-div'), // assuming that your common container is this chart; for (chart in FusionCharts.items) { sidebar.appendChild(FusionCharts.getObjectReference(chart).parentNode); } // The above can be done without using this deprecated getObjectReference method. for (chart in FusionCharts.items) { chart = FusionCharts.items[chart]; chart.ref && sidebar.appendChild(chart.ref.parentNode); }
-
<static> formatNumber(num, type, config) → {string}
-
FusionCharts formats input number based on configurations passed in chart attributes. It may be needed to similarly format other non-chart elements on page using same algorithm. This function is available to be used globally on FusionCharts object or on a specific instance of FusionCharts Suite XT.
When called on the FusionCharts object (
FusionCharts.formatNumber()
,) the default number configuration settings are utilised. These can be overridden by passing additional number format configuration settings as the second parameter. Refer to chart attributes for various number format configurations.When called on an instance of a chart, gauge or map, the number formatting as set by the data of the chart is used. As such, the second parameter (
type
) acceptsxAxisValues
,yAxisValues
ordataLabels
to allow formatting to be done specific to them.Parameters:
Parameter Description num
The number that needs to be formatted.
type
- string
-
<optional>
- datalabels
A chart can be configured to format numbers differently depending upon where it is being used. The formatting of data values can be different than that of x-axis labels. As such, passing
yaxisvalues
,xaxisvalues
ordatalabels
as a value of this parameter returns the formatted number accordingly. __Note that this parameter is not available whenformatNumber
is executed onFusionCharts
object instead of chart instances.config
- object
-
<optional>
One can optionally pass additional number formatting attributes as the
config
parameter to override the default number formatting options of a chart. While callingformatNumber
onFusionCharts
object, this becomes the second parameter.Returns:
Type:
Examples
console.log(FusionCharts.formatNumber(1234.5)); // logs "1.2K" console.log(FusionCharts.formatNumber(1234.5, { numberPrefix: "$" })); // logs "$1.2K"
// Calling number formatter on a chart instance when `renderComplete` event is fired. FusionCharts.ready(function () { // Render a chart within a chart container `div` element. var chart = new FusionCharts({ type: 'column2d', renderAt: 'chart-container-div', dataFormat: 'json', dataSource: { chart: { caption: "Quarterly sales summary", numberPrefix: "$", decimals: "2", forceDecimals: "1" } data: [ { label: "Q1", value: "213345"}, { label: "Q2", value: "192672"}, { label: "Q3", value: "201238"}, { label: "Q4", value: "209881"}, ] }, events: { renderComplete: function (eventObj) { // Call the formatNumber function of the specific chart we rendered. console.log(eventObj.sender.formatNumber(1234.5)); // logs "$1.23K" } } }); chart.render(); });
-
configureLink(param, level)
-
Configure the properties of LinkedCharts. This function accepts all properties that FusionCharts constructor function accepts. Any property passed to this function is applied to the LinkedCharts. If no properties are provided, LinkedCharts will inherit properties from the parent chart.
LinkedCharts are essentially n-level drill-down of charts, where data points on one chart can create and render a new chart. Each level can be configured by passing the level as the second parameter of this function. Note that the first chart that triggers the drill-down (root chart) has level
0
.Alternatively, LinkedCharts configuration for multiple levels of drill-down can be configured at once by passing them as an array to this function. In that case, the array is the only parameter passed to the function.
The Overlay Button:
Other than the usual construction parameters of FusionCharts, the
param
parameter of this function also accepts configuration for the "overlay button" of LinkedCharts. When a LinkedChart is rendered on clicking a data point, a button is rendered on the top-right corner of the chart. When this button is clicked, it closes (disposes) the linked chart.The cosmetics of this button can be configured by passing an
overlayButton
object toparam
. This object can have the following properties.Button Parameter Type Description show
boolean Whether to show the button or not message
string The label of the button. The default is "Close" or "Back" bgColor
string Background color of the button in hex format borderColor
string Border color of the button in hex format font
string Font family of the button (comma separated list of fonts) fontColor
string The color of the button label text fontSize
string The size of the button label text bold
boolean Specify whether the button label text appears bold padding
number The padding between the label and the edges of the button Parameters:
Parameter Description param
level
- number
-
<optional>
- 0
Since linked charts are multi-level drill-down, you can configure the parameters of a particular drill-down level by specifying it in this parameter.
- Tutorials:
-
- Tutorial: interactivity-drill-down-linkedcharts
- See:
Examples
myChart.configureLink({ type: 'pie2d', // Set the linked-charts configuration to load all linked charts as Pie width: '80%', // The width of the charts would be 80% of their parent container overlayButton: { message: ' X ', // Set the button to show letter "X" bgColor:'#999999', borderColor: '#cccccc' } });
// Configure linked charts to show the first level drill-down as bar chart, the next as line charts and // the third level as pie charts. myChart.configureLink([ { type: 'bar2d' }, { type: 'line' }, { type: 'pie2d' } ]);
-
getSWFHTML() → {string}
-
Gets the HTML of SWF
- Deprecated:
- 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.
Returns:
Type:
-
addVariable()
-
Adds variable to Flash chart. Equivalent to FusionCharts#configure for JavaScript charts
- Deprecated:
- 3.4.0 - Use the alternate function FusionCharts#configure
- See:
-
<static> setCurrentRenderer(name)
-
Sets the default renderer for all the charts that are subsequently instantiated. The renderer changes depending upon the variant of charts being rendered (example:
flash
,javascript
)Parameters:
Parameter Description name
The name of the renderer (variant of chart rendering method) that is used.
- Deprecated:
- 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.
-
<static> getCurrentRenderer() → {string}
-
Gets the current renderer that will be used during instantiation of new charts.
- Deprecated:
- 3.4.0 - This has been deprecated since JavaScript variant is the only renderer supported.
Returns:
The name of the current renderer being used -
flash
orjavascript
.Type:
-
<static> ready(readyCallback, args, context)
-
This function allows to register callback functions to be executed when FusionCharts library is ready to be used. In general, the framework is ready after
DOMContentLoaded
browser event has been fired and all the initial dependent files/modules are available. One can attach multiple callbacks by calling this function any number of time.The callback function is executed even when attached after FusionCharts is already ready! Thus, it is recommended that all entry-point and initialization codes are written within this block. This also helps in neatly organizing all codes within a script file or the page
<head>
and as such contextually separating code from HTML blocks.Parameters:
Parameter Description readyCallback
Pass a function that would be executed as callback when FusionCharts framework is ready.
args
- *
-
<optional>
- FusionCharts
Argument to be passed on to the callback function.
context
- function
-
<optional>
- FusionCharts
In the situation where the function passed via
fn
parameter needs to be executed in a different scope than the default FusionCharts scope, pass the appropriate class object here.Example
// Render a chart within a chart container `div` element. FusionCharts.ready(function (FusionCharts) { var chart = new FusionCharts({ type: "column2d", renderAt: "chart-container-div", dataSource: "my-chart-data.json", dataFormat: "jsonurl" }); // Since we are in the `ready` block, the `chart-container-div` // element should be available by now. chart.render(); });
-
showChartMessage(text, modal, cancelable)
-
Shows a text message on a chart.
Parameters:
Parameter Description text
The text message that needs to be displayed.
modal
- boolean
-
<optional>
- false
Boolean value whether to show the message on an overlay or on the chart. Defaults to
false
.cancelable
- boolean
-
<optional>
- false
Boolean value applicable only if modal is
true
. If set to true the modal can be closable on click. Defaults tofalse
. -
getDataJSON()
-