getChartFromId is deprecated.

var chartReference = getChartFromId("myChartId");

It is not recommended to use this function unless absolutely needed.

var chartHTMLReference = FusionCharts.getObjectReference("myChartId");

All the charts that get rendered, after this function call, will abide by this setting.

FusionCharts.setCurrentRenderer('javascript'); 

It can take an Object as parameter containing all chart parameters. See, first example on right.

It can take linear string parameters (second example on right) as listed below:

1. swfUrl: Path to the chart SWF file or
   type: JavaScript Chart Alias (to render JavaScript chart) as listed here
   
2. id : DOMId to be set to the chart
3. width : Width of the chart
4. height : Height of the chart
5. renderAt : Container HTML element's (normally a DIV) ID or HTML Node object where the chart will be rendered
6. dataSource : XML or JSON chart data. It can be a URL for XML or JSON, it can be XML or JSON in string or it can be a JSON object
7. dataFormat : Defines the format of the data source.
   • It is xmlurl when data source is an URL to XML data
   • It is xml when the data source is an XML String
   • It is jsonurl when data source is an URL to JSON data
   • It is json when the data source is a JSON String or JSON Object
8. More Parameters: Click here to see the complete list of all chart parameters

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL(using xmlurl and jsonurl as dataFormat). If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide xml or json(using the Data String method), it works fine.

Additionally, it can take a mixture of linear parameters and an Object parameter at the end. The linear parameters should be in order. You can pass any one or more (up to no. 7 in the list above) linear parameters before you can pass the Object parameter. See the third example on right.

NOTE: You must pass the values for swfUrl, dataSource and dataFormat to render a chart. The chart will fail to render if any one of these parameters are missing.

You may also pass an instance of FusionCharts object to it in order to render each FusionCharts object.

This function fires up the chart rendering processes. Hence, a number of events are fired after this function call. The events are listed in sequence below:

• Initialize
• DataLoadRequested
• DataLoadRequestCompleted
• DataUpdated
• Loaded ( or FC_Loaded )
• DataLoaded ( or FC_DataLoaded )
• Rendered ( or FC_Rendered )
• DrawComplete

On various issues when chart does not get rendered these error events are fired:

• DataLoadRequestCancelled
• DataLoadCancelled
• NoDataToDisplay (FC_NoDataToDisplay)
• DataLoadError (FC_DataLoadError)
• DataXMLInvalid (FC_DataXMLInvalid)

var myChart = FusionCharts.render({ swfUrl : "FusionCharts/Column3D.swf", id : "myChartId", renderAt : "chartContainer", dataSource : "Data.xml" })

or

var myChart = FusionCharts.render({ type : "Column3D", id : "myChartId", renderAt : "chartContainer", dataSource : "Data.xml" })

or

var myChart = FusionCharts.render("FusionCharts/Column3D.swf", "myChartId", "400", "300", "chartContainer", "Data.xml", "xmlurl");

or

var myChart = FusionCharts.render("Column3D", "myChartId", "400", "300", "chartContainer", {dataFormat : "xmlurl", dataSource : "Data.xml" });

This function, when called as static method using FusionCharts.addEventListener(), registers the global events of all the charts present in a page.

In the listener argument you can pass a named-function or the name of a function (see example at the top on right column) which will listen to the event or you can directly define an anonymous function as the argument (see example at bottom on the right column).

You may attach a function to multiple events by passing the event names in an array.

Example:

FusionCharts.addEventListener("Rendered", doSomething);

or

FusionCharts.addEventListener("Rendered", function(e,p) { alert(e.sender.id ); });

or

FusionCharts.addEventListener(['Initialized', 'Disposed'], function () {
    // do something!
});

The name of the event type is passed as the first parameter.

The second parameter is the name of the function which was added as the event listener for that event by addEventListener.

You may also remove a function from multiple events by passing the event names in an array.

Example:

FusionCharts.removeEventListener("Rendered", doSomething);

It can take an Object as parameter containing all chart parameters. See, first example on right.

