Figure 10-30 shows how this would look for the
column chart.
Figure 10-30. Column chart MXML with animation
209
EXPLORING FLEX CHARTING
Creating a pie chart
The last kind of chart we will be creating is the pie chart.
1. Drag a PieChart component onto the Final Marks ??“ Pie Chart panel. Again, the Create Chart dialog
box opens. For the PieChart component, we will only be looking at the final average of each
student, so complete the dialog box as shown in Figure 10-31. Be sure to deselect the Include
legend check box. We won??™t need a legend on this chart as it will be clear when the user rolls
over the individual pies.
Figure 10-31. Creating our pie chart
2. Adjust the size of your component and set the Data provider property to {student} and the Show
data tips attribute to true (Figure 10-32).
Figure 10-32. Our pie chart??™s properties
210
CHAPTER 10
3. We need to tell the chart which piece of information we want displayed in this chart, as we
have done before, in the source MXML, as shown in Figure 10-33.
Figure 10-33. Pie chart MXML specifying the label position
Since a pie chart does not have x or y coordinates, the property is called field, as opposed to yField
for the other charts. We have also added a labelPosition property here that will tell us what the data
is along the outside of the pie chart.
Running our project shows us what our pie chart will look like (Figure 10-34).
Figure 10-34. Pie chart with labels
Unfortunately, our labels don??™t tell us enough information for this chart to be effective.
Pages:
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154