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.
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.
Open
Main.mxml. All the code presented here should be added inside themx:Applicationtags.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>
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.
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.
If you like to get into Flex, there are numerous books. Also, the online documentation is very complete. For charting, your best starting point is available here:
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_intro_7.html.