| In this first exercise, you will use the Charting components to lay out the basics of three chart types: type chart, sales chart and comparison chart. The skeleton files for the three charts are provided for you in the Lesson18/assets directory. Up to this point, each skeleton file only contains a DataGrid component with data relating to products sold. You will now start to add charts to visualize this data as well. 1. | Open TypeChart.mxml from the Lesson18/assets directory and save it to your flexGrocer/views/dashboard directory.
| 2. | Inside the first <mx:VBox> within the <mx:ViewStack> add an <mx:PieChart>, with a height and width of 100% and a dataProvider bound to dp.
<mx:ViewStack width="100%" height="100%"> <mx:VBox width="100%" height="100%"> <mx:PieChart width="100%" height="100%" dataProvider="{dp}"> </mx:PieChart> </mx:VBox> <mx:VBox width="100%" height="100%"> <mx:DataGrid dataProvider="{dp}"> ... </mx:ViewStack>
This is the skeleton of a pie chart, which requires that you specify one or more series before it will be rendered. You will do this in a later exercise.
| 3. | Save TypeChart.mxml.
As was mentioned earlier, there are several elements necessary before a chart will render. If you run the application now, no chart will appear. We need to provide more information, which you will do in the next exercise. The file at this point should resemble TypeChart_initial in the intermediate directory.
| | | 4. | Open SalesChart.mxml from the Lesson18/assets directory and save it to your flexGrocer/views/dashboard directory.
| 5. | Inside the first <mx:VBox> tag within the <mx:ViewStack> tag, add an <mx:LineChart> tag with a dataProvider bound to dp, and a height and width of 100%.
<mx:VBox width="100%" height="100%"> <mx:LineChart dataProvider="{dp}" height="100%" width="100%"/> </mx:VBox>
This is the skeleton of a line chart. Before it works properly, a line chart requires one or more series, as well as its axis. You will do this in a later exercise.
| 6. | Save SalesChart.mxml.
The file at this point should resemble SalesChart_initial in the intermediate directory.
| 7. | Open ComparisonChart.mxml from the Lesson18/assets directory and save it to your flexGrocer/views/dashboard directory.
| 8. | Inside the first <mx:VBox> tag within the <mx:ViewStack> tag, add an <mx:ColumnChart> tag with a height and width of 100% and a dataProvider bound to dp.
<mx:VBox> <mx:ColumnChart dataProvider="{dp}" width="100%" height="100%"/> </mx:VBox>
This is the skeleton of the column chart, which requires you to specify one or more series, as well as a vertical axis, before it will work. You will do so in a later exercise.
| 9. | Save ComparisonChart.mxml.
If you run the application now, no chart will appear because you need to provide more information, such as the series and axis data. The file at this point should resemble ComparisonChart_initial in the intermediate directory.
|
|
