FusionCharts Cross-browser jQuery Charts API

The FusionCharts jQuery plugin helps you add interactive JavaScript charts to your web, mobile and enterprise applications.
It combines the delight and comprehensiveness of FusionCharts Suite XT with the easy-to-use jQuery syntax.

Creating a simple chart using jQuery

Creating a chart involves 4 simple steps:

· Download jQuery and FusionCharts Suite XT. Copy the downloaded JavaScript files to the relevant folder in your web application

· Include jQuery.min.js, FusionCharts.js and FusionCharts.jQueryPlugin.js in your web page

· Create a <div> or a container to hold the chart

· Use insertFusionCharts(), appendFusionCharts() or prependFusionCharts() method to create the chart instance, and provide attributes like width, height, data format and data object.

Shown below is a simple Column 3D chart created using jQuery.

$("‎#chartContainer1").insertFusionCharts({
type: "Column3D",
width: "600",
height: "300",
dataFormat: "json",
dataSource: {
"chart":{
"caption":"Monthly Sales Summary",
"subcaption":"For the first half of 2013",
"xAxisName":"Month",
"yAxisName":"Sales",
"numberPrefix":"$",
"bgcolor":"ffffff"
},
"data":[
{ "label":"January", "value":"14400" },
{ "label":"February", "value":"19600" },
{ "label":"March", "value":"24000" },
{ "label":"April", "value":"15700" },
{ "label":"May", "value":"23700" },
{ "label":"June", "value":"22800" }
],
"trendlines":[ {
"line":[{
"startValue":"17100",
"displayValue":"Last year's {br} average",
"valueOnRight":"1",
"color":"999999"
}]
}]
}
});

To change the chart type from Column 3D to Pie 3D, the following code is used. You can change multiple properties of the chart at the same time, by clubbing all the attributes together in updateFusionCharts() method.

$("‎#btnPie3d").click(function(){
$("#chartContainer1").updateFusionCharts({"swfUrl":"Pie3D"});
});


Thanks.