Generate Graphs in Flash Using FusionCharts

A chart is a visual representation of data. The data can be represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart. A chart can represent tabular numeric data, functions or some kinds of qualitative structures.

FusionCharts helps you create animated and interactive Flash charts for web and desktop applications. It livens up your applications by converting monotonous data into exciting visuals.

In this tutorial we will learn how to use FusionCharts to create different types of graphs using ActionScript and XML.

Step 1: What is FusionCharts?

FusionCharts is a flash charting component that can be used to render data-driven and animated charts in your web and desktop applications and presentations. It's smart, user-friendly and innovative features liven up your web applications by converting monotonous data into exciting visuals.

It also can be used with any scripting language and database. It is used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, simple HTML pages or even PowerPoint Presentations, in this tutorial we'll focus in the Flash usage.

Step 2: Where Can I Get FusionCharts?

You can download 3 different versions of FusionCharts.

A free version coded in Flash MX (ActionScript1), a fully functional trial version on the download page or you can buy a license from $69 (ActionScript2) or the Flex version wich uses ActionScript3 (though it's not compatible with Flash).

In this tutorial we will use the ActionScript 2 version.

Step 3: Pros/Cons

There are always pros and cons when using third party components to develop your applications.

Pros:

Easy to implement.
Variety of graph styles to choose.
XML compatible.
Animated and interactive graphs.

Cons:

Depending on the license you need, it can be pricey.
No ActionScript 3 version for Flash.

Step 4: How it Works

You can use two methods to create a graph, one using the SWF's files contained in the Charts folder and HTML, or if you buy the Developer or Enterprise license, you can use the classes directly.

We'll use both methods in this tut.

Step 5: Using the SWF Files

In order to be able to use the SWF files method we will need an XML file and an HTML file where we will pass the XML as an argument to the SWF using FlashVars.

Let's start with the XML.

Step 6: XML

Open your favorite XML or text editor and start writing:


<?xml version="1.0"?> 
    <chart showBorder='0' bgAlpha='0,0' palette='1' caption='Most Popular Browsers - November 2009 ' showPercentageValues='1'>	
        <set name='Firefox' value='47' />	
        <set name='IE8' value='13.3' />
        <set name='IE7' value='13.3' />
        <set name='Safari' value='3.8' />
        <set name='Opera' value='2.3' />	
        <set name='IE6' value='11.6' />	
        <set name='Chrome' value='8.5' />
    </chart>

This code tells the Graph SWF which data to use and sets some options. You can identify at first glance the data that will be used.

You'll see a better description of the options in the documentation included in your download.

Step 7: Graph SWF

FusionCharts has a great collection of chart styles. Browse to the Charts folder in the FusionCharts source, select a graph style and copy it to your project location.

In this example I used the BasicChart style.

Step 8: HTML

In your HTML or text editor write the following:


<html> 
<head> 
<title>BasicChart Example</title> 
</head> 
<body> 

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="600" height="400" id="BasicChart" > 
<param name="movie" value="../FusionCharts/BasicChart.swf" /> 
<param name="FlashVars" value="&dataURL=data.xml&chartWidth=600&chartHeight=400"> 
<param name="quality" value="high" /> <embed src="BasicChart.swf" flashVars="&dataURL=data.xml&chartWidth=600&chartHeight=300" quality="high" width="600" height="400" name="BasicChart" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
</object>


</body>
</html>

This may seem complicated but it's simplier than you think. The markup above it's a basic html structure and a object tag, if you use a dedicated editor this code will be auto-generated when a Flash object is inserted, then you can add or edit the FlashVars parameter to add the URL of your XML data file and the width and height of your application.

Now you can test the graph. Open the html file in your browser and see it working.

Step 9: Using ActionScript

If you purchased the Developer or Enterprise license you can use the classes directly to create a graph.

Create a new Flash File (ActionScript 2) and save it as BasicChart.fla.

Step 10: Importing the Class

Open the Actions Panel (Option + F9) and write this line of code:

1
2	import com.fusioncharts.core.charts.Column3DChart;

This will import the necessary functions to draw a chart. The last word represents the style of the chart you're going to create.

Step 11: Variables

These are the variables we will use, explained in the comments.

1
2	var container:MovieClip = this.createEmptyMovieClip("chartContainer", 1); // Creates a MC that will store the graph
3	var xmlFile:XML = new XML(); //The XML object that will store the XML file
4	var basicChart:Column3DChart; //An instance of the graph you choose

Step 12: Load XML

This code loads the XML file and a function creates the graph when the loading is done.


xmlFile.load("data.xml"); //Write your xml file here

xmlFile.onLoad = function():Void 
{
	basicChart = new Column3DChart(container, 1, 450, 325, 75, 0, false, "EN", "noScale"); //Options explained later in the tut
	basicChart.setXMLData(xmlFile); //The XML needs to be an XML object
	basicChart.render(); //Renders the chart
};

This is all the code you will need to create a basic graph. As you can see the graph constructor has several parameters, this will be explained in the next step.

Step 13: Parameters

Every chart you create using ActionScript will need some parameters, these parameters are:

targetMC: Movie clip reference in which the chart will create its own movie clips.
depth: Depth inside parent movie clip in which the chart will create its own movie clips.
width: Width of chart.
height: Height of chart.
x: x Position of chart.
y: y Position of chart.
debugMode: Boolean value indicating whether the chart is in debug mode.
lang: 2 Letter ISO code for the language of application messages. Depends on the data you've fed.
scaleMode: Scale mode of the movie - noScale or exactFit.

Step 14: Grid Component

FusionCharts Grid Component helps you display single series FusionCharts XML data in a tabular format. You can combine the grid component with any single series chart to form a good looking combo.

You can display a Grid Component without the need of a graph by adding this Javascript to your HTML:


<html>
  <head>
  <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
  </head>
  
  <body>
  <div id="chartdiv" align="center">
  The grid will appear within this DIV. 
  </div>
  <script type="text/javascript">
  var myChart = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "0");
  myChart.setDataURL("Data.xml");
  myChart.render("chartdiv");
  </script>
  
  </body>
