{"id":12754,"date":"2014-04-05T22:53:46","date_gmt":"2014-04-05T17:23:46","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=12754"},"modified":"2014-04-06T09:51:11","modified_gmt":"2014-04-06T04:21:11","slug":"fusioncharts-part-1","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/fusioncharts-part-1\/","title":{"rendered":"FusionCharts Part – 1"},"content":{"rendered":"

Stunning fusion charts will wow your audience . You can download javascript files for free trail of fusion chart from here<\/a> .
\nFollowing Javascript files are required to create fusion charts :
\n[js]
\n <script src="..\/js\/jquery.min.js"><\/script>
\n <script src="..\/js\/FusionCharts.js"><\/script>
\n <script src="..\/js\/FusionCharts.HC.js"><\/script>
\n <script src="..\/js\/FusionCharts.HC.Charts.js"><\/script>
\n <script src="..\/js\/FusionCharts.jqueryplugin.js"><\/script>
\n <script src="..\/js\/FusionChartsExportComponent.js"><\/script>
\n[\/js]
\nLet us take a small example to demonstrate how it works:
\n[js]
\n<%@ page contentType="text\/html;charset=UTF-8" %>
\n<html>
\n<head>
\n <title>Fusion chart<\/title>
\n <script src="..\/js\/jquery.min.js"><\/script>
\n <script src="..\/js\/FusionCharts.js"><\/script>
\n <script src="..\/js\/FusionCharts.HC.js"><\/script>
\n <script src="..\/js\/FusionCharts.HC.Charts.js"><\/script>
\n <script src="..\/js\/FusionCharts.jqueryplugin.js"><\/script>
\n <script src="..\/js\/FusionChartsExportComponent.js"><\/script>
\n<\/head>
\n<body>
\n <div id="chartDisplaydiv"><\/div>
\n <script>
\n $(document).ready(function(){
\n $("#chartDisplaydiv").insertFusionCharts({
\n swfUrl: "Pie3D",
\n dataSource: ‘..\/demo\/jsonData’,
\n renderer: ‘JavaScript’,
\n dataFormat: "jsonUrl",
\n width: "1000",
\n height: "600",
\n id: "revenueChart"
\n });<\/p>\n

});<\/p>\n

<\/script>
\n<\/body>
\n<\/html>
\n[\/js]<\/p>\n

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:
\n[js]
\nswfUrl : "Type of chart you want to generate"
\ndataSource : "from where you get data in the form of json or xml"
\ndataFormat : "In this example we are having a json response at ..\/demo\/jsonData so we have specified value jsonUrl"
\nwidth : "Width of the chart"
\nheight : "Height of the chart"
\nid : "id of the chart"
\n[\/js]<\/p>\n

Json response we are getting for this chart at ..\/demo\/jsonData :
\n[js]
\n{ "chart":{ "caption":"Company Revenue", "showpercentvalues":"1" }, "data":[{ "label":"Services", "Value":"26" }, { "label":"Hardware", "Value":"32" }, { "label":"Software", "Value":"42" } ] }
\n[\/js]<\/p>\n

Chart generated will look like this:<\/p>\n

\"Blog <\/p>\n","protected":false},"excerpt":{"rendered":"

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 : [js] <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> [\/js] Let us take a small example to demonstrate how […]<\/p>\n","protected":false},"author":102,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2,"footnotes":""},"categories":[7,1185],"tags":[1378,55,27],"class_list":["post-12754","post","type-post","status-publish","format-standard","hentry","category-grails","category-node-js-2","tag-fusion-charts","tag-javascript","tag-jquery"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t