FusionCharts Part – 1
Stunning fusion charts will wow your audience . You can download javascript files for free trail of fusion chart from here .
Following Javascript files are required to create fusion charts :
<script src="../js/jquery.min.js"></script> <script src="../js/FusionCharts.js"></script> <script src="../js/FusionCharts.HC.js"></script> <script src="../js/FusionCharts.HC.Charts.js"></script> <script src="../js/FusionCharts.jqueryplugin.js"></script> <script src="../js/FusionChartsExportComponent.js"></script>
Let us take a small example to demonstrate how it works:
<%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <title>Fusion chart</title> <script src="../js/jquery.min.js"></script> <script src="../js/FusionCharts.js"></script> <script src="../js/FusionCharts.HC.js"></script> <script src="../js/FusionCharts.HC.Charts.js"></script> <script src="../js/FusionCharts.jqueryplugin.js"></script> <script src="../js/FusionChartsExportComponent.js"></script> </head> <body> <div id="chartDisplaydiv"></div> <script> $(document).ready(function(){ $("#chartDisplaydiv").insertFusionCharts({ swfUrl: "Pie3D", dataSource: '../demo/jsonData', renderer: 'JavaScript', dataFormat: "jsonUrl", width: "1000", height: "600", id: "revenueChart" }); }); </script> </body> </html>
In the code above on the jQuery document ready event fusion chart is inserted inside the div whose id is “chartDisplaydiv” . Inside insertFusionCharts method we need to specify the value for following parameters:
swfUrl : "Type of chart you want to generate" dataSource : "from where you get data in the form of json or xml" dataFormat : "In this example we are having a json response at ../demo/jsonData so we have specified value jsonUrl" width : "Width of the chart" height : "Height of the chart" id : "id of the chart"
Json response we are getting for this chart at ../demo/jsonData :
{ "chart":{ "caption":"Company Revenue", "showpercentvalues":"1" }, "data":[{ "label":"Services", "Value":"26" }, { "label":"Hardware", "Value":"32" }, { "label":"Software", "Value":"42" } ] }
Chart generated will look like this: