Figure 10-26. Line chart MXML
If we have a look at our project so far, we can see how each line represents an assignment. Run the
project by clicking the green arrow in the main toolbar. Rolling over a point in the chart will tell you
the exact mark and who received it (Figure 10-27).
Figure 10-27. Line chart with data tips
If the data were to change right now, the change would happen without a transition. You can try this
by changing one of the grades in the DataGrid (this is why we made it editable). Just click on a grade
and enter a new value. To make the transition smooth, let??™s connect this chart to the interpolate animation
we created earlier.
208
CHAPTER 10
5. Return to the Source view for this chart and modify the line series, as shown in Figure 10-28.
Figure 10-28. Line chart MXML with animation
6. The addition of showDataEffect = "{chartChange}" tells the chart to use the animation that
we previously defined as chartChange when data is changed. While we are here, we can modify
the kind of line that gets used. Let??™s make the line curve (as opposed to being straight) by
adding form="curve" for each series, as shown in Figure 10-29.
Figure 10-29. Line chart MXML with form curve
Looking at our project now, we can see that the lines are curved and changing the data in the DataGrid
causes a smooth two-second change in the position of the point. As an added bonus, when the page
loads our chart grows from the base.
7. Now that we have created the transition, we can use the same transition on any of our other
charts by adding the same code to the series.
Pages:
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153