Creating charts using various methods

FusionCharts JavaScript classes now provides 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's 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 3 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 viz. 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</title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>
  <body>
    <div id="chartContainer">FusionCharts 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 ( highcharts.js and jquery.min.js ) if the charts are to be rendered as JavaScript on devices like iPad/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!

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 would illustrate this:

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

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'
  }
);

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

Since v3.2 FusionCharts 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" );

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

  1. Provided the HTMLContainer ( here, chartContainer ) where the chart would 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 would 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" });
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.