You are viewing documentation for an older version. For current documentation - click here.
Using FusionCharts jQuery plugin to render chart

FusionCharts XT comes with a new jQuery plugin that lets you use the jQuery framework and format to render FusionCharts XT anywhere within a Web page.

FusionCharts XT uses FusionCharts jQuery plugin that takes care of all the products of FusionCharts Suite XT including FusionCharts XT.

Using FusionCharts jQuery plugin, you can render FusionCharts XT anywhere within a Web page, change chart type, update and retrieve chart data, update functional and cosmetic settings and use all existing features of FusionCharts XT.

To aid your understanding of this section, we will recommend you to go through the following sections of documentation (if you have not already read them):

In this page, we will see how to use the FusionCharts jQuery plugin.

Code examples and data files discussed in this section are present in Download Package > Code > jQuery folder.
Setting up FusionCharts jQuery plugin

Setting up of FusionCharts jQuery plugin is as simple as putting an additional reference to the plugin file (FusionCharts.jqueryplugin.js) as shown below:

<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.jqueryplugin.js"></script>

Note: The required JavaScript files are available in Download Package > Charts folder.

This completes the setup.

Please note that you will need to follow all the primary steps required for FusionCharts XT to perform, namely:
  • Copy all the required chart SWF files (from the Download Pack > Charts folder) to your preferred folder
  • Copy FusionCharts.js and jquery.min.js from the Download Pack > Charts folder to the preferred folder
  • To create JavaScript charts also copy FusionCharts.HC.js and FusionCharts.HC.Charts.js from the Download Pack > Charts folder to the preferred folder

You do not need to include FusionCharts.HC.js and FusionCharts.HC.Charts.js in your code. FusionCharts.js will automatically load these files based on requirement.

Now, let's create our first chart using FusionCharts jQuery plugin.

We will start with the same Weekly Sales data which we have created in Creating your first chart page as shown below: 

<chart caption='Weekly Sales Summary'
   xAxisName='Week' yAxisName='Sales' numberPrefix='$'> 
    <set label='Week 1' value='14400' /> 
    <set label='Week 2' value='19600' /> 
    <set label='Week 3' value='24000' /> 
    <set label='Week 4' value='15700' /> 
</chart>
Week Sales
Week 1 $14,400
Week 2 $19,600
Week 3 $24,000
Week 4 $15,700

We had already saved this data as Data.xml.

The code to use this data and generate a Column 3D chart using FusionCharts XT jQuery plugin is as follows:

<html>
  <head> 	
    <title>My First chart using FusionCharts XT</title> 	
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
    <script type="text/javascript" src="FusionCharts/jquery.min.js"></script>
    <script type="text/javascript" src="FusionCharts/FusionCharts.jqueryplugin.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!-- 	
       
      $(document).ready(function(){
          $("#chartContainer").insertFusionCharts({
               swfUrl: "FusionCharts/Column3D.swf", 
               dataSource: "Data.xml", 
               dataFormat: "xmlurl", 
               width: "400", 
               height: "300", 
               id: "myChartId"
         }); 

       });
      
    // -->     
    </script> 	   
  </body> 
</html>

The resultant chart will be rendered as shown in the image below:

First Chart - Weekly Sales

See it live!

How it works?

We save the above code as FirstChart.html. In the above code we have :

  • Selected the element (DIV) with id chartContainer
  • Called insertFusionCharts method (available from the plugin)
  • Passed all required chart configurations like swfUrl, width, height, dataSource, dataFormat, id etc. to the method as JavaScript object

The insertFusionCharts method renders a chart in the selected element. It takes a set of key/value pairs representing chart configurations as parameter. The set is passed as an Object. The properties of the parameter-object are as follows:

Chart configuration or properties Description and acceptable value
swfUrl Path (as string) to the chart SWF file. You can get the list of chart SWF file names from Chart List page.
id Sets the DOM id of the chart. The value is provided as string. (optional)
width Width of the chart  (optional - default is 400). The value is provided as number if the width is in pixels or as string and if width is to be set in percentage (e.g., "50%")
height Height of the chart (optional - default is 300). The value is provided as number if the height is in pixels or as string and if height is to be set in percentage (e.g., "50%")
dataSource XML or JSON chart data. It can be a URL for XML or JSON. It can also be a string containing XML or JSON object
dataFormat Defines the format of the dataSource.
  • Set it to xmlurl when data source is an URL to XML data
  • Set it to xml when the data source is an XML String
  • Set it to jsonurl when data source is an URL to JSON data
  • Set it to json when the data source is a JSON String or JSON object
