| Using various chart rendering methods in FusionCharts jQuery plugin | ||||||||||||||||||||||||||||
|
FusionCharts jQuery plugin provides you various methods using which you can render charts in HTML containers. There are three methods to choose from as listed below:
To aid your understanding of this section, we will recommend you to go through the Overview page of FusionCharts jQuery plugin In this page we will learn in details, how to use these methods. Code examples and data files discussed in this section are present in Download Package > Code > jQuery folder |
||||||||||||||||||||||||||||
| Using insertFusionCharts method | ||||||||||||||||||||||||||||
|
In the previous page we have learned how to use insertFusionCharts() method to render chart. insertFusionCharts method is the basic method which renders charts inside HTML elements. The HTML elements need to be selected using jQuery selector. In case, multiple HTML elements are selected using the jQuery selector, a chart will be rendered inside each selected HTML element. All existing elements inside the selected elements will be replaced by the rendered charts. An example can be 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>
Click here to view a demo of the above implementation. As stated in the above code, the insertFusionCharts method takes a set of key(chart setting) or value pairs containing configuration properties of the rendered chart. The detailed list of acceptable chart-configurations are provided in the Overview page and also stated below:
The insertFusionCharts method returns a jQuery array containing the selected HTML elements where the charts render. Click here to read API Reference guide of insertFusionCharts() method. |
||||||||||||||||||||||||||||
| 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! |
||||||||||||||||||||||||||||
| Inserting chart at the end of HTML elements | ||||||||||||||||||||||||||||
|
Using appendFusionCharts method, you can render and insert charts at the end of selected HTML elements, thus preserving all existing elements inside the selected elements. An example code sample is shown below: $("#chartContainer").appendFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "March.xml",
dataFormat: "xmlurl",
width: "400",
height: "300",
id: "myChartMarID"
});
See it live! The parameters accepted by appendFusionCharts method is same as that of the insertFusionCharts method. The detailed list of acceptable chart-configurations are provided in the Chart configurations table above. The appendFusionCharts method returns a jQuery array containing the selected HTML elements where the charts render. Click here to read API Reference guide of appendFusionCharts() method |
||||||||||||||||||||||||||||
| Inserting chart at the beginning of HTML elements | ||||||||||||||||||||||||||||
|
You can also render and insert charts at the beginning of selected HTML elements. This also preserves all the the elements already present in the selected elements.You will need to use prependFusionCharts method to achieve this. An example code snippet is shown below: $("#chartContainer").prependFusionCharts({
swfUrl: "FusionCharts/Column3D.swf",
dataSource: "January.xml",
dataFormat: "xmlurl",
width: "400",
height: "300",
id: "myChartJanID"
});
See it live! The parameters accepted by prependFusionCharts method is same as that of the insertFusionCharts method. The detailed list of acceptable chart-configurations are provided in the Chart configurations table above. The prependFusionCharts method returns a jQuery array containing the selected HTML elements where the charts render. Click here to read API Reference guide of prependFusionCharts() method |
||||||||||||||||||||||||||||
| Cloning a chart | ||||||||||||||||||||||||||||
|
You can clone existing charts and pass the list of cloned charts to a function for further processing. To clone charts, you will need to use cloneFusionCharts method. This method looks for all the charts in jQuery selected elements and clones them. The example below clones all the charts present in a div with ID - "leftPanel" and renders them as JavaScript charts in a div with ID - "rightPanel" : $("#leftPanel").cloneFusionCharts( function() { $("#rightPanel").insertFusionCharts(this[0]); }, { renderer: "javascript" } );
See it live! In the above code cloneFusionCharts finds all the charts in HTML elements with id - "leftPanel". It clones the charts present in that HTML element and passes the array containing the cloned charts to the anonymous callback function defined as the first parameter. This function generates these cloned charts inside HTML elements having "rightPanel" as id. The second parameter also adds a new configuration (setting renderer to 'javascript' ) to the cloned charts. Hence, the cloned charts will be rendered using JavaScript rendering engine. Additional Notes: Parameters: The first parameter contains the reference to a callback function. An array of cloned charts (in this Array) is passed to a callback function for further processing. In the second parameter, you can optionally add various configurations to the cloned charts or over-write some configurations of the cloned charts. The configurations are passed as a set of key/value pairs (JavaScript object). The configurations which can be passed are given in the list below:
Click here to read API Reference guide of cloneFusionCharts() method |
||||||||||||||||||||||||||||
| FusionCharts jQuery plugin also supports creating charts within elements that have not yet been added to the HTML document object. Such charts will not be visible until the newly created elements are added to the document object. |