Fusion Charts, from flash to pure javascript

Question 1

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>

Question 2

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.