FusionCharts Knowledge Base :: How do I render charts using JavaScript (without Flash) & in iPhone/iPod/iPad?

FusionCharts Knowledge Base

Search the Knowledge Base

Browse by Category

FusionCharts Knowledge Base > FusionCharts v3 > How-to Guides

How do I render charts using JavaScript (without Flash) & in iPhone/iPod/iPad?

FusionCharts using JavaScript :

FusionCharts XT allows you to create JavaScript based charts (sometimes also referred to as HTML5/Canvas charts on the web). This feature allows you to create charts in web browsers where Flash Player is not supported e.g. in iPhone/iPad. FusionCharts internally makes use of Highcharts library to generate JavaScript based charts.

This feature works seamlessly with the current implementation mode of FusionCharts i.e., you do not need to write any additional code to implement this. FusionCharts.js JavaScript class automatically detects devices where Flash is not supported and renders JavaScript based charts instead. You can also ignore Flash and only use JavaScript for charting.

How it Works?

FusionCharts XT features a completely new FusionCharts JavaScript class. FusionCharts JavaScript class now consists of four main files: FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js. These four files are present in Download Pack > Charts folder.

You would only need to include FusionCharts.js in your web page (however, do not forget to copy the rest of files to your web application). The rest of the JavaScript files will be automatically loaded on-demand by FusionCharts.js.
Once FusionCharts class determines that Flash player is not available in the device, it automatically switches the rendering mode to JavaScript. If you wish to render the chart as JavaScript by default, you can do this by setting the rendering method to JavaScript from your code.

Let's look at code where both Flash and JavaScript rendering is enabled, with JavaScript rendering only coming into effect where Flash Player is not available:

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

Explicitly render JavaScript only charts :

If you wish to render JavaScript charts only, you just have to add a line of code as shown below:

FusionCharts.setCurrentRenderer('javascript')

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

This setting gets applied to all the charts rendered after this line. Hence, if you declare this at the beginning, all the charts in the page will rendered using JavaScript. You would not need to declare the same for each chart in the page.

The modified code will look like the following:

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

See it live in your iPhone/iPad/iPod.

No related articles were found.