FusionWidgets XT uses the FusionCharts jQuery plugin that takes care of all the products of the FusionCharts XT Suite including FusionWidgets XT.
FusionCharts jQuery plugin provides a number of jQuery methods. The list below shows details of each function :
| Chart Rendering functions |
| insertFusionCharts( chartConfigurations : Object) |
Renders charts inside HTML elements. The HTML elements needs to be selected using the 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/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 (e.g., "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 (e.g., "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 a URL to XML data
- Set it to xml when the data source is an XML String
- Set it to jsonurl when data source is a 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" i.e., 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 Web site. (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: "Charts/AngularGauge.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/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: "Charts/AngularGauge.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/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: "Charts/AngularGauge.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.
Parameters:
An array of cloned chart objects ( (in this Array) 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/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 the <chart> element in chart XML data or through the 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 re-draws the entire chart. |
var oldCaption = $("#chartContainer" ).attrFusionCharts( "caption")
or
$("#chartContainer" ).attrFusionCharts( "caption", "New title" )
or
$("#chartContainer" ).attrFusionCharts( {"palette": "5", "paletteColors": "D977B7"})
|
| streamFusionChartsData(stream:string) |
Using this method you can dynamically provide a stream containing the latest data to the real-time charts.
The format of the stream string should be of the same format as when passed to the feedData method of the chart. |
$("#chartContainer").streamFusionChartsData('&value=66|44'); |
| streamFusionChartsData(command: string)
or
streamFusionChartsData(command: string[, options:object])
or
streamFusionChartsData(command: string, value:string, label:string) |
This method is used when the chart method which is invoked does not need any data to be passed. The command is a string which provides the name of the method which is to be invoked.
In case, you want to pass parameters to the chart method that is to be invoked, use an options object and provide all the information to the function.
Parameters can also be passed to the chart method directly without using options object.
| feed : Allows you to pass the stream as string to the FusionCharts object. |
| stop : Stops the real time streaming. Sets the DOM id of the chart. The value is provided as string. (optional) |
| start : Start/restart the real time streaming. |
| clear : Clear the chart data. |
| getdata : To fetch the data from the chart. |
| setdata : Sets data to the chart. |
| value : Sets the new value of a real-time chart. |
| label : Sets the data label for the new value of the real time chart. |
| stream : The stream string which contains the values and labels. |
|
$("#chartContainer" ).streamFusionChartsData('clear')
or
$("#chartContainer" ).streamFusionChartsData( 'setData', {value:'40', label: 'New label' )
or
$("#chartContainer" ).streamFusionChartsData('setdata', '40' 'New Label')
|
| 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 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 event names or event types can be derived from FusionWidgets 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 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, e.g., 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." );
}
) |