Getting Started with Graph Drawing | ActionScript Graphing Cookbook

Using Flex for charts

No book on ActionScript graphing would be complete without at least mentioning Flex. The Flex software development kit also contains an extensive API for drawing different types of graphs.

The techniques we've discussed in the previous recipes are much more powerful, but depending on the case, a small Flex component might be enough.

Getting ready

Since we need access to the Flex library, we'll need to set up our FlashDevelop workspace differently. The easiest way is to create a new project. When asked for the type of project, pick Flex 3 project (instead of AS3 Project, which we use throughout the other parts of this book).

If you browse through the files in the src directory of your project, you will now find a Main.mxml file instead of the previous Main.as file. This is the file that describes your user interface. Instead of programmatically adding all the sprites and shapes to your interface, you will add them to this file.

How to do it...

Open Main.mxml. All the code presented here should be added inside the mx:Application tags.

First let's start with the data set definition:

  <mx:Script><![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    public var dataSet:ArrayCollection = new ArrayCollection([
      {x:0,   y1:20,  y2:50},
      {x:50,  y1:70,  y2:40},
      {x:100, y1:0,   y2:100},
      {x:150, y1:150, y2:150},
      {x:200, y1:300, y2:200},
      {x:250, y1:200, y2:170},
      {x:300, y1:170, y2:160},
      {x:350, y1:20,  y2:120},
      {x:400, y1:60,  y2:80},
      {x:450, y1:250, y2:150},
      {x:500, y1:90, y2:20},
      {x:550, y1:50, y2:40},
      {x:600, y1:110, y2:90},
      {x:650, y1:150, y2:150},
      {x:700, y1:320, y2:200}
    ]);
    ]]></mx:Script>

This is the same set we used in previous recipes. Now we add the actual chart and legend:

  <mx:Panel title="Our first Flex chart">
    <mx:AreaChart id="areaChart" showDataTips="true" dataProvider="{dataSet}">
      <mx:horizontalAxis>
        <mx:CategoryAxis
          dataProvider="{dataSet}"
          categoryField="x"
        />
      </mx:horizontalAxis>
      <mx:series>
        <mx:AreaSeries 
          yField="y1" 
          displayName="First series">
          <mx:areaFill>
            <mx:SolidColor color="0xff9933" alpha="0.5" />
          </mx:areaFill>
        </mx:AreaSeries>
        <mx:AreaSeries 
          yField="y2" 
          displayName="More data points">
          <mx:areaFill>
            <mx:SolidColor color="0x3399ff" alpha="0.5" />
          </mx:areaFill>
        </mx:AreaSeries>
      </mx:series>
    </mx:AreaChart>
    <mx:Legend dataProvider="{areaChart}"/>
  </mx:Panel>

How it works...

Flex has a few new data structures; in this recipe we use the ArrayCollection data structure. This is a specially defined data structure that makes it easy to manage chart data. In fact, if you wanted to include the Flex library in your project, you could use the class for your own graph drawing.

Now let's look at the structure as a display list: the root element is a Panel class. This is a simple wrapper class to which you can add a title.

Inside this panel, there are two visual elements: an area chart and a legend. The legend is the easiest of the two explain; we use the default settings and let it read its data from the chart. It's all automatically added and filled.

The area chart is a little more involved:

The dataProvider attribute links this chart to the data we previously defined.
The showDataTips attribute is enabled to show you how quickly you can get some pretty fancy charts with Flex. If this is enabled, you can hover over the data points with your mouse, and you'll see a pop up with more details.
The horizontal axis is mapped to the x element inside the data set. Note that scaling of the axes happens automatically (but it can be overridden if required).
Finally we add two data series, both of which we map to the data set we defined previously. We also apply the same fill that was used in the previous recipes.

If you run the program, you will see a graph similar to the one presented in the multiple area charts recipe.

The difference is the way we defined the chart. With Flex you describe how the chart will look and let Flex do the work for you. In plain ActionScript, you have full control, but you have to do all the hard work.

The choice will depend on the application and most likely also on personal preferences.

There's more...

The Flex charting API is immense and with the recipe above, and we haven't even scratched the surface. If you think this style of development is for you, here are a few more things you can do.

Flex without MXML

If you like Flex, but don't like MXML, there's a way to program Flex with virtually no XML. Since Flex wasn't built for this purpose, you'll find fairly little documentation explaining this.

If this is something you want to try out, start with this StackOverflow question:

http://stackoverflow.com/questions/141288/possible-to-use-flex-framework-components-without-using-mxml.

ActionScript in Flex

Everything inside the mx:Script tags is pure ActionScript code. If you don't like the ArrayCollection data structure, you can always write your own bit of ActionScript that maps from any data structure to the one Flex expects.

ActionScript Graphing Cookbook

ActionScript Graphing Cookbook

Overview of this book

Using Flex for charts

Getting ready

How to do it...

How it works...

There's more...

Flex without MXML

ActionScript in Flex

See also

ActionScript Graphing Cookbook

ActionScript Graphing Cookbook

Overview of this book

Using Flex for charts

Getting ready

How to do it...

How it works...

There's more...

Flex without MXML

ActionScript in Flex

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access