You are viewing documentation for an older version. For current documentation - click here.
Creating JavaScript (HTML5) charts

Starting PowerCharts XT, you can create JavaScript based 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 not installed or is disabled, for example, in iPhone/iPad. PowerCharts XT internally makes use of Raphaël library to generate JavaScript based charts. This feature works seamlessly with the current implementation mode of PowerCharts XT, which means you do not have to write any additional code to implement this. FusionCharts 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.

Code examples discussed in this section are present in Download Package > Code > MyFirstChart folder.

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

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

      var myChart = new FusionCharts( "Charts/Spline.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 PowerCharts XT - Using JavaScript</title> 	
    <script type="text/javascript" src="Charts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">PowerCharts XT will load here!</div>          
    <script type="text/javascript"><!--

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

      myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$' showValues='0'>" +
          "<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 This 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, PowerCharts XT make use of FusionCharts.HC.js, FusionCharts.HC.PowerCharts.js and jquery.min.js. These files are present in the Charts folder of the Download Pack. It is very important that you keep these files in the same folder as FusionCharts.js. 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 PowerCharts XT, 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="Charts/FusionCharts.js"></script>
  </head> 
  <body> 
    <div id="chartContainer">PowerCharts XT will load here!</div> 
    <script type="text/javascript"><!--
	 
      var myChart = new FusionCharts( "Spline", "myChartId", "400", "300" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer"); 
    // --> 
    </script>
  </body> 
</html>

See it live!

In the above code, instead of Spline.swf we have specified Spline, 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: 'Spline',   
	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 PowerCharts XT renderer to skip Flash rendering and create pure JavaScript based charts.

The modified code will look like the following:

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

      FusionCharts.setCurrentRenderer('javascript');

      var myChart = new FusionCharts( "Charts/Spline.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 PowerCharts XT - Using JavaScript</title> 	
    <script type="text/javascript" src="Charts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">PowerCharts XT will load here!</div>          
    <script type="text/javascript"><!--
      
     FusionCharts.setCurrentRenderer('javascript');

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

      myChart.setXMLData("<chart caption='Weekly Sales Summary' xAxisName='Week' " +
        "yAxisName='Sales' numberPrefix='$' showValues='0'>" +
          "<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 would see that even in regular browsers, the chart comes in pure JavaScript form as shown below.