FusionCharts jQuery plugin provides a number of jQuery methods. The list below shows details on each function :
| Chart Rendering functions |
| insertFusionCharts( chartConfigurations : Object) |
Renders charts inside HTML elements. The HTML elements need to be selected using jQuery selector. In case, multiple HTML elements are selected using the jQuery selector, a chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be replaced by the rendered charts.
Click here to see code snippets and demos.
The method returns the original jQuery selection to allow chaining of other jQuery methods.
An object (set of key or value pairs) passed as parameter contains chart configurations. The possible configurations are:
| swfUrl : Path (as string) to the chart SWF file. You can get the list of chart SWF file names from Chart List page. |
| id : Sets the DOM Id of the chart. The value is provided as string. (optional) |
| width : Width of the chart (optional - default is 400). The value is provided as number if the width is in pixels or as string if the width is to be set in percentage (for example, "50%") |
| height : Height of the chart (optional - default is 300). The value is provided as number if the height is set in pixels or as string if the height is to be set in percentage (for example, "50%") |
| dataSource : XML or JSON chart data. It can be a URL for XML or JSON. It can also be a string containing XML or JSON object |
dataFormat : Defines the format of the dataSource.
- Set it to xmlurl when data source is an URL to XML data
- Set it to xml when the data source is an XML String
- Set it to jsonurl when data source is an URL to JSON data
- Set it to json when the data source is a JSON String or JSON object
|
| renderer : Sets the chart renderer engine. Acceptable values are 'flash' and 'javascript'. The default value is automatically selected depending on the availability and support of Flash player. When set to javascript FusionCharts JavaScript class renders pure JavaScript charts. (optional) |
| bgColor : This sets the color of the flash player's background on which a chart gets drawn. It is passed as a string containing hex coded color value. This background color is not same as the background color of a chart. This background is visible while showing chart messages or when chart's bgAlpha is set to less than 100. (optional - default value is "#FFFFFF", that is , white) |
| scaleMode : Flash player's mode of scaling a chart. NoScale is the default value. There are other settings namely, showAll, ExactFit, noBorder. But these are not supported and might result in distorted charts. (optional) |
| lang : Sets the language for chart messages. It presently supports only English. The value is "EN". (optional) |
| detectFlashVersion : Set to "1" to make FusionCharts Class check whether Flash Player 8 is present in the Browser. (optional - Default value is "0" ) |
| autoInstallRedirect : Set to "1" with detectFlashVersion set to "1" and FusionCharts redirect to Flash Player installation page of Adobe's website. (optional - default is "0") |
| debugMode : Sets the chart debug window on. Can take "0" or "1". When set to "1", the chart shows a debug window over itself. (optional - default value is "0") |
|
$("#chartContainer").insertFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "Data.xml", dataFormat: "xmlurl",
width: "400", height: "300" })
|
| appendFusionCharts( chartConfigurations : Object) |
Renders and inserts charts at the end of HTML elements. The HTML elements need to be selected using jQuery selector. In case, multiple HTML elements are selected using the jQuery selector, a chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be preserved.
The method returns the original jQuery selection to allow chaining of other jQuery methods.
An object (set of key or value pairs) passed as parameter contains chart configurations. The possible configurations are listed in the Chart configurations table.
Click here to see code snippets and demos. |
$("#chartContainer").insertFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "Data.xml", dataFormat: "xmlurl",
width: "400", height: "300", id: "myChartId" })
|
| prependFusionCharts( chartConfigurations : Object) |
Renders and inserts charts at the beginning of HTML elements. The HTML elements need to be selected using jQuery selector. In case, multiple HTML elements are selected using the jQuery selector, a chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be preserved.
The method returns the original jQuery selection to allow chaining of other jQuery methods.
An object (set of key or value pairs) passed as parameter contains chart configurations. The possible configurations are listed in the Chart configurations table.
Click here to see code snippets and demos. |
$("#chartContainer").appendFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "Data.xml", dataFormat: "xmlurl",
width: "400", height: "300", id: "myChartId" })
|
| cloneFusionCharts( callback:function, [cloneConfigurations : Object] ) |
This method makes copy of existing charts and passes the list of cloned chart objects to a function for further processing. The method looks for all the charts in jQuery selected elements and clones them.
An array of cloned chart objects is passed to a callback function whose name or reference needs to be passed as a mandatory parameter to cloneFusionCharts method. One can also use an anonymous function as the callback function.
Before cloning of existing charts, one can optionally overwrite some of the configurations of the existing charts. To do this, one needs to pass an object (set of key or value pairs) containing chart configurations as cloneConfigurations parameter. The possible cloneConfigurations are listed in the Chart configurations table.
Click here to see code snippets and demos. |
$(“#chartContainer”).cloneFusionCharts(callbackFn, {width:300, height: 400})
or
$("#leftPanel").cloneFusionCharts( function() { $("#rightPanel").insertFusionCharts(this[0]); }, { renderer: "javascript" } ); |
| updateFusionCharts( updateConfigurations : Object) |
This method helps in updating chart configurations of an existing chart at run-time. Barring id, you can re-configure swfUrl, dataSource, dataFormat, width, height, renderer, bgColor, debugMode, scaleMode etc. of existing charts.
The possible updateConfigurations are listed in the Chart configurations table. Please note that id configuration cannot be passed to updateConfigurations parameter.
updateFusionCharts method is applied on HTML elements selected using jQuery selector. It finds all the charts rendered in the selected elements. It updates all these charts with the values passed through updateConfigurations parameter.
Click here to see code snippets and demos.
Please note that the charts thus updated are actually re-drawn with the new configurations. |
$("#chartContainer").updateFusionCharts( {"dataSource": NewMSXMLAsString, "dataFormat": "xml", "swfUrl" : "MSColumn3D.swf"}) |
| attrFusionCharts( chartAttribute : string)
or
attrFusionCharts( chartAttribute:string, newValue:string)
or
attrFusionCharts( chartAttributes : Object) |
Using this method one can dynamically read or update chart's root properties (also known as "chart attributes" which are passed through <chart> element in chart XML data or through chart property in chart's JSON data) on-the-fly. This feature will come handy when one wishes to change the chart titles, theme colors, number formatting or scaling setup, divisional line and grid configurations and other functional and cosmetic features of existing charts.
The method is applied on HTML elements which are selected using jQuery selector. It finds all the charts rendered in the selected elements and retrieves the value of a chart parameter from those charts or updates those charts with new parameter values.
This method returns the value of a chart attribute (of an existing chart) if the name of the chart attribute is passed to the method as a single string parameter - chartAttribute.
If a value is passed as a second parameter (newValue) to the method along with the name of the chart attribute through chartAttribute (as first parameter), the chart gets updated with the new parameter value.
The attrFusionCharts method also helps in passing a set of key(attribute-name)/value pairs (JavaScript Object) to apply multiple chart attributes to existing charts at run-time. The method here will accept a single Object parameter which will contain the new settings.
Click here to see code snippets and demos.
Please note that when the charts are updated with selective configurations and properties, internally, FusionCharts XT re-draws the entire chart. |
var oldCaption = $("#chartContainer" ).attrFusionCharts( "caption")
or
$("#chartContainer" ).attrFusionCharts( "caption", "New title" )
or
$("#chartContainer" ).attrFusionCharts( {"palette": "5", "paletteColors": "D977B7"}) |
| convertToFusionCharts( chartOptions:Object, [conversionConfigurations:Object] ) |
This method is an added feature of the jQuery plug-in and can convert a table containing numeric data, to a multi-series chart. In effect, the html table acts as the dataSource for the chart that is rendered.
The return value is a jQuery object containing all the newly created instances of FusionCharts.
The first parameter passed to this method is the chart configuration object. The possible configurations are listed in the Chart configurations table.
It should be noted that the jQuery selector here corresponds to the table element and, therefore it is important to provide a valid renderAt in the chart configuration. If renderAt is not provided then the chart will be drawn next to the table.
The dataFormat to be provided in the chart configuration is htmltable.
The optional second parameter passed to this method is the conversion options object.
| chartAttributes : An object that contains attribute name & attribute value pairs meant for the resulting chart, like caption, xAxisName etc. |
| major : A string whose value can be 'row' or 'column'. Most tables, when converted to charts, would yield multi-series charts (unless there is only one row/column) where each row or each column is a separate dataset. This property specifies whether datasets pertain to individual rows or columns. Default value is row. |
| useLabels : A boolean value which when it is true means that one of the rows or columns (depending on the value of major) contains the labels for the chart categories. Default value is true. |
| useLegend : A boolean value that is similar to useLabels. If true, it means that the table contains within it, a row or column that contains text which is to be used for naming each dataset. Default value is true. |
| labelSource : A number that maps to a particular row or column in the table. The value is a 1-based index of which row or column is to be parsed to fetch the labels. It can have a negative value also. e.g. 1 = first row, 2 = second row, -1 = last row, -2 = second last row etc. The default value is 0, which tells the converter module that if useLabels is true then the module has to go through the table and try and automatically figure out which row / column is to be used. If no such row is found then the labels property is to be used to provide the labels. Default is 0. |
| legendSource : A number that maps to a particular row or column in the table to mark it as the source of names of the datasets. The usage is similar to labelSource. |
| ignoreRows : An array of indices of all the rows that should be ignored while doing the table-to-chart conversion. |
| ignoreCols : An array of indices of all the columns that should be ignored while doing the table-to-chart conversion. |
| showLabels : A boolean value indicating whether the labels will be shown in the final chart output or not. |
| showLegend : A boolean value indicating whether the legend will be shown in the final chart output or not. |
| seriesColors : An array of hexadecimal color values (e.g. FF0000 or AABB55) that should be assigned to the datasets using one-to-one mapping. |
| convertBlankTo : A number that should be used to convert all blank data cells in the table to valid data. Default is 0. |
| hideTable : A boolean value indicating whether to hide the table, once the chart is ready, or keep it as is. Default is false. |
| labels : An array of strings that correspond to the labels to be used while rendering the chart. Among all the ways of specifying the labels for the chart, this array, since it is generated by the user, get highest preference. |
| legend : An array of strings that correspond to the dataset names to be used while rendering the chart. Similar to labels. |
|
$("#myTableElement").convertToFusionCharts({type: "mscolumn2d", width:300, height: 400, dataSource: "htmltable", renderAt: "chartdiv"});
or
$("#myTableElement").convertToFusionCharts({type: "mscolumn2d", width:300, height: 400, dataSource: "htmltable", renderAt: "chartdiv"}, {useLabels: 0});
|
| disposeFusionCharts() |
You can remove a chart instance from page and memory using disposeFusionCharts()function.
Additionally, the function will raise BeforeDispose event prior to removing a chart and disposed after the chart has been removed. |
$("#chartContainer").disposeFusionCharts(); |
| |
| Selector |
| :FusionCharts |
A custom jQuery selector :FusionCharts which helps in selecting all the charts rendered using FusionCharts jQuery plugin or using FusionCharts JavaScript Class. You can use this custom selector as a conventional jQuery selector.
Click here to see code snippets and demos. |
$("div :FusionCharts").attrFusionCharts( { caption: "New chart title" } )
or
$("div :FusionCharts").attrFusionCharts( { caption: "New chart title" } );
or
$("#topRow :FusionCharts").attrFusionCharts( "bgColor", "ecdecd")
or
$(".myFusionCharts :FusionCharts").attrFusionCharts( { showBorder:1 )
or
$("#bottomRow").find(":FusionCharts").attrFusionCharts( { borderColor : "008800" } )
or
$("span.myFusionCharts").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} )
or
$("div#dashboard #upper:visible").find(":FusionCharts").attrFusionCharts( {bgColor : "ecdecd", showBorder:1, borderColor:"880000"} ) |
| |
| Event handling |
| bind( eventType : String, eventHandler : function ) |
Adds an event handler function to all FusionCharts related events. The event handler needs to be attached to the the container HTML elements of the FusionCharts objects.
As the first parameter, the method takes the name of the event (through eventType parameter) .The list of FusionCharts event names or event types can be derived from FusionCharts XT and JavaScript > API > Events page. The event names used here are similar to those listed in the "Name (Advanced model)" column of the list of events in the Events page. One will just need to prefix the listed event names with "fusioncharts". This is done to avoid conflict with the pre-existing jQuery event types having same names, for example, the event name Loaded (as listed in the Events page) needs to be passed as "fusionchartsloaded".
The second parameter eventHandler accepts the name or reference to the event handling function. You can also directly create anonymous function instead. The parameters passed to the event handler function for each event are also same as stated in the Events page.
Click here to see code snippets and demos. |
$("#chartContainer").bind( "fusionchartsdrawcomplete",
function ( eventObject, argumentsObject) {
alert("Chart named " + eventObject.sender.id + " has completed chart drawing." );
}
) |