To create a new column, copy and paste
another three of the DataGrid lines, then fill them in. The final DataGrid MXML should look
like Figure 10-12.
Figure 10-12. DataGrid with headerText, dataField, and width properties
6. Switch back to the Design view, and adjust the size of the DataGrid so that it fits well in your
panel. We will be adding a ComboBox component above the DataGrid later, so move it down
about 30 pixels within the panel.
7. Run the project by clicking the green arrow on the main toolbar. You should see the data from
the XML file displayed in the DataGrid (Figure 10-13).
Figure 10-13. Populated DataGrid
202
CHAPTER 10
Creating a column chart
In your list of possible components, there is a folder called Charts. This folder holds all the different
kinds of charts that are available in Flex Builder (Figure 10-14).
You can see that there is a good variety of charts, and they are all customizable. We will be working
with the ColumnChart first.
1. Drag a ColumnChart onto the Students??™ Marks panel below the DataGrid. As you release the chart,
a dialog box will open where you can name the chart and specify the Series elements that it will
display. In our case, the elements will be the Quiz, Midterm, and Final marks for our students. Fill
in the ID field, and use the Add button to add elements, as shown in Figure 10-15. Also, leave the
Include legend check box selected.
Figure 10-15. Create
Chart dialog box
Figure 10-14. Charts in the
Components panel
203
EXPLORING FLEX CHARTING
2.
Pages:
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149