1. swfUrl : Path to the chart SWF file or
   type: JavaScript Chart Alias (to render JavaScript chart) as listed here
   
2. id : DOMId to be set to the chart (optional)
3. width : Width of the chart  (optional - default is 400)
4. height : Height of the chart (optional - default is 300)
5. debugMode : Sets the chart debug window on. Can take "0" or "1". When set to "1", a chart shows debug window over itself. (optional - default value is "0")
6. registerWithJS : Allow chart to communicate with JavaScript. This should be set to "1". This parameter is deprecated and is kept for backward compatibility issues. (optional)
7. bgColor : A String containing hex coded color value. This sets the color of the flash player's background on which a chart gets drawn. 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)
8. scaleMode : Flash player's mode of scaling a chart. "NoScale" should be the value. There are other options like showAll, ExactFit, noBorder. But these are not supported and might result into distorted charts.
     (optional)
9. lang :Sets the language. It presently supports English only. The value is "EN". (optional)
10. detectFlashVersion :Set to "1" to make FusionCharts Class check whether Flash Player 8 is present in the Browser. (optional - Default value is "0' )
11. autoInstallRedirect :Set to "1" with detectFlashVersion set to "1" and FusionCharts redirects to Flash Player installation page of Adobe's website. (optional - default is "0")

Apart from these parameters you can add additional parameters to the object based parameter. Those additional parameters are :

12. renderAt : Container HTML element's (normally a DIV) ID or HTMLNode object where the chart will be rendered
13. dataSource : XML or JSON chart data. It can be a URL for XML or JSON, it can be XML or JSON in string or it can be a JSON object
14. dataFormat : Defines the format of the dataSource.
    • It is xmlurl when data source is an URL to XML data
    • It is xml when the data source is an XML String
    • It is jsonurl when data source is an URL to JSON data
    • It is json when the data source is a JSON String or JSON Object
15. renderer : Sets the chart renderer engine. Its value can be 'flash' or 'javascript'. The default value is flash which generated Flash charts. When set to javascript FusionCharts JavaScript class renders pure JavaScript charts.

Additionally, it can take a mixture of linear parameters and an Object parameter at the end. The linear parameters should be in order. You can pass any one or more (up to no. 11 in the list above) linear parameters before you can pass the Object parameter. See the third example on right.

After instantiating the Object, Initialized event gets fired.

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL(using xmlurl and jsonurl as dataFormat). If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide xml or json(using the Data String method), it works fine.

Example:

var myChart = new FusionCharts({ swfUrl : "FusionCharts/Column3D.swf", id : "myChartId", renderAt : "chartContainer", dataSource : "Data.xml" });

or

var myChart = new FusionCharts({ type : "Column3D", id : "myChartId", renderAt : "chartContainer", dataSource : "Data.xml" });

or

var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300");

or

var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");

or

var myChart = new FusionCharts("FusionCharts/Column3D.swf", "myChartId", "400", "300", "chartContainer", {dataFormat : "xmlurl", dataSource : "Data.xml"});

The name of the configuration and the value of the configuration are passed as parameters. See first example on the right.

You can also pass a collection of configurations as Object to the function. The parameter object will contain name and value pairs of the configuration name and the corresponding values. See second example on the right.

addVariable is deprecated. Please use configure() instead.

myChart.addVariable("ChartNoDataText", "Please select a record above");

This function is called after the chart gets instantiated as JavaScript object new FusionCharts. It takes a string containing the ID of an HTML container Element like DIV or SPAN.

You can also pass the HTML Node Object of a container element to this function.

This function fires the chart rendering process. Hence, a number of events are fired after this function call. The events are listed in sequence below:

• Initialize
• DataLoadRequested
• DataLoadRequestCompleted
• DataUpdated
• Loaded ( or FC_Loaded )
• DataLoaded ( or FC_DataLoaded )
• Rendered ( or FC_Rendered )
• DrawComplete

On various issues when chart does not get rendered, these error events are fired:

• DataLoadRequestCancelled
• DataLoadCancelled
• NoDataToDisplay (FC_NoDataToDisplay)
• DataLoadError (FC_DataLoadError)
• DataXMLInvalid (FC_DataXMLInvalid)

myChart.render("chartContainer");

or

myChart.render(document.getElementById ("chartContainer"));

Sets or changes the XML data of the chart to a specified URL. The URL has to be relative to the web page where the chart is deployed. By default, cross-domain URL-s are not allowed. Again, absolute URL-s are not allowed.

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided using setXMLUrl function. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you use setXMLData function , it works fine.

myChart.setXMLUrl("mychartdata.xml");

Note of caution:

When specifying XML as String, please make sure that there are no conflicts in quotes between the JS function call and the quotation mark used to enclose attributes in XML string.

myChart.setXMLData("<chart><set value='100' /></chart>");

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided using setJSONUrl function. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you use setJSONData function , it works fine.

myChart.setJSONUrl("myJSONStream.json");

Note of caution:

When specifying JSON as String, please make sure that there are no conflicts in quotes between the JS function call and the quotation mark used to enclose JSON properties and values.

myChart.setJSONData( {
    "chart":{
        "caption":"My Chart Caption"   
     },   
     "data":[
        {  "value":"100" },
        {  "value":"200" }
       ] 
    }
 );


or

myChart.setJSONData('{"chart":{ "caption":"My Chart Caption" }, "data":[ {"value":"100" }, { "value":"200" } ] });

This function takes two parameters. The first is URL of the data. The second is the dataFormat in string, which can be "xml" or "json".

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided using setChartDataUrl function. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you pass the data as string, it works fine.

myChart.setChartDataUrl("mydynamicdata.aspx", "json");
 
or 
 
myChart.setChartDataUrl("mydynamicdata.aspx", "xml");

This function takes two parameters. The first is dataSource of the data. The second is the dataFormat. The data source can be a URL to XML source, URL to JSON source, XML as string, JSON as string and JSON as object. Hence, to identify the format correctly dataFormat is passed as second parameter.

dataFormat : Defines the format of the dataSource.

• It is xmlurl when data source is an URL to XML data
• It is xml when the data source is an XML String
• It is jsonurl when data source is an URL to JSON data
• It is json when the data source is a JSON String or JSON object

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL(using xmlurl and jsonurl as dataFormat). If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide xml or json(using the Data String method), it works fine.

myChart.setChartData( "myxmldata.jsp" , "xmlurl");
 
or
 
myChart.setChartData( "<chart><set value='2310'/></chart>" , "xml");
 
or
 
myChart.setChartData( "myjsondata.php" , "jsonurl");
 
or
 
myChart.setChartData( "{ chart : {}, data :[{ value : 100 }] }" , "json");


or

myChart.setChartData( { chart : {}, data :[{ value : 100 }] } , "json");

setDataURL is deprecated.

myChart.setDataURL( "myxmlsource.xml" );

setDataXML is deprecated.

myChart.setDataXML( "<chart><set value='213' /></chart>");

The function accepts a Boolean parameter. Only when true is passed, the chart is prepared to have transparent background.

myChart.setDataXML( "<chartbgAlpha='0,0'><set value='213' /></chart>");
myChart.setTransparent(true);

var myXML = FusionCharts("myChartId").getChartData( "xml");


var myJSONObj = FusionCharts("myChartId").getChartData( "json" );

var myXML = FusionCharts("myChartId").getXMLData();

var myJSONObj = FusionCharts("myChartId").getJSONData();

var strCSV = FusionCharts("myChartId").getDataAsCSV();

getXML is deprecated.

var myXML = FusionCharts("myChartId").getXML();

Value of the attribute; or "null" if the attribute was empty or not found in XML/JSON.

var caption = FusionCharts("myChartId").getChartAttribute( "caption");

The name suggests 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).

You can also pass a collection of attribute name and value pairs to the function by passing them as an Object. See second example on the right.

Once chart attributes get changed, drawcomplete event is fired.

Additionally, you can also configure the overlay-button using overlayButton property. These settings also go as another object.

configureLink function can accept parameters in either of two formats :

• As two separate parameters, the first parameter is an Object containing all configurations (chart and overlay-Button). The second parameter accepts a number which denotes the level being configured. The first drilldown level is 0 (zero). See example at the top on the right.
• As a single dimensional indexed array each element of which is an object containing all chart and overlay-button related configurations. Each drilldown level is denoted by the index of the array where the first level is 0 (zero). So, the Object in a particular array index actually applies those settings to the level number which is equal to array index number. See example at the bottom on the right.

Overlay Button settings:

The following are the properties that we can pass as settings for overlay-buttons:

• show : (true/false) whether to show the overlay-button
• message: String contain the text for close button
• bgColor: Hex coded background color of the overlay-button
• borderColor: Hex coded border color of the overlay-button
• font : Name of the font
• fontColor : Hex coded color of the overlay-button's text
• fontSize :  Size of the font of overlay-button text
• bold : (true/false) Whether the overlay-button's text will be bold
• padding :padding around the overlay-button in pixels
  
  

myChart.configureLink(
  {
    swfUrl: 'Charts/Bar2D.swf',
    width: '30%',
           
    overlayButton:
    {    
      message: ' x ',
      bgColor:'999999',
      borderColor: 'cccccc'
    }
  },
0);
 

myChart.configureLink(
     [ {swfUrl: 'Charts/Bar2D.swf'},
       {swfUrl: 'Charts/Pie2D.swf'},
       {swfUrl: 'Charts/Line2D.swf'}, 
       {swfUrl: 'Charts/Area2D.swf'}
     ] 
    );

In cases, while saving a chart to a server location, a callback function is invoked to convey status of export.

myChart.exportChart( { exportFormat : 'jpg'} )

FusionCharts("myChartId").print()

The function can optionally take an object as parameter. The object can contain chart settings which will override the existing settings of the source chart before it gets cloned.

The function returns an instance of FusionCharts JavaScript object.

var newChart = myChart.clone();


or
 

var newChart = myChart.clone( { swfUrl : 'Area2D.swf' } );

Additionally, the function will raise BeforeDispose event prior to removing a chart and disposed after the chart has been removed.

FusionCharts("myChartId").dispose();

Please note that the alias value is dependent on the chart SWF file-name. The alias is built removing .swf extension and all extra path information from the src value of the chart loaded.

var strCharType = FusionCharts("myChartId").chartType();

var strCharType = FusionCharts("myChartId").isActive();

hasRendered() is deprecated

var strCharType = FusionCharts("myChartId").hasRendered();

var strCharType = FusionCharts("myChartId").signature();

enabled and message.

This function needs to be called before you call FusionCharts.printManager.enabled()

The enabled property sets the Print Manager on or off by setting the value to true or false, respectively.

The message property takes a string which gets displayed in place of the printable charts until the charts are prepared for printing. The default value is : 'Chart is being prepared for print.'

FusionCharts.printManager.configure( { enabled: true, message : 'wait please...'} );

FusionCharts.printManager.enabled(true);

FusionCharts.printManager.managedPrint();

var goPrint = FusionCharts.printManager.isReady();

This function needs to be called before you call FusionCharts.debugMode.enabled()

FusionCharts.debugMode.outputTo( function() { console.log(arguments); } );

This function needs to be called before you call FusionCharts.debugMode.enabled()

When the outputFormat is set to event, the output function assigned to the debugger (using debugMode.outputTo method) is sent arguments exactly matching FusionCharts Advanced events model.

FusionCharts.debugMode.outputFormat('verbose');

Note that FusionCharts JavaScript debugMode works independent of the debugMode (debug window) that individual Flash charts offer.

While using a single parameter you need to pass true to enable debugMode.

You can use a compact format which sets output function as well as output format and enables debugMode by passing two parameters. Here, the first parameter will be the outputFunction and the second parameter will be the outputFormat.