fusioncharts - Fusion Charts, from flash to pure javascript

Have implemented Fusion chart in flash format. Is it possible to convert it to pure javascript form? If yes, can you please elaborate how to do it i.e. at which places changes are to be made.

Share Improve this question asked Oct 22, 2013 at 9:53 xtras 1164 silver badges15 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

If you are using the latest version of FusionCharts (3.3.0 and above), Just replacing ../Column3D.swf with Column3D would do the trick! Ensure you have FusionCharts.HC.js and FusionCharts.HC.Charts.js in same folder as FusionCharts.js. Your code will look like...

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript">
       var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
       myChart.setXMLUrl("Data.xml");
       myChart.render("chartContainer"); 
    </script>      
  </body> 
</html>

However, I also suggest a more readable code such as...

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
    <script type="text/javascript">
       FusionCharts.addEventListener("ready", function () {
           var myChart = new FusionCharts({
               type: "column3d",
               id: "myChartId",
               width: "400",
               height: "300",
               renderAt: "chartContainer",
               dataSource: "Data.xml",
               dataFormat: "xmlurl"
           }).render();
       });
    </script>      
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
  </body> 
</html>

Please confirm if you are already using FusionCharts XT and now if you wish to render JavaScript charts only, irrespective of whether Flash Player is installed or not, you would simply need to add the following single line of code to your existing implementation.

FusionCharts.setCurrentRenderer('javascript');

This code will ask FusionCharts renderer to skip Flash rendering and create pure JavaScript charts.

The final HTML code will look like the following:

<html>
  <head>        
    <title>My First chart using FusionCharts XT - Using pure JavaScript</title>         
    <script type="text/javascript" src="../FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript">
       FusionCharts.setCurrentRenderer('javascript');
       var myChart = new FusionCharts( "../Column3D.swf", "myChartId", "400", "300", "0", "1");
       myChart.setXMLUrl("Data.xml");
       myChart.render("chartContainer"); 
    </script>      
  </body> 
</html>

Also, for rendering JavaScript charts, FusionCharts XT makes use of "FusionCharts.HC.js", "FusionCharts.HC.Charts.js" and "jquery.min.js". These files are present in "Charts" folder of the Download Pack.

You do not need to load these files explicitly in HTML but place it in the same folder as "FusionCharts.js". "FusionCharts.js" automatically takes care of the loading.

Details on pure JavaScript chart rendering is elaborately mentioned in this link.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

fusioncharts - Fusion Charts, from flash to pure javascript - Stack Overflow

2 Answers 2