</html>

This uses the FusionChart's javascript file to call the SSGrid Swf, and create a grid that look similar to this:

If you want to use a grid but also show a graph, modify the HTML file to look like this:

<p><html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>

  <body>
  <div id="chartDiv" align="center">The chart will appear within this DIV. </div>
  <script type="text/javascript">
  var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChart", "300", "250", "0", "0");
  myChart.setDataURL("Data.xml");
  myChart.render("chartDiv");
  </script>
  <div id="gridDiv" align="center">The grid will appear within this DIV. </div>
  <script type="text/javascript">
  var myGrid = new FusionCharts("../FusionCharts/SSGrid.swf", "myGrid1", "300", "200", "0", "0");
  myGrid.setDataURL("Data.xml");
  myGrid.render("gridDiv");
  </script>
  </body>
  </html>

You will end up with something like this:

You can use the same XML data with the grid and the graph.

Step 15: Export Graph Data

FusionCharts allows you to export data from your charts in CSV format. In Flash, this can be done using the Context Menu.

Open yout data XML file and add the showExportDataMenuItem option.

1	<?xml version="1.0"?>
2	<chart showBorder='0' bgAlpha='0,0' palette='1' caption='Most Popular Browsers - November 2009 ' showPercentageValues='1' showExportDataMenuItem='1' > ...</chart>

When this option is added, a new item is shown in the context menu:

The label of this menu item can be customized by setting:

1	<chart ... exportDataMenuItemLabel='Copy the data of this chart' ...>

Conclusion

FusionCharts is a useful tool to graph your data in a good-looking way and without the need to create everything from scratch. Experiment with the different types of graphs!

Thanks for reading!