@namespace s "library://ns.adobe.com/flex/spark";
(...)
mx|PieSeries{
fills:#6B96D0,#5B7FB2,#81A4D0,#7EC2EA,#6B84A5,#686BD0,#6A8AD0;
}
.grayFill{
fill:#999999;
}
mx|ColumnChart
{
axisTitleStyleName:boldTitles;
}
.boldTitles{
fontWeight:bold;
}
FlexWebTestDrive.mxml
<s:Application ...>
<fx:Script>
<![CDATA[
(...)
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import mx.charts.series.items.PieSeriesItem;
protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void
{
currentState="DepartmentDetails";
deptColCht.dataProvider=createDataProvider(event.hitData.item);
expenseAxis.title=event.hitData.item.name+" Expenses";
estSeries.setStyle("fill",(event.hitData.chartItem as PieSeriesItem).fill);
}
protected function axisMoneyFormatter(labelValue:Object, previousValue:Object, axis:IAxis):String{
return moneyFormatter.format(labelValue);
}
protected function formatDeptPieTips(hitData:HitData):String{
return "<b>" + hitData.item.name + "</b><br/>"+"Budget: " + moneyFormatter.format(hitData.item.budget);
}
]]>
</fx:Script>
<fx:Declarations>
(...)
<s:SolidColorStroke id="dkgrayStrokeThick" color="#4D4D4D" weight="5"/>
<s:SolidColorStroke id="dkgrayStrokeThin" color="#4D4D4D" weight="1"/>
<s:CurrencyFormatter id="moneyFormatter" useCurrencySymbol="true"
currencySymbol="$" fractionalDigits="0"/>
</fx:Declarations>
(...)
<mx:PieChart id="deptPieCht" showDataTips="true"
itemClick="deptPieCht_itemClickHandler(event)"
dataTipFunction="formatDeptPieTips" .../>
(...)
<mx:ColumnChart id="deptColCht" includeIn="DepartmentDetails" x="337"
y="254" width="363" height="278" showDataTips="true">
<mx:series>
<mx:ColumnSeries id="estSeries" displayName="Estimated" yField="est"
showDataEffect="{interpolate}"/>
<mx:ColumnSeries displayName="Actual" yField="actual"
showDataEffect="{interpolate}" styleName="grayFill"/>
</mx:series>
<mx:horizontalAxis>
<mx:CategoryAxis id="expenseAxis" title="Expenses"
categoryField="field"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0"
maximum="500000" labelFunction="axisMoneyFormatter"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical"
axis="{amountAxis}" axisStroke="{dkgrayStrokeThick}"
tickStroke="{dkgrayStrokeThin}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{expenseAxis}"
axisStroke="{dkgrayStrokeThick}" tickStroke="{dkgrayStrokeThin}"/>
</mx:horizontalAxisRenderers>
</mx:ColumnChart>
<mx:Legend .../>
</s:Application>
Tutorial
In this tutorial, you customize the pie and column charts. You change fill, axis, and tick colors; rotate axis titles; format axis titles and labels; and format data tips.
Step 1: Set chart fill colors.
In FlexWebTestDrive.css, create a PieSeries type selector with the
fills style set to a list of at least seven colors (#6B96D0, #5B7FB2,#81A4D0, #7EC2EA, #6B84A5, #686BD0, #6A8AD0). Create a class selector called grayFill with fill set to some color (#5B7FB2). In FlexWebTestDrive.mxml, set the styleName property of the Actual ColumnSeries to grayFill.Your new selectors should appear as shown here:
mx|PieSeries{
fills:#6B96D0,#5B7FB2,#81A4D0,#7EC2EA,#6B84A5,#686BD0,#6A8AD0;
}
.grayFill{
fill:#5B7FB2;
}
Your ColumnSeries should appear as shown here:
<mx:ColumnSeries displayName="Actual" yField="actual" styleName="grayFill" .../>
Run the application and drill down into department data. You should see your new colors in the pie and column charts (see Figure 1). You will set the color of the first column series to match the color of the selected item in the pie chart next.
Figure 1. Customize the chart fill colors.
Step 2: Set a column fill color dynamically.
Assign the first ColumnSeries an id of estSeries and in the deptPieCht
itemClick handler, use setStyle() to set the fill style to the color of the selected pie chart item: (event.hitData.chartItem as PieSeriesItem).fill.Your ColumnSeries should appear as shown here:
<mx:ColumnSeries id="estSeries" displayName="Estimated" yField="est"
showDataEffect="{interpolate}"/>
Your handler should appear as shown here:
protected function deptPieCht_itemClickHandler(event:ChartItemEvent):void
{
currentState="DepartmentDetails";
deptColCht.dataProvider=createDataProvider(event.hitData.item);
expenseAxis.title=event.hitData.item.name+" Expenses";
estSeries.setStyle("fill",(event.hitData.chartItem as PieSeriesItem).fill);
}
Be sure to select PieSeriesItem from Code Assist so the appropriate import statement is written for you:
import mx.charts.series.items.PieSeriesItem;
Run the application. When you select a department in the pie chart, the first series in the column chart is now the same color (see Figure 2). Look at the position of the vertical axis title; you will flip this in the next step.
Figure 2. Match the colors of the selected pie chart item and the first column series.
Step 3: Rotate the axis title.
Set the LinearAxis
id to amountAxis and set the ColumnChart verticalAxisRenderers property to an instance of the AxisRenderer class. For the AxisRenderer, set the verticalAxisTitleAlignment style to vertical and the axis property to amountAxis.Your code should appear as shown here:
<mx:verticalAxis>
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0"
maximum="500000"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical"
axis="{amountAxis}"/>
</mx:verticalAxisRenderers>
Run the application. The vertical axis title should now be rotated (see Figure 3).
Figure 3. Rotate the vertical axis title.
Step 4: Make the axis titles bold.
In FlexWebTestDrive.css, create a ColumnChart type selector and set
axisTitleStyleName to a class selector called boldTitles. Create the class selector called boldTitles and set its fontWeight to bold.Your selectors should appear as shown here:
mx|ColumnChart
{
axisTitleStyleName:boldTitles;
}
.boldTitles{
fontWeight:bold;
}
Run the application. The axis titles should now be bold (see Figure 4).
Figure 4. Make the axis titles bold.
Step 5: Set axis and tick colors.
In the Declarations block, create a SolidColorStroke object called dkgrayStrokeThick and set its
color (#4D4D4D) and its weight (5). Create a second SolidColorStroke object called dkGrayStrokeThin and set its color (#4D4D4D) and its weight (1). In the ColumnChart verticalAxisRenderer, set axisStroke and tickStroke to the dkgrayStrokeThick and dkgrayStrokeThin objects. Set the horizontalAxisRenderersaxis to expenseAxis and its stroke styles the same as the other renderer.Your declarations should appear as shown here:
<s:SolidColorStroke id="dkgrayStrokeThick" color="#4D4D4D" weight="5"/>
<s:SolidColorStroke id="dkgrayStrokeThin" color="#4D4D4D" weight="1"/>
Your axis renderers should appear as shown here:
<mx:verticalAxisRenderers>
<mx:AxisRenderer verticalAxisTitleAlignment="vertical"
axis="{amountAxis}" axisStroke="{dkgrayStrokeThick}"
tickStroke="{dkgrayStrokeThin}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{expenseAxis}"
axisStroke="{dkgrayStrokeThick}" tickStroke="{dkgrayStrokeThin}"/>
</mx:horizontalAxisRenderers>
Run the application. The axes and ticks should now be dark gray (see Figure 5).
Figure 5. Change the axis and tick colors.
Step 6: Format axis labels as currencies.
In the Declarations block, create a Spark CurrencyFormatter called moneyFormatter and set its properties to format in your currency. In the LinearAxis tag, set its
labelFunction to axisMoneyFormatter. In the Script block, include the formatter function shown below.Here is an example of currency displayed in US dollars with no decimal places:
<s:CurrencyFormatter id="moneyFormatter" useCurrencySymbol="true" currencySymbol="$" fractionalDigits="0"/>
Your LinearAxis should appear as shown here:
<mx:LinearAxis id="amountAxis" title="Amount" minimum="0" maximum="500000" labelFunction="axisMoneyFormatter"/>
Here is the formatter function to place in your Script block:
import mx.charts.chartClasses.IAxis;
protected function axisMoneyFormatter(labelValue:Object,
previousValue:Object, axis:IAxis):String{
return moneyFormatter.format(labelValue);
}
This function is called by the chart component for every label on the vertical axis. Its method signature (its arguments and return type) are defined by the component using it. You can look up the method's required signature in the API for the LinearAxis class.
Run the application. The vertical axis labels should now be formatted as currencies (see Figure 6).
Figure 6. Format the vertical axis labels as currencies.
Step 7: Format data tips.
Set the PieChart
dataTipFunction to formatDeptPieTips. In the Script block, include the formatter function shown below.Your PieChart opening tag should appear as shown here:
<mx:PieChart id="deptPieCht" includeIn="DepartmentChart,DepartmentDetails"
x="50" y="250" width="282" height="282"
dataProvider="{deptDg.dataProvider}" showDataTips="true"
itemClick="deptPieCht_itemClickHandler(event)"
dataTipFunction="formatDeptPieTips">
Here is the formatter function to place in your Script block:
import mx.charts.HitData;
protected function formatDeptPieTips(hitData:HitData):String{
return "<b>"+hitData.item.name+"</b><br/>"+"Budget: "
+moneyFormatter.format(hitData.item.budget);
}
This function is called by the chart component before displaying every data tip. Just as for the labelFunction in the last step, its method signature is defined by the component using it, the PieChart, and you can look it up in the API for the PieChart class. Notice you can use basic HTML formatting in this function.
Run the application. The pie chart data tips should now be formatted to display currency amounts (see Figure 7).
Figure 7. Format data tips.
In this module you learned to add charts to your Flex application. You used a pie chart and a column chart and accomplished all the common customization tasks including drilling down into data; animating data changes; and formatting fills, axes, titles, labels, and data tips.
This concludes your Test Drive of Flash Builder 4.5. In less than a day, you learned to build a Flex application that retrieves, displays, updates, adds, and deletes data in a database and you learned to debug, deploy, customize, and add charts to this application (see Figure 8). To build on your knowledge, continue on to the Flex in a Week training.
Figure 8. Browse the finished application.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.