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 : DOM id 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 HTMLNode 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 dataSource.
   • It is xmlurl when data source is a URL to XML data
   • It is xml when the data source is an XML String
   • It is jsonurl when data source is a URL to JSON data
   • It is json when the data source is a JOSN String or JSON object
8. otherParameters : It contains other chart parameters. Click here to see detailed list of chart parameters

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 : "Charts/Pyramid.swf", id : "myChartId", renderAt : "chartContainer", dataSource : "Data.xml" })

or

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

or

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

or

var myChart = FusionCharts.render("Pyramid", "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 : DOM id 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". "1" sets debug window on. (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 Web site. (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 a URL to XML data
    • It is xml when the data source is an XML String
    • It is jsonurl when data source is a URL to JSON data
    • It is json when the data source is a JOSN 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 based charts. When set to javascript FusionCharts JavaScript Class renders pure JavaScript based 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 will get fired.

Example:

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

or

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

or

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

or

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

or

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

or

var myChart = new FusionCharts("Pyramid", "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.

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 HTMLNode 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"));

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

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

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>");

myChart.setJSONUrl("myJSONStream.json");

Note of caution:

When specifying JOSN 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".

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 the second parameter.

dataFormat : Defines the format of the dataSource.

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

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>");

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();

Note: 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 the 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 the drawcomplete event is fired.

In case you wish to remove an attribute from the data you can pass null as the value of the attribute. e.g., setChartAttribute( "palette" , null ) will remove the palette attribute from the data.

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

The 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 overlayButton). The second parameter accepts a number which denotes the level being configured. The first drill-down 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 drill-down level is denoted by the index of the array where the first level is 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/Pyramid.swf',
    width: '30%',
           
    overlayButton:
    {    
      message: ' x ',
      bgColor:'999999',
      borderColor: 'cccccc'
    }
  },
0);
 

myChart.configureLink(
     [ {swfUrl: 'Charts/Pyramid.swf'},
       {swfUrl: 'Charts/Funnel.swf'},
       {swfUrl: 'Charts/SparkLine.swf'}, 
       {swfUrl: 'Charts/SparkColumn.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 : 'Cylinder.swf' } );

Additionally, the function will raise the BeforeDispose event prior to removing a chart and the disposed event 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(console.log);

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 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 based charts offer.

While using a single parameter you need to pass true to enable the 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.