10 min read

(For more resources related to this topic, see here.)

Drawing a bar chart with Flex

The Flex framework offers some charting components that are fairly easy to use. It is not ActionScript per say, but it still compiles to the SWF format. Because the resulting charts look good and are pretty customizable, we decided to cover it in one recipe. There is a downside though to using this: the Flex framework will be included in your SWF, which will increase its size. Future recipes will explain how to do the same thing using just ActionScript.

Getting ready

Open FlashDevelop and create a new Flex Project.

How to do it…

The following are the steps required to build a bar chart using the Flex framework.

Copy and paste the following code in the Main.mxml file. When you run it, it will show you a bar chart.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 

 minWidth="955"
minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var monthsAmount:ArrayCollection = new ArrayCollection(
[
{ Month: "January", Amount: 35},
{ Month: "February", Amount: 32 },
{ Month: "March", Amount: 27 } ]);
]]>
</fx:Script>
<mx:BarChart id="barchart" x="30" y="30"
dataProvider="{monthsAmount}">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis minimum="10"/>
</mx:horizontalAxis>
<mx:series>
<mx:BarSeries
yField="Month"
xField="Amount"
/>
</mx:series>
</mx:BarChart>
</s:Application>

How it works…

When you create a new Flex project, Flash Builder will generate for you the XML file and the Application tag. After that, in the script tag we created the data we will need to show in the chart. We do so by creating an ArrayCollection data structure, which is an array encapsulated to be used as DataProvider for multiple components of the Flex framework, in this case mx:BarChart.

Once we have the data part done, we can start creating the chart. Everything is done in the BarChart tag. Inside that tag you can see we linked it with ArrayCollection, which we previously created using this code: dataProvider = “{monthsAmount}”.

Inside the BarChart tag we added the verticalAxis tag. This tag is used to associate values in the ArrayCollection to an axis. In this case we say that the values of the month will be displayed on the vertical axis.

Next comes the horizontalAxis tag, we added it to tell the chart to use 10 as a minimum value for the horizontal axis. It’s optional, but if you were to remove the tag it would use the smallest value in ArrayCollection as the minimum for the axis, so one month, in this case, March, would have no bar and the bar chart wouldn’t look as good.

Finally, the series tag will tell for a column, what data to use in ArrayCollection. You can basically think of the series as representing the bars in the chart.

There’s more…

As we mentioned earlier, this component of the Flex framework is pretty customizable and you can use it to display multiple kinds of bar charts.

Showing data tips

Multiple options are available using this component; if you want to display the numbers that the bar represents in the chart while the user moves the mouse over the bar, simply add showDataTips = “true” inside the BarChart tag and it is done.

Displaying vertical bars

If you would like to use vertical bars instead of horizontal bars in the graph, Flex provides the ColumnChart charts to do so. In the previous code, change the BarChart tag to ColumnChart, and change BarSeries to ColumnSeries. Also, since the vertical axis and horizontal axis will be inverted, you will need verticalAxis by horizontalAxis and horizontalAxis by verticalAxis (switch them, but keep their internal tags) and in the ColumnSeries tag, xField should be Month and yField should be Amount. When you run that code it will show vertical bars.

Adding more bars

By adding more data in the ArrayCollection data structure and by adding another BarSeries tag, you can display multiple bars for each month. See the Adobe documentation at the following link to learn how to do it: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/BarChart.html.

Building vertical bar charts

Now that we have built a bar chart using Flex, we are ready to do the same in pure ActionScript. This bar chart version will allow you to expand it in multiple ways and will remove the weight that the Flex framework adds to the file size. Now a bit about bar charts; Bar charts are good when you don’t have too much data (more than 20 bars starts to make a big chart), or when you’ve averaged it. It is a quick way to compare data visually.

Getting ready

All we will need for this is to start a new project in FlashDevelop. Also, it would help to read about preparing data and about axes in the book ActionScript Graphing Cookbook.

How to do it…

This section will refer a lot to the code provided with the book. You will notice that we divided all the elements in the charts into their own classes.

  1. It all starts in the Main.as file, where we create the data that we will use to display in the chart after that we just create the chart and add it to the display list.

    var data:Vector.<BarData> = new Vector.<BarData>();
