Creating JavaScript (HTML5) charts

Starting FusionCharts XT, you can create JavaScript charts (sometimes also referred to as HTML5 or Canvas charts). This feature allows you to create charts in Web browsers where Flash Player is not supported or is not installed or is disabled, for example, in iPhone and iPad. FusionCharts XT internally uses a modified version of Raphaël library to generate JavaScript charts. This feature works seamlessly with the current implementation mode of FusionCharts XT, which means you do not have to write any additional code to implement this. FusionCharts.js JavaScript class automatically detects devices like iPhone, iPad, and iPod, where Flash is not supported and renders JavaScript charts instead. You can also ignore Flash and only use JavaScript for charting.

First, let's look at the default code, which enables rendering of both Flash and JavaScript charts - with JavaScript rendering coming into effect, only when Flash Player is not available.

<html>
  <head> 	
    <title>My First chart using FusionCharts XT - Using JavaScript</title> 	
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
		    "myChartId", "400", "300", "0" );

      myChart.setXMLUrl("Data.xml");

      myChart.render("chartContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.
Click here to see the code using the Data String method » 
<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 XT will load here!</div>          
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
		    "myChartId", "400", "300", "0" );

      myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$'>" +
          "<set label='Week 1' value='14400' />" +
          "<set label='Week 2' value='19600' />" +
          "<set label='Week 3' value='24000' />" +
          "<set label='Week 4' value='15700' />" +
        "</chart>");

      myChart.render("chartContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

As you can see, the code has not changed a bit from our first sample - weekly-sales.html That is exactly our point! If you open this page in your iPad or iPhone or any browser where Flash Player is not supported, you will see that the charts have been rendered using JavaScript. FusionCharts JavaScript framework automatically does this for you.

JavaScript notes: 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. FusionCharts.js automatically takes care of the loading.
Explicitly render JavaScript only charts

Starting FusionCharts XT - Service Release 3, you can specify the JavaScript chart alias (as listed in the Chart List page) instead of the chart SWF filename to create a pure JavaScript chart. The code snippet below demonstrates how this is achieved: 

<html>
  <head> 
    <title>Creating Pure JavaScript chart</title> 
    <script type="text/javascript" src="FusionCharts/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>

See it live!

In the above code, instead of Column3D.swf we have specified Column3D, the JavaScript chart alias. Based on the JavaScript chart alias provided, FusionCharts JavaScript Class renders the respective JavaScript chart.

You can also specify JavaScript chart alias while using the Object as Constructor parameter through the type property as shown below:

 var myChart = new FusionCharts( { 
	type: 'Column3D',   
	width: '400',    
	height: '300',   
	debugMode : false 
});

You may also opt to render JavaScript charts using the SWF file name along with its path. For this, 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 be rendered using JavaScript. You will 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 XT - Using pure JavaScript</title> 	
    <script type="text/javascript" src="FusionCharts/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( "FusionCharts/Column3D.swf", 
		    "myChartId", "400", "300", "0" );
      
      myChart.setXMLUrl("Data.xml");
      
       myChart.render("chartContainer");

    // -->  
    </script> 	   
  </body> 
</html>

See it live!

Note: Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.
Click here to see the code using the Data String method » 
<html>
  <head> 	
    <title>My First chart using FusionCharts XT - Using JavaScript</title> 	
    <script type="text/javascript" src="FusionCharts/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( "FusionCharts/Column3D.swf", 
		    "myChartId", "400", "300", "0" );

      myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$'>" +
          "<set label='Week 1' value='14400' />" +
          "<set label='Week 2' value='19600' />" +
          "<set label='Week 3' value='24000' />" +
          "<set label='Week 4' value='15700' />" +
        "</chart>");

      myChart.render("chartContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

When you open this page, you will see that even in regular browsers, the chart comes in pure JavaScript form as shown below: