Once the chart is in position, you can adjust its size. You can also change the size and location
of the legend. Depending on the shape of the bounding box around the legend, you can control
whether it is to be horizontal or vertical. Figure 10-16 shows our design so far.
Figure 10-16. Chart layout
3. We now need to connect the chart to our data, in the same way we did for the DataGrid. Set
the Data provider property for the chart to {student}, set the Type to clustered, and set Show
data tips to true (Figure 10-17). Show data tips gives you information about a point in the chart
when you roll over it.
Figure 10-17. ColumnChart properties
4. As we did with the DataGrid, we must tell the chart which data from the XML we want shown
where. Switch back to the Source view and set the yField values to the XML fields we want to
go in them, as shown in Figure 10-18. The yField values define the height of the columns. So
204
CHAPTER 10
if the quiz mark for the first student is 60, the value 60 gets sent to the first column of the first
student, giving the column a height of 60.
Figure 10-18. ColumnChart MXML with yFields
5. To tell the chart what values to place along the x-axis, let??™s add some new MXML. The MXML
showing the horizontal axis categoryField shown in Figure 10-19 adds this to the chart. Copy
all three lines of the horizontalAxis tag into your MXML.
Figure 10-19. ColumnChart MXML with categoryField
6. Run the project to see how the chart looks at this point.
Pages:
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150