data.push(new BarData("January", 60));
data.push(new BarData("February", 100));
data.push(new BarData("March", 30));
var chart:BarChart = new BarChart(data, 400, 410);
chart.x = 30;
chart.y = 30;
addChild(chart);

  2. From here you can look into the BarData class, which it is just two variables, a string and a number that represents the data that we are going to show.

  3. We now need to create a class for all the elements that comprise a bar chart. They are: the bars, the vertical axis, and the horizontal axis. Now this recipe is building a vertical bar chart so the vertical axis is the one that will have numerical marks and the horizontal axis will have labels on the marks.

  4. First the Bar class: This class will only draw a rectangle with the height representing the data for a certain label. The following is its constructor:

    public function Bar(width:int, height:int) {
graphics.beginFill(0xfca25a);
graphics.drawRect(-width/2, 0, width, -height);
graphics.endFill();
}

  5. The horizontal axis will take the x coordinate of the created bars and will place a label under it.

    public function HorizontalAxis(listOfMark:Vector.<Number>,
data:Vector.<BarData>, width:Number) {
drawAxisLine(new Point(0, 0), new Point(width, 0));
for (var i:int = 0; i < listOfMark.length; i++) {
drawAxisLine(new Point(listOfMark[i], -3), new
Point(listOfMark[i], 3));
var textField:TextField = new TextField();
textField.text = data[i].label;
textField.width = textField.textWidth + 5;
textField.height = textField.textHeight + 3;
textField.x = listOfMark[i] - textField.width / 2;
textField.y = 5;
addChild(textField);
}
}

  6. Now the vertical axis will make 10 marks at regular interval and will add a label with the associated value in it:

    for (var i:int = 0; i < _numberOfMarks; i++) {
drawAxisLine(new Point( -3, (i + 1) * -heightOfAxis / _
numberOfMarks ), new Point(3, (i + 1) * -heightOfAxis / _
numberOfMarks));
var textField:TextField = new TextField();
textField.text = String(((i + 1) / (_numberOfMarks)) *
maximumValue );
textField.width = textField.textWidth + 5;
textField.height = textField.textHeight + 3;
textField.x = -textField.width - 3;
textField.y = (i + 1) * -heightOfAxis / _numberOfMarks -
textField.height / 2;
addChild(textField);
}

  7. Finally, the BarChart class will take the three classes we just created and put it all together. By iterating through all the data, it will find the maximum value, so that we know what range of values to put on the vertical axis.

    var i:int;
var maximumValue:Number = data[0].data;
for (i = 1; i < data.length; i++) {
if (data[i].data > maximumValue) {
maximumValue = data[i].data;
}
}

  8. After that we create each bar, notice that we also keep the position of each bar to give it to the horizontal axis thereafter:

    var listOfMarks:Vector.<Number> = new Vector.<Number>();
var bar:Bar;
for (i = 0; i < data.length; i++) {
bar = new Bar(_barWidth, data[i].data * scaleHeight);
bar.x = MARGIN + _barSpacing + _barWidth / 2 + i * (_barWidth +
_barSpacing);
listOfMarks.push(bar.x - MARGIN);
bar.y = height - MARGIN;
addChild(bar);
}

  9. Now all we have left to do is create the axes and then we are done; this is done really easily as shown in the following code:

    _horizontalAxis = new HorizontalAxis(listOfMarks, data, width -
MARGIN);
_horizontalAxis.x = MARGIN;
_horizontalAxis.y = height - MARGIN;
addChild(_horizontalAxis);
_verticalAxis = new VerticalAxis(height - MARGIN, maximumValue);
_verticalAxis.x = MARGIN;
_verticalAxis.y = height -MARGIN;
addChild(_verticalAxis);

How it works…

So we divided all the elements into their own classes because this will permit us to extend and modify them more easily in the future.

So let’s begin where it all starts, the data. Well, our BarChart class accepts a vector of BarData as an argument. We did this so that you could add as many bars as you want and the chart would still work. Be aware that if you add many bars, you might have to give more width to the chart so that it can accommodate them.

You can see in the code, that the width of the bar of determined by the width of the graph divided by the number bars. We decided that 85 percent of that value would be given to the bars and 15 percent would be given to the space between the bars. Those values are arbitrary and you can play with them to give different styles to the chart.

Also the other important step is to determine what our data range is. We do so by finding what the maximum value is. For simplicity, we assume that the values will start at 0, but the validity of a chart is always relative to the data, so if there are negative values it wouldn’t work, but you could always fix this. So when we found our maximum value, we can decide for a scale for the rest of the values. You can use the following formula for it:

var scaleHeight:Number = (height - 10) / maximumValue;

Here, height is the height of the chart and 10 is just a margin we leave to the graph to place the labels. After that, if we multiply that scale by the value of the data, it will give us the height of each bar and there you have it, a completed bar chart.

There’s more…

We created a very simple version of a bar chart but there are numerous things we could do to improve it. Styling, interactivity, and the possibility of accommodating a wider range of data are just some examples.

Styling

This basic chart could use a little bit of styling. By modifying the color of the bars, the font of the labels, and by adding a drop shadow to the bars, it could be greatly enhanced. You could also make all of them dynamic so that you could specify them when you create a new chart.

Interactivity

It would be really good to show the values for the bars when you move the mouse over them. Right now you can kind of get an idea of which one is the biggest bar but that is all. If this feature is implemented, you can get the exact value.

Accommodating a wider data range

As we explained earlier, we didn’t account for all the data range. Values could be very different; some could be negative, some could be very small (between 0 and 1), or you would want to set the minimum and maximum value of the vertical axes. The good thing here is that you can modify the code to better fit your data.

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here