Time for action — Writing the HTML and JavaScript code to embed the chart
1. Create an empty HTML file within the
FirstChartfolder named asFirstChart.html.2. Paste the following code in the file and save it:
<html> <head> <title>My First chart using FusionCharts</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/Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer");//--> </script> </body> </html>3. Open it in a web browser. You should see your first chart coming to life, as shown in the following screenshot. Refresh the browser to experience the animation again, or hover over the columns to see tooltips.
4. If you have access to an iPad or iPhone, open this example using the device. To do so, upload the entire
LearningFusionChartsto a server that can be accessed over the Internet. Now point the browser in the device tohttp://Your_Website_URL/FirstChart/FirstChart.html. You will be able to see the same chart, but this time, rendered using JavaScript. The following screenshot shows a rendering of the chart within Safari in an iPhone. Tap on the columns to see the tool-tips.
What just happened?
You just created your first chart, that's what happened! This chart renders using Adobe Flash on devices that support it, and automatically switches to JavaScript rendering on devices such as iPads and iPhones. The beauty of the solution is that no additional code or configuration is required to do this.
Let us break down our HTML and JavaScript code into digestible chunks. To create charts using FusionCharts in your page, you first need to include the FusionCharts JavaScript library (FusionCharts.js), as in the following lines of code:
<script type="text/javascript" src="../FusionCharts/FusionCharts.js"> </script>
Note that you only need to include FusionCharts.js in your code. The other files required for FusionCharts, namely FusionCharts.HC.js, FusionCharts.HC.Charts.js, and jquery.min.js are dynamically loaded by code in FusionCharts.js.
Next, we create a DIV as a placeholder where the chart would be rendered. We give the DIV an ID—chartContainer. This is done using the following code:
<div id="chartContainer">FusionCharts will load here!</div>
The DIV carries a placeholder text FusionCharts will load here! which will be displayed if there is an error in your JavaScript code, or FusionCharts.js or the chart SWF file could not be loaded. If you see this text instead of the chart, you know what to fix.
Following this, we initialize a chart by invoking the FusionCharts JavaScript constructor, using the following code:
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" );
To this constructor, we pass the following parameters in order:
1. Path and filename of the chart SWF: The first parameter contains the path and filename of the chart SWF file. We have used the relative path to the SWF file, which is recommended.
2. ID of the chart: Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference of the chart for manipulation using advanced JavaScript.
3. Width and height in pixels: Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending
px)or percentage. In this example, we have used pixels. You can also set it to%values as in the following code:var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "100%", "100%", "0", "1" );The FusionCharts JavaScript class will automatically convert the % dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.
4. Whether to start the chart in Debug mode: While developing your charts, if you face any issues, you can initialize them in debug mode by setting this parameter to
1. The Debug mode gives you behind-the-scenes information on where the data is loaded from, errors, and so on. In our example, we are rendering the chart in normal mode, by setting this parameter to0.5. In previous versions of FusionCharts, you had to manually set the last parameter to
1, if you wanted FusionCharts to communicate with JavaScript. Now that FusionCharts is very well integrated with JavaScript, this parameter is a mandatory1.
Note
Alternate compact constructor method
A chart can also be initialized using the static render() method of the FusionCharts class, as shown below.
<script type="text/javascript">
<!--var myChart = FusionCharts.render ("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "chartContainer", "Data.xml"); // -->
</script>
There are additional possible syntaxes of this constructor and are detailed in FusionCharts Documentation | FusionCharts and JavaScript | Constructor methods.
Once the chart is constructed, we tell the chart where to source data from. We use a relative path to Data.xml, as it is stored in the same folder.
myChart.setXMLUrl("Data.xml");
If you recall, FusionCharts accepts data in two formats — XML and JSON — either provided as a string or a URL that points to the data file. In our example, we have used XML as the data format, which is stored in Data.xml. So, we use the setXMLURL() function to pass the URL of the XML data file to the chart.
Note
What if the XML data file was stored in another location or subdomain?
If your data file was stored in a different folder, you would have to specify the relative path to the folder and then the filename, for example, ../Source/Data/MyData.xml. We do not recommend specifying absolute URLs, because, if you move your web page or data file to another domain, cross-domain security issues would crop up and the chart would stop working.
Flash Player's sandbox security model blocks loading of files across different sub-domains. If you need to load your XML data from another subdomain, you will have to create a Cross domain policy XML file, as explained at http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html.
Finally, to render the chart in the DIV that you had earlier created, you invoke the render() function and pass to it the ID of the DIV.
myChart.render("chartContainer");
Do remember that each chart and DIV needs to have its own unique ID.
What to look for if your chart is not rendered?
If you do not see any chart, there could be multiple reasons behind it. You should check for the following, based on what you see in your browser:
|
What do you currently see instead of the chart? |
Corrective measures you should take | |
|---|---|---|
|
"FusionCharts will load here!" text that you had placed in the container DIV |
Check whether the Check whether you have provided the correct relative path to Check for errors in your JavaScript code that you have written to embed the chart. Use the browser's developer tools to check this. Ensure that you have given different IDs for container | |
|
Empty white area instead of the chart |
Check whether you have copied Check whether the relative path provided to | |
|
"Error in loading data" |
Check whether Check whether the path specified to | |
|
"Invalid data" |
Check for the validity of XML data in
|
With these measures, you should be able to locate the error and get your chart working. Before we move ahead to explore the other aspects of FusionCharts, let us understand how FusionCharts automatically switches between Flash and JavaScript mode.
Converting the chart to a pure JavaScript chart
By default, FusionCharts renders its charts using Adobe Flash. However, as you have seen earlier, when you view the chart on iPads or iPhones, FusionCharts automatically switches to JavaScript rendering, as Flash is not supported on those devices. This is internally checked by FusionCharts.js, and the auto-loaded files FusionCharts.HC.js, FusionCharts.HC.Charts.js, and jquery.min.js then aid in rendering the chart using JavaScript, using the same datasource and configuration.
FusionCharts also provides an option to entirely skip Flash rendering and use JavaScript as the default rendering, irrespective of the device. This feature can be very nifty for developers who want to develop JavaScript-only applications or even frameworks. Let us quickly see how to attain that.
