





















































Note how the Dashboard has a very clean and non-cluttered look, despite the large data set it represents. Extra information, which is not required in the main layout, is displayed as tool tips and annotations. Interactive features such as a clickable world map lets you explore the data the way you want to. The selection of chart types is also immaculate, with the line chart showing the trend of the most commonly used metric—the number of visitors to the site. Other relevant metrics such as Pageviews and Pages/Visit are communicated in large text along with sparklines providing a historical context. A world map is used to display where the traffic is coming from. FusionCharts Suite helps you build similar dashboards with a lot more chart types and interactivity. Without further ado, let us proceed and set the goals for this article.
FusionCharts Suite is a collection of four products, each of which help generate different types of charts, gauges, or maps in web applications. These data-visualization components are ideal for use within reports, dashboards, analytics, surveys, and monitors in web and enterprise applications. The visualizations are rendered using both Adobe Flash and JavaScript (HTML5), thereby making the experience seamless across PCs, Macs and a wide spectrum of devices including iPads and iPhones.
The four products in the suite are:
All the products are built on a common framework and offer similar ways to use and configure them. To start with, we will create charts using FusionCharts XT and later explore charts of other products. Without further ado, let us get started and build our first chart. For that, you will first need to download FusionCharts Suite.
FusionCharts allows you to download the trial version from its website http://www.fusioncharts.com. This trial does not have any feature restriction or an expiry date. The only caveat is that the charts in the evaluation version have FusionCharts printed on the chart, which can be removed by purchasing a license of FusionCharts and later just replacing the Shockwave ( SWF ) and JavaScript( JS ) files, as we shall see later.
The steps to install and use FusionCharts remain the same, whether you are using the trial or licensed version.
You have now successfully downloaded FusionCharts XT and extracted it in the FusionCharts Installation Folder. We will soon learn how to use these files to build charts. Before that, let us quickly explore the contents of the FusionCharts package.
Within the FusionCharts Installation Folder, you will find multiple folders. Some of the folders are internal folders used to store documentation and gallery files, for example, Contents, Gallery, and so on. The folders that you will mostly use are Charts, Code, SourceCode, ExportHandlers, and the Tools folder for the following purpose:
Folder Name
What it contains?
Charts
Contains all the SWF and JS files that form the core of FusionCharts – we will refer to it as Core FusionCharts files. The FusionCharts SWF files have been created using Adobe Flash 8 and need Flash Player 8 (or above) to run. The JavaScript is compatible with IE6 (or above), Firefox, Chrome, Opera, and Safari, including that on iPads and iPhones.
Code
Consists of code samples in various programming languages that you can explore, to quickly learn or get started with.
SourceCode
Present only in Enterprise and Enterprise Plus license, this folder contains the source code of FusionCharts in both Flash Source files (.fla) and JavaScript files.
Tools
Consists of utility applications in three subfolders:
FCDataConverter helps you convert the FusionCharts XML data to JSON data and vice versa. We will explore this later in the chapter, after we have created our first chart.
FlashPlayerSecuritySetup contains scripts that help you configure security settings on your local machine only when using FusionCharts with JavaScript. We will explore this later in the book when we build advanced examples of FusionCharts integrated with JavaScript.
XMLGenerator is a visual interface to generate XML data for FusionCharts. This is primarily intended for non-developers and would not be of much help to us.
The FusionCharts Installation Folder also contains three files in the root folder:
Filename
What it contains?
FusionCharts License Agreement.rtf
Contains the license agreement that governs the usage of FusionCharts. You may want to read through it before using FusionCharts.
Version.txt
Contains the detailed version history of FusionCharts XT.
Index.html
The main page that you use to start exploring FusionCharts package.
When you run Index.html, you will see a page similar to the following screenshot:
When you click on the Documentation link, it opens the documentation for FusionCharts XT, as shown in the following screenshot:
This documentation is an exhaustive resource for FusionCharts including sections for beginners, chart parameter lists, API references, and sections on advanced charting.
From Index.html, you can also explore all the chart types present in FusionCharts XT by clicking on Chart Gallery. It presents a list of chart types and multiple examples for each, as shown in the following screenshot. We recommend you spend some time exploring this, as this is a good learning resource to get a real-world feel of the charts and understand what you can create once you are familiar with FusionCharts.
The Live Demos section, accessible from Index.html, lets you explore sample dashboards and examples created using FusionCharts—both offline and online.
Now that you have had a taste of what FusionCharts can do for you, it is time to create your own chart, your first chart using FusionCharts.
In our examples, we will create charts for a fictional supermarket, Harry's SuperMart, so that Harry, the owner of the supermarket, can make more sense out of his data. Harry's SuperMart, with 11 stores located in four states in the US, offering over 2,000 types of products and a customer base of around 25,000, records an intensive amount of data, which when presented effectively gives a lot of actionable insights. We will learn how to build meaningful charts that can facilitate this. For our first chart, let us build a simple Revenue by Year chart.
Once completed, the chart should look similar to the following screenshot:
Fundamentally, for each chart you build, you should ask yourself the following questions to ensure that the chart serves a meaningful purpose, as opposed to just being a fancy object on the page:
For our first chart that we build, Harry is the end user. This chart lets him compare the revenues of this year against the last two years. We would plot this data on a 3D Column chart, as Harry uses this to compare the revenues instead of seeing the overall trend. Had Harry wanted to see the trend of revenues over multiple years, we would have used an area or line chart. Also, to keep things simple, we will build this as a standalone chart.
Thereafter, technically, there are three steps to build a chart using FusionCharts:
Let us cover them one-by-one.
Upgrading the FusionCharts version, or converting from trial to licensed
If you are upgrading to a newer version of FusionCharts, or converting from evaluation to a licensed version, all you need to do is copy the SWF and JS files from the new or licensed version and overwrite the existing files in the FusionCharts folder.
You just installed FusionCharts. It involved copying of all the SWF and JavaScript files of FusionCharts, which are the FusionCharts Core files. If you intend to plot just a subset of chart types, you can select only those SWF files and paste them here. However, copying all files makes it easier in the future whenever you need to create a new chart type in your application. Each SWF file is used to plot a particular type of chart in Flash and the name of the file represents the chart type. You can find the complete list of charts in FusionCharts Documentation | Introduction | List of Charts. For our first chart, we are going to use Column3D.swf to plot a 3D Column chart.
The FusionCharts folder also contains six JavaScript files that aid in embedding and configuring charts, along with rendering them in JavaScript when viewed on devices that do not support Flash. These files are as follows:
Filename of the JavaScript Class
Purpose
FusionCharts.js
This is the main JavaScript class for FusionCharts, which helps you embed charts in your web pages in a user-friendly way, and offers functionalities such as updating chart data, retrieving chart data, supporting multiple data formats, and event handling.
FusionCharts.HC.js
This framework contains code to render FusionCharts in JavaScript.
FusionCharts.HC.Charts.js
Contains chart specific code to render FusionCharts XT in JavaScript.
jquery.min.js
Minified jQuery framework used by FusionCharts class for internal functions.
FusionCharts.jqueryplugin.js
FusionCharts jQuery class that lets you embed FusionCharts using jQuery syntax.
FusionChartsExportComponent.js
The charts generated by FusionCharts can be exported as images or PDFs in the browser itself, using a module called Client-side Export Component, as we will see later. This JavaScript file provides interfaces to link the Client-side Export Component to the charts.
While creating your chart, as you will soon see, you just need to include FusionCharts.js in your page. The other files such as FusionCharts.HC.js, FusionCharts.HC.Charts.js, and jquery.min.js are dynamically loaded by the code in FusionCharts.js.
With the basic setup in place, let us focus on the data for our chart.
<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'> <set label='2009' value='1487500' /> <set label='2010' value='2100600' /> <set label='2011' value='2445400' /> </chart>
Here, we have encoded the data, as shown in the following table, to an XML format supported by FusionCharts:
Year
Revenue
2009
$1,487,500
2010
$2,100,600
2011
$2,445,400
Each chart in FusionCharts is powered by data. This data could be static and hand-coded as we will build in this example, or dynamically generated by live scripts that are connected to databases or web services. FusionCharts can accept this data in two formats—XML and JSON. Both are commonly used formats for data exchange on the Web, with XML being easy on the human eyes.
The XML format that we just created is called single-series XML in FusionCharts parlance, as we are plotting just one series of data. Later in this chapter, we will explore multi-series charts that let you compare more than one series of data, for example, revenue split across Food and Non-Food products for each year across last three years.
All FusionCharts XML files start with the <chart> element. The attributes of the <chart> element help you configure the functional and cosmetic properties of the chart. In our example, we have defined the chart caption, subcaption, axis titles, and the currency prefix for numbers on the chart, as in the following line of code:
<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>
For each chart type, there are hundreds of optional attributes that you can define. If these are not defined, the chart assumes the default values for each of them.
Special characters in XML need to be encoded
XML documents can contain non-ASCII characters or special characters. However, these need to be encoded before they are provided in the XML document. In our example, note how we have encoded the apostrophe in Harry's to Harry's. Had we not done that, the XML document would have been an invalid one and raised errors when opened in a browser.
Each row of data to be plotted on the chart is represented by the <set> element. The label attribute defines the text label for each data point, and the value attribute defines its numerical value to be plotted. There are additional attributes that can be defined for the <set> element, for example, user-defined colors, which we will explore in later chapters. An important thing to note is how the $ prefix or comma separators have been stripped off the revenue numbers, before encoding them as a value for the <set> element, that is, $1,487,500 has been converted to 1487500, as shown in the following line of code:
<set … value='1487500' />
This is necessary as FusionCharts can interpret only standard numeric values.
While the standard attributes for the <chart> and <set> elements are common across chart types, many chart types have special features that are controlled by attributes that are specific for the chart. You can explore a list of all such attributes for each chart in the documentation of FusionCharts, under the section Chart XML API.
With both the basic setup and data in place, we are just one step away from seeing our chart live—writing the HTML and JavaScript to embed this chart, which we will do next.
<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>
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:
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.
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.
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.
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 FusionCharts folder is present in LearningFusionCharts folder and contains all JavaScript files required for FusionCharts.
Check whether you have provided the correct relative path to FusionCharts.js in the page FirstChart.html
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 DIV, chart JavaScript variable and the chart object in the constructor.
Empty white area instead of the chart
Check whether you have copied Column3D.swf to FusionCharts folder.
Check whether the relative path provided to Column3D.swf in FusionCharts constructor is correct.
"Error in loading data"
Check whether Data.xml is present within FirstChart folder
Check whether the path specified to Data.xml is correct in setXMLUrl() method
"Invalid data"
Check for the validity of XML data in Data.xml by opening it in a browser or an XML editor. Or, you can also switch the debug mode of chart to ON by changing the last but one parameter in constructor to 1. That will highlight the error in XML, as shown in the following screenshot:
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.
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.
<html> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"> <!--FusionCharts.setCurrentRenderer('javascript'); var myChart = new FusionCharts("../FusionCharts/ Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLUrl("Data.xml"); myChart.render("chartContainer");// --> </script> </body> </html>
How different is the Flash rendering from JavaScript rendering?
The JavaScript version of FusionCharts behaves similar to the Flash version, offering most of the functional and cosmetic configuration. With the exception of a true 3D chart, all charts look and behave almost the same as their Flash counterpart. There are minor visual differences in the JavaScript version such as the width of columns, effect of shadows, handling of long x-axis labels, appearance of scroll bars, and so on. A detailed list of such differences are present in FusionCharts Documentation | Introduction | JavaScript Charting Capabilities | How different is JavaScript charts from Flash charts?
You just converted the previous chart to a pure JavaScript chart, irrespective of the device it is now viewed on. The following snippet of code instructs FusionCharts to switch the rendering mode to JavaScript:
FusionCharts.setCurrentRenderer('javascript');
If your page contains multiple charts, this setting applies to all such charts that are defined after this line of code. Hence, if you declare this at the beginning, all the charts in the page will render using JavaScript. You would not need to declare the same for each chart in the page.
JavaScript cannot access data stored on your hard drive in some browsers
Some browsers restrict JavaScript from accessing the local filesystem due to security reasons. Hence, the JavaScript charts, when running from your local hard drive, would not be able to access XML or JSON data provided as a URL. However, when run from a server, including localhost, they will run fine. An alternate method to get JavaScript charts working locally is to use the Data String method, which we will explore in the next section.
In this example, you created a standalone Column 3D chart. How about inching towards building a complete dashboard? To do so, convert the existing chart to a Column 2D chart and add the following three charts to this page. In addition, specify different width and height for each chart to accommodate the amount of data it presents, and also place them in order of importance of the chart to Harry.
All these charts use the same single-series XML format that you had earlier created. Remember to provide a different ID for each chart and its container DIV . Also, do not forget to encode special characters such as & (ampersand) or ' (apostrophe) in XML.
Once you are done, let us explore the other way to provide XML data to FusionCharts—as a string, instead of providing a URL, for example, Data.xml.
As we had mentioned earlier, there are two ways to provide data to FusionCharts – either as a URL to the datasource (Data URL method), or as a string (Data String method). Till now, we have used the former method by invoking the setXMLUrl() method on the chart instance and providing Data.xml as the URL. In order to pass the XML as a string to the chart, we can use the setXMLData() method, as explained next.
<html> <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.setXMLData("<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'> <set label='2009' value='1487500' /> <set label='2010' value='2100600' /> <set label='2011' value='2445400' /> </chart>"); myChart.render("chartContainer");// --> </script> </body> </html>
You just used the Data String method of FusionCharts to power up your chart using XML data embedded in the page, instead of reading it from Data.xml. This was done by invoking the setXMLData() method on the chart instance.
myChart.setXMLData("<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'> <set label='2009' value='1487500' /> <set label='2010' value='2100600' /> <set label='2011' value='2445400' /> </chart>");
The entire XML string is passed to this method. Note how we are using the characters in JavaScript to split the XML data string into multiple lines for enhanced readability. Make sure there are no trailing spaces, when using this approach.
You can also define a JavaScript string variable, store XML data in it, and then assign the variable reference to the chart instance, as shown in the following code snippet:
<html> <body> <div id="chartContainer">FusionCharts will load here!</div> <script type="text/javascript"><!-- var strData = "<chart caption='Harry's SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$'>" + "<set label='2009' value='1487500' />" + "<set label='2010' value='2100600' />" + "<set label='2011' value='2445400' />" + "</chart>"; var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "400", "300", "0", "1" ); myChart.setXMLData(strData); myChart.render("chartContainer");// --> </script> </body> </html>
In the previous example, we had stored the entire XML string in the variable strData, and then passed its reference to the setXMLData() method, instead of the XML string directly.
When using this method to provide data, if your chart is not working or reporting Invalid data, check for the following: