Creating charts using various methods | ||
FusionCharts JavaScript classes now provide various methods of rendering charts. You render charts using either of the following methods:
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 :
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:
The code will render a chart like the one shown below: What happens if Flash player is not available? |
||
|
||
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:
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. |
||
|
||
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. |