renderer Sets the chart renderer engine. Acceptable values are 'flash' and 'javascript'. The default value is flash which generates Flash charts. When set to javascript FusionCharts JavaScript class renders pure JavaScript charts. (optional)
bgColor This sets the color of the flash player's background on which a chart gets drawn. It is passed as a string containing hex coded color value. 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", that is, white)
scaleMode Flash player's mode of scaling a chart. NoScale is the default value. There are other settings namely, showAll, ExactFit, noBorder. But these are not supported and might result into distorted charts.  (optional)
lang Sets the language for chart messages. It presently supports only English. The value is "EN". (optional)
detectFlashVersion Set to "1" to make FusionCharts Class check whether Flash Player 8 is present in the Browser. (optional - Default value is "0' )
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')
debugMode Sets the chart debug window on. Can take "0" or "1". When set to "1", the chart shows a debug window over itself. (optional - default value is "0")

What happens if Flash player is not available?

In case Flash Player is not available on certain devices (like iPad and 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. Due to security implementation of many browsers which blocks AJAX in local file systems, and since the JavaScript charts use AJAX, the Data URL method (loading data from external XML/JSON file) will not work.

Rendering the chart as JavaScript

You can also render the JavaScript chart using the same method. All you will need to do is to explicitly set the renderer property to javascript. In case you are running the sample from local file system, you will also need to set the chart data as string. The code snippet below contains the modified sample: 

$("#chartContainer").insertFusionCharts({
               swfUrl: "FusionCharts/Column3D.swf", 
               renderer : 'JavaScript',
               width: "400", 
               height: "300", 
               id: "myChartId",

               dataFormat: "xml", 
               dataSource: "<chart caption='Weekly Sales Summary' xAxisName='Week' " +
                 "yAxisName='Sales' numberPrefix='$'>" +
                 "<set label='Week 1' value='14400' />" +
                 "<set label='Week 2' value='19600' />" +
                 "<set label='Week 3' value='24000' />" +
                 "<set label='Week 4' value='15700' />" +
                 "</chart>"
         });

The resultant chart will look like the image shown below:

See it live!

Starting FusionCharts XT, you can specify the chart alias through type property instead of swfUrl. You can get the list of chart alias names from the Chart List page. A code snippet using type attribute is as follows:

$("#chartContainer").insertFusionCharts({
               type: "Column3D",
               width: "400", 
               height: "300", 
               id: "myChartId",

               dataFormat: "xml", 
               dataSource: "<chart caption='Weekly Sales Summary' xAxisName='Week' " +
                 "yAxisName='Sales' numberPrefix='$'>" +
                 "<set label='Week 1' value='14400' />" +
                 "<set label='Week 2' value='19600' />" +
                 "<set label='Week 3' value='24000' />" +
                 "<set label='Week 4' value='15700' />" +
                 "</chart>"
         });
Using JSON as data source

Apart from XML you can also provide data in JSON format. You can provide JSON as JavaScript Object, as JSON string or as an URL. To provide data as JSON you will need to pass the JSON data source to dataSource property and set json or jsonurl to dataFormat property.

The code snippet below shows how you can pass JSON Object as data source: 

$("#chartContainer").insertFusionCharts({
	swfUrl: "FusionCharts/Column3D.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "json", 
	dataSource: { 
		"chart": { 
			  "caption" : "Weekly Sales Summary" ,
			  "xAxisName" : "Week",
			  "yAxisName" : "Sales",
			  "numberPrefix" : "$"
		},
			
		"data" : 
		 [
			  { "label" : "Week 1", "value" : "14400" },
			  { "label" : "Week 2", "value" : "19600" },
			  { "label" : "Week 3", "value" : "24000" },
			  { "label" : "Week 4", "value" : "15700" }
		 ]
		}
});

See it live!

The code snippet below shows how you can pass JSON string as data source: 

$("#chartContainer").insertFusionCharts({
	swfUrl: "FusionCharts/Column3D.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "json", 
	dataSource: '{ "chart": { "caption" : "Weekly Sales Summary" , "xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "$" }, ' +
			' 	"data" : [  ' +
			'		   { "label" : "Week 1", "value" : "14400" }, ' +
			'		   { "label" : "Week 2", "value" : "19600" }, ' +
			'		   { "label" : "Week 3", "value" : "24000" }, ' +
			'		   { "label" : "Week 4", "value" : "15700" }  ' +
			'  ] }'
});

See it live!

The code snippet below shows how you can pass an URL containing JSON as data source: 

$("#chartContainer").insertFusionCharts({
	swfUrl: "FusionCharts/Column3D.swf", 
	width: "400", 
	height: "300", 
	id: "myChartId",
	
	dataFormat: "jsonurl", 
	dataSource: "data.json"
});

See it live!
Appending and Pre-pending a chart in an element

The insertFusionCharts method renders a chart inside a container element after removing any existing element present inside the container element. Using the appendFusionCharts method, you can also insert charts to the end the container element, thus preserving all existing element. An example is shown below:

$("#chartContainer").appendFusionCharts({
   swfUrl: "FusionCharts/Column3D.swf", 
   dataSource: "March.xml", 
   dataFormat: "xmlurl", 
   width: "400", 
   height: "300", 
   id: "myChartMarID"
});

See it live!

You can also insert charts to the beginning of the container element using the prependFusionCharts method as shown below:

$("#chartContainer").prependFusionCharts({
   swfUrl: "FusionCharts/Column3D.swf", 
   dataSource: "January.xml", 
   dataFormat: "xmlurl", 
   width: "400", 
   height: "300", 
   id: "myChartJanID"
});

See it live!

The parameter of appendFusionCharts and prependFusionCharts methods is same as the parameter of insertFusionCharts method

Changing type of an existing chart

You can also change chart type of an existing chart. The updateFusionCharts methods helps you to achieve this by modifying the swfUrl property as shown below: 

$("#chartContainer").updateFusionCharts({"swfUrl": "FusionCharts/Pie3D.swf"});

See it live!
Changing data of an existing chart

The updateFusionCharts methods helps you to change data of an existing chart as shown in the code below: 

$("#chartContainer").updateFusionCharts({"dataSource": XMLAsString, "dataFormat": "xml"});

See it live!
Changing width and height of an existing chart

The updateFusionCharts methods also helps in changing the dimension of an existing chart. The code snippet below show how this can be achieved: 

$("#chartContainer").updateFusionCharts({ width : 280, height : 200  });

See it live!
Other features and options

In this section we have showcased some of the basic methods of FusionCharts jQuery plugin and their uses. FusionCharts jQuery plugin additionally provides methods to:

We will discuss the complete API and the features of FusionCharts jQuery plugin in FusionCharts and jQuery section.
Watch live examples

Listed below are some of the examples using various methods of FusionCharts jQuery samples: