You can see in Figure 10-20 that the
chart now shows our data clearly.
Figure 10-20. Our ColumnChart is now populated.
205
EXPLORING FLEX CHARTING
Controlling the visual appearance of a chart through CSS
The colors and the fonts at this stage are set by Flex Builder. One way to change the appearance of a
chart is through CSS. An example CSS file, called BarChartStyle.css, is included within the
FlexCharting-Base project that you imported at the beginning of this chapter. If you open the file by
double-clicking on it, you can see the form of the CSS for a chart (Figure 10-21).
Figure 10-21. ColumnChart CSS
You can see the font is set for the entire chart, and individual colors are set for each series. Notice also
that the CSS defines which kind of chart we want to apply this to. To connect this CSS to the chart, add
the code in Figure 10-22 to the MXML in the Source view. This is the same technique that we have
used in previous examples to connect a CSS file. By convention, this code is placed before the
ActionScript in the MXML.
Figure 10-22. Adding CSS to our project
Creating a line chart with animation
One of the interesting features about Flex charts is that it is fairly easy to create smooth transitional
animations when the data changes. You can have the chart interpolate (gradually move the points on
the chart from the current position to the new position), zoom (scale the chart data), and slide (gradually
move the points off the chart and then bring them back to the new position).
Pages:
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151