In the previous chapter we covered creating a bar chart with Flex. This recipe will expand on that topic and will show you how to create a pie chart using Flex. Pie charts are great for visualizing data that adds up to 100 percent (think about who voted for whom in an election) or to show proportion between different numbers.
As in the Drawing a bar chart with Flex recipe in Chapter 3, Creating Bar Charts, you will need to have either Flash Builder installed or Flash Develop with the Flex SDK downloaded.
The following is the code to draw a pie chart:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var monthsAmount:ArrayCollection = new ArrayCollection( [
{ month: "January", value: 27},
{ month: "February", value: 35 },
{ month: "March", value: 15} ]);
private function displayLabel(data:Object, field:String, index:Number, percentValue:Number):String {
var temp:String= String(percentValue).substr(0,8);
return data.month + ": " + data.value + '
' + temp + "%";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Define custom colors for use as pie wedge fills. -->
<mx:SolidColor id="color1" color="0x70ddff" alpha="0.6"/>
<mx:SolidColor id="color2" color="0x56baec" alpha="0.6"/>
<mx:SolidColor id="color3" color="0x2b78d2" alpha="0.6"/>
</fx:Declarations>
<mx:PieChart id="piechart1" x="30" y="30" dataProvider="{monthsAmount}" showDataTips="true">
<mx:series>
<mx:PieSeries field="Amount" labelPosition="callout" fills="{[color1, color2, color3]}" labelFunction="{displayLabel}" />
</mx:series>
</mx:PieChart>
</s:Application>If you read
the recipe about drawing a bar chart using Flex, you will notice that the code is fairly similar. When you create a Flex project it will generate for you the .xml file and the Application tag. Right after those tags, you get the Script tag, where you can put the ActionScript code inside a .mxml file. This is where we created the ArrayCollection data structure used as data to be visualized in the pie chart.
We will skip the Declarations tag for now and go right to the PieChart tag. This tag is pretty simple; it gives an ID to the chart so we can reference it later and position it on the screen using x and y coordinates. Finally it associates this chart with the data created in the ActionScript code using the argument dataProvider = "{monthsAmount}". You can also see that we added showDataTips discussed in Chapter 3, Creating Bar Charts, which also works for displaying data tips on a mouse over.
Now PieSeries is the tag where we added the new code. First we need to tell the chart which values to consider inside the ArrayCollection data structure; we do this in the argument field. We set field = "Amount", where amount is a value name inside monthsAmount ArrayCollection. After that, we tell the chart how to display the labels. The labelPosition argument can take multiple values such as none, inside, outside, callout, and insideWithCallout. none will not put any labels on the pie chart. inside and outside are pretty obvious and will put the labels respectively inside and outside the chart. callout will put the label outside the chart but also add a line from the associated wedge to the label. insideWithCallout will draw the label inside the chart, but if the wedge is too small to contain the label, it will use the callout positioning instead.
In this use of
the Pie Chart component, we decided to go a bit further and style it by changing the default colors. We did so in the declaration tag. We created three colors that we passed in the PieSeries tag by their ID, as shown in the following code snippet:
fills="{[color1, color2, color3]}"Finally, in order to make the chart easier to understand we formatted the labels so that there would be the name of the value beside the number. We do so inside the function displayLabel, which we also pass to the PieSeries tag.
The PieChart component has a lot of options and customizations you can do. The following is a small one.