Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. XML

Create a Dynamic Bar Graph Generator Using XML + AS3

Read Time:5 minsLanguages:

A bar chart or bar graph is a chart with rectangular bars whose lengths are proportional to the values they represent. They're commonly used for comparing two or more values that were taken over time or under different conditions, usually on small data sets.

In this tutorial, we'll create a bar graph generator using XML and AS3.

Step 1: Brief Overview

Using ActionScript 3, we will get the necessary graph data from an XML file, then display the converted data into animated bars and an info area.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x300 and add a gray radial background (#E6E6E6, #CCCCCC).

Our graph generator will be created entirely by code, so this will be the only thing you will do in the Stage.

Step 3: XML

Open yout favorite XML editor (any text editor will work) and add the following lines:

This is the XML that we'll use to get the data, we won't be using the childrens' names, but the attributes.

  • width: The width of each bar.
  • name: The name of the element, to be displayed in the info area.
  • value: The value of that element, displayed at the top of the bars.
  • color: The color of the bar, in Hexadecimal.

This is the file that the end user will need to edit to show their own data.

Step 4: ActionScript!

It's ActionScript time.

Create a new ActionScript File (Cmd + N) and save it as "Graph.as", in your classes directory.

Step 5: Package

The package keyword allows you to organize your code into groups that can be imported by other scripts. It's recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses.

In the example, the class is stored in the same location as the Fla file.

Step 6: Importing Necessary Classes

These are the required classes, for a more detailed description about every class, please refer to the Flash Help (F1).

Step 7: Declaring and Extending the Class

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

In this example, the Graph class inherits all the methods and properties of the Sprite Class.

Step 8: Variables

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

Step 9: Constructor

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object, or runs using the Document Class.

Step 10: Graph Container

This function will create the x and y axis lines of the graph using the drawing API.

Step 11: Load XML Function

This is the function that handles the loading of the XML file. We specify a default paramenter to avoid calling the function using another .as file, instead we're going to call it from the Document Class.

Step 12: Parse XML

This function sets the data loaded to the XML object and calls the functions to create the graph using that data.

Step 13: Create Bars

This code handles the bar creation.

Step 14: Info Area

Information about the graph will be displayed in the top-right corner, this function will take care of that.

Step 15: Document Class

Go back to the .Fla file and in the Properties Panel add "Graph" in the Class field to make this the Document Class.


Test your movie and see your graph appear on stage.

You can customize your graphs in many ways, using the XML file, and also adding new features with ActionScript. Try it!

I hope you liked this tutorial, Thanks for reading.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.