Creating charts using various methods

FusionCharts JavaScript classes now provide various methods of rendering charts. You render charts using either of the following methods:

  1. Normal rendering method : using three or more lines of code with a highly polymorphic constructor
  2. Compact rendering method : using one-liner highly polymorphic static function

Let us discuss how each of the methods works.

Code examples discussed in this section are present in Download Package > Code > JavaScript > Basics folder.

Using normal rendering method

In normal rendering method, you need to perform at least three steps to render a chart :

  • Instantiate a FusionCharts JavaScript object using the constructor » var myChartJSObj = new FusionCharts( chartSWF, chartDOMId, width, height, ...);  of FusionCharts class.
  • Provide chart data (XML or JSON as string or URL) » myChartJSObj.setXMLUrl( 'myxml.aspx' ); You can use one from the 8 data providing functions, for example, setChartData, setChartDataUrl, setXMLData, setXMLUrl, setJSONData, setJSONUrl, setDataXML or setDataURL
  • Render the chart in an HTML container » myChartJSObj.render("myDivId");
  • Additionally you can set more optional settings like set renderer type, set a chart transparent » myChartJSObj.setTransparent(true);etc.

Following sample code illustrates the implementation of this method: Note » We have already learnt this method in the weekly sales sample in Creating your first chart page. This method is fully backward compatible.

 
<html>
  <head>
    <title>My First chart using FusionCharts XT</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
    <script type="text/javascript"><!--

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

    // -->
    </script>
  </body>
</html>

In the above code we have:

  • Included FusionCharts.js class file. This file will automatically load the other class files (FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js ) if the charts are to be rendered as JavaScript on devices like iPad or iPod.
  • Instantiated a JavaScript object from FusionCharts class passing required parameters » (chartSWF, DOMId, width, height, debugMode, registerWithJS ). Details on all required parameters is provided in API >> Methods page
  • Provided chart data using setXMLUrl() function through a URL
  • Rendered the chart in chartContainer DIV element

The code will render a chart like the one shown below:



See it live!

What happens if Flash player is not available?

In case Flash Player is not available on certain devices (like iPad or iPhone), FusionCharts JavaScript library automatically renders the same chart using JavaScript. If you are running the sample from local file system, please note that you will need to provide the data using Data String method, that is, passing the data (XML/JSON) to the chart as String or JSON Object. Many browsers restrict JavaScript from accessing local file system owing to security reasons. In the above example, since you had provided data as a URL, the JavaScript charts will not be able to access the same, when running locally. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.

Advanced usages

Object as Constructor parameter

You can pass all the parameters as a single JavaScript Object to the constructor. The Object will have all the parameters needed to be passed to the constructor as its properties (key-value pairs). An example will illustrate this:

var myChart = new FusionCharts( { 
  swfUrl: 'FusionCharts/Column3D.swf',
  width: '400', 
  height: '300',
  debugMode : false
});

See it live!

In the above snippet, all the parameters of the FusionCharts constructor have been passed as properties of an Object. Please note that these property names are case-sensitive. To know about all the parameters that you can pass as property using this Object please click here.

Mixed parameters

You can also use a mix of standard parameters and Object based parameters. You can pass first few parameters in order and then provide the rest of the parameters as Object. Some examples are as follows: 

var myChart = new FusionCharts( "FusionCharts/Column3D.swf" , "myChartId" ,
  { 
    registerWithJS : true,
    width: '400', 
    debugMode : false,
    height: '300'
  }
);

See it live!

In the above samples the first two parameters are passed individually in proper order. An object containing other parameters as key-value pairs is passed at the end. The two sets of parameters combine to yield the same result. You can pass any number of ordered parameters first and then provide the rest of the parameters as object.

Another example can be: 

var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
  "myChartId", "400", "300", {debugMode : false , registerWithJS : true }
);

In the above samples the first four parameters are passed individually in proper order. An object containing the rest of the parameters is passed at the end.

 
Using compact rendering method

FusionCharts XT can be rendered using a compact one line code.This reduces two lines of code for each chart and makes the implementation easy and seamless. This is achieved using the static render function of FusionCharts class. A typical example is as follows: 

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

See it live!

In this mode you need to make sure that you have:

  1. Provided the HTMLContainer ( here, chartContainer ) where the chart will be rendered.
  2. Provided the SWF and chart data.

The last parameter which declares the type of the data (xmlurl) is optional. If skipped, the function will take xmlurl as the default data format.

Advanced usages

Object as Constructor parameter

You can pass all the parameters as a single JavaScript Object to the function. The Object will have all the parameters needed to be passed to the function as its properties (key-value pairs). An example will illustrate this:

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

Mixed parameters

Like FusionCharts constructor, you can mix the type of parameters in this function too. You can opt to pass first few parameters and then pass the rest of the parameters as an object to the last parameter of the function. The object will contain the rest of the parameters as key-value pairs. For example: 

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

See it live!

For details on FusionCharts constructor, render() function and the property-names for the object-based parameter, please read API > Methods.

Complete Reference to all the properties, functions and events of FusionCharts classes is provided in API Reference section.