| Depending on the type of chart you are using, there are one or more steps necessary before a chart will be drawn. All charts, regardless of type, require that you specify one or more series of data for the charts. Any of the Cartesian charts also require that you specify the horizontal and/or vertical axes. A series is a set of data provided to a chart. Depending on the type of chart you are using, there are different Series classes to use. #Series Class Name | Description |
|---|
AreaSeries | The AreaSeries class defines a data series for an AreaChart control. | AreaSet | AreaSet is a grouping set that can be used to stack AreaSeries in any arbitrary chart. | BarSeries | The BarSeries class defines a data series for a BarChart control. | BarSet | BarSet is a grouping set that can be used to stack or cluster BarSeries in any arbitrary chart. | BubbleSeries | The BubbleSeries class defines a data series for a BubbleChart control. | CandleStickSeries | The CandleStickSeries class represents financial data as a series of candlesticks representing the high, low, opening, and closing values of a data series. | ColumnSeries | The ColumnSeries class defines a data series for a ColumnChart control. | ColumnSet | ColumnSet is a grouping set that can be used to stack or cluster ColumnSeries in any arbitrary chart. | HLOCSeries | The HLOCSeries class represents financial data as a series of elements representing the high, low, closing, and optionally opening values of a data series. | LineSeries | The LineSeries class defines a data series for a LineChart control. | PieSeries | The PieSeries class defines the data series for a PieChart control. | PlotSeries | The PlotSeries class defines a data series for a PlotChart control. |
Although it's not as common a use case, many charts allow you to mix and match different series within the same chart, so it is possible to overlay a line chart above a column chart, for example. Specifying the Charts Series In this next section, you will make the charts functional by adding the required series elements. | | 1. | Open Dashboard.mxml and change the <v:ChartPod > to use <v:SalesChart > instead. Change the <v:ChartPod > tag to use <v:TypeChart >, and change <v:ChartPod > to use <v:ComparisonChart >. Leave the rest of the attributes exactly as they were.
<v:SalesChart width="100%" height="100%" title="Sales Chart" maximize="this.currentState='fullSales'" restore="this.currentState=''"> </v:SalesChart> <mx:VBox width="100%" height="100%"> <v:TypeChart width="100%" height="100%" title="Category Chart" maximize="this.currentState='fullType'" restore="this.currentState=''"> </v:TypeChart> <v:ComparisonChart width="100%" height="100%" title="Comparison Chart" maximize="this.currentState='fullComp'" restore="this.currentState=''"> </v:ComparisonChart> </mx:VBox>
You will start to make the charts functional, but you will need to call them from the Dashboard application to see it function.
| 2. | Add a new attribute to both the <v:SalesChart> and <v:TypeChart> tags, binding the selection.data of the grossOrNetGroup to the grossOrNet property.
<v:SalesChart width="100%" height="100%" title="Sales Chart" grossOrNet="{grossOrNetGroup.selection.data}" maximize="this.currentState='fullSales'" restore="this.currentState=''"> </v:SalesChart> <mx:VBox width="100%" height="100%"> <v:TypeChart width="100%" height="100%" title="Category Chart" grossOrNet="{grossOrNetGroup.selection.data}" maximize="this.currentState='fullType'" restore="this.currentState=''"> </v:TypeChart> ... </mx:VBox>
This will pass the string GROSS or NET, whichever value the user selects from the radio buttons into the SalesChart and TypeChart components. You don't need to pass this string to the ComparisonChart because it will ultimately show both net and gross sales at once.
| 3. | Open TypeChart.mxml from the flexGrocer/views/dashboard directory.
Alternately, you can open TypeChart_initial from the intermediate directory and save it as TypeChart.mxml in your flexGrocer/views/dashboard directory.
| | | 4. | Between the open and close <mx:PieChart> tags, add an <mx:series> tag pair. Inside the <mx:series> tag, create an <mx:PieSeries> tag with the field attribute bound to grossOrNet.
<mx:PieChart width="100%" height="100%" dataProvider="{dp}"> <mx:series> <mx:PieSeries field="{grossOrNet}"> </mx:PieSeries> </mx:series> </mx:PieChart>
When using the <mx:PieSeries>, you need to specify which property to render in the chart. By binding that property to grossOrNet, the chart will show either the gross or net sales, based on which radio button the user selected in the main application.
Save and test the Dashboard application. At this point, the pie chart should be functional.
| | | 5. | Add a labelPosition attribute to the <mx:PieSeries> tag, specifying insideWithCallout as the value.
<mx:PieSeries labelPosition="insideWithCallout" field="{grossOrNet}">
The label position specifies how to render labels. The valid values are as follows:
- "none" Do not draw labels. This is the default.
- "outside" Draw labels around the boundary of the pie.
- "callout" Draw labels in two vertical stacks on either side of the pie. The pie shrinks if necessary to make room for the labels.
- "inside" Draw labels inside the chart, centered approximately 7/10 of the way along each wedge. Shrink labels to ensure that they do not interfere with each other. If labels shrink below the calloutPointSize property, Flex removes them. When two labels overlap, Flex gives priority to labels for larger slices.
- "insideWithCallout" Draw labels inside the pie, but if labels shrink below a legible size, Flex converts them to callouts.
Save and test the application again. Notice that the labels are showing the value, but not the category name, as might be expected.
| 6. | In the <mx:Script> block, create a new function called renderLabel(), which takes four arguments, and returns a String. The function should return item.CATEGORY.
private function renderLabel(item:Object, field:String, index:int, pct:Number):String{ return item.CATEGORY; }
You will use this label function to tell the chart which field to render as its label. For a PieSeries, the label function is automatically passed four arguments:
itemcontains the object being graphed. In your pie chart, to show the category name, you want to return the item.CATEGORY. fielda string that contains the field (NET or GROSS in your app), which is being graphed. indexthe item number being graphed. pctthe percentage of the pie for this item.
| | | 7. | Specify the labelFunction attribute of the <mx:PieSeries> to be renderLabel.
<mx:PieSeries labelPosition="insideWithCallout" field="{grossOrNet}" labelFunction="renderLabel">
Save and test the application. You should now see the labels rendering properly. This file should resemble TypeChart_labels.mxml in the intermediate directory.
| 8. | Open SalesChart.mxml from your flexGrocer/views/dashboard directory.
Alternately, you can open SalesChart_initial.mxml from the intermediate directory and save it as SalesChart.mxml in your flexGrocer/views/dashboard directory.
| 9. | After the opening <mx:LineChart> tag, add an <mx:series> tag; within the <mx:series>, add an <mx:LineSeries> tag with the yField attribute bound to grossOrNet.
<mx:LineChart dataProvider="{dp}" height="100%" width="100%"> <mx:series> <mx:LineSeries yField="{grossOrNet}"> </mx:LineSeries> </mx:series> </mx:LineChart>
You are telling the LineChart that the selected property (either gross or net) will be the field that defines the value for the y-axis.
| | | 10. | Save SalesChart.mxml and run the application.
The chart is now rendering. Notice, however, that the labels along the axis have no bearing on the data they represent. You will fix this in the next exercise when you specify the horizontal and vertical axes. This file should resemble SalesChart_labels.mxml in the intermediate directory.
| 11. | Open ComparisonChart.mxml from your flexGrocer/views/dashboard directory.
Alternately, you can open ComparisonChart_initial.mxml from the intermediate directory and save it as ComparisonChart.mxml in your flexGrocer/views/dashboard directory.
| | | 12. | Specify two column seriesone for the yField set to GROSS and one with a yField set to NET.
<mx:ColumnChart dataProvider="{dp}" width="100%" height="100%"> <mx:series> <mx:ColumnSeries yField="GROSS"> </mx:ColumnSeries> <mx:ColumnSeries yField="NET"> </mx:ColumnSeries> </mx:series> </mx:ColumnChart>
This chart takes two different Seriesone to plot a day's gross sales; the other to show the day's profit (net sales).
| 13. | Save ComparisonChart.mxml and run the application.
The column chart is now rendering, showing columns for both gross and net sales. Notice, however, that the labels along the horizontal axis are index numbers, not the dates you would expect. You will fix this in the next exercise when you specify the horizontal axis. This file should resemble ComparisonChart_labels.mxml in the intermediate directory.
|
|
