| Adding a legend to a Flex chart is incredibly easy. The <mx:Legend> tag requires only one argument, dataProvider, which is bound to the chart. There are several other attributes you can use to further customize the legend, a couple of the commonly used ones are as follows: labelPlacement Just like the labelPlacement of a check box or radio button, this indicates if the label should be left, right, top, or bottom as compared with the colored square that identifies the data. direction Indicates if the items in the legend should be laid out vertically or horizontally.
1. | Open ComparisonChart.mxml from your flexGrocer/views/dashboard directory. Alternately, you can open ComparisonChart_labelFunctions.mxml from the intermediate directory and save it as ComparisonChart.mxml in your flexGrocer/views/dashboard directory. | | | 2. | Inside the <mx:VBox>, before the <mx:ColumnChart> tag, add an <mx:Legend> tag with the direction set to horizontal and the dataProvider bound to chart. <mx:VBox> <mx:Legend direction="horizontal" dataProvider="{chart}"/> <mx:ColumnChart dataProvider="{dp}" width="100%" height="100%"> ... </mx:VBox> This should create a legend placed horizontally which appears before the chart inside the <mx:VBox>. | 3. | Find the <mx:ColumnSeries> tag for the GROSS column. Add a displayName attribute with the value Gross. Find the <mx:ColumnSeries> tag for the NET column. Add a displayName attribute with the value of Net. <mx:series> <mx:ColumnSeries yField="GROSS" displayName="Gross" > </mx:ColumnSeries> <mx:ColumnSeries yField="NET" displayName="Net" > </mx:ColumnSeries> </mx:series> The displayName indicates what should be shown in the legend. | 4. | Save and run the application. You should see a legend appear above the comparison chart. The current file should resemble ComparisonChart_legend.mxml in the intermediate directory.
|
|