User manual ADOBE FLEX 4.5

[. . . ] 5 introduces new features and continues to build upon the major architectural changes in Flex 4. If you are a new Flex developer, and have not previously developed applications in Flex, you can use the many available resources to learn more about Flex. For more information on the resources available for new Flex developers, see « Getting started with Flex 4. If you are an existing Flex developer, you can use the information in « Migration » à la page 2 to decide how best to upgrade your applications to the newest SDK. [. . . ] Private var chartHasLine:Boolean = true; private function handleChange(event:Event):void { var sci:ColumnSeriesItem = ColumnSeriesItem(myChart. Clear()" label="Clear Line"/> </s:HGroup> <s:HGroup> <s:VGroup> <s:Label <s:Label <s:Label </s:VGroup> <s:VGroup> <s:Label <s:Label <s:Label </s:VGroup> </s:HGroup> </s:Panel> </s:Application> text="First Item"/> id="l1"/> id="l2"/> text="Second Item"/> id="l3"/> id="l4"/> The following example uses the addDataChild() method to add children to the data canvas. It adds labels to each of the columns that you select in the ColumnChart control. -- View source of the following page to see the structure of the data that Flex uses in this example. Text = "Profit: " + value2; chartHasLine = true; } private var s1:String = new String(); private var s2:String = new String(); private var v1:Number = new Number(); private var v2:Number = new Number(); // Set this to true initially so that the chart doesn't // draw a line when the first item is clicked. Private var chartHasLine:Boolean = true; private function handleChange(event:Event):void { var sci:ColumnSeriesItem = ColumnSeriesItem(myChart. Profit; addLabelsToColumn(s2, v2); connectTwoPoints(s1, v1, s2, v2); } } [Bindable] public var columnLabel:Label; private function addLabelsToColumn(s:String, n:Number):void { columnLabel = new Label(); columnLabel. Text = s + ": " + "$" + n; // This adds any DisplayObject as child to current canvas. Result}" selectionMode="single" change="handleChange(event)"> <mx:annotationElements> <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/> </mx:annotationElements> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries id="series1" xField="month" yField="profit" displayName="Profit" selectable="true"/> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{myChart}"/> <s:Button id="b1" label="Connect Two Points" click="connectTwoPoints('Jan', 2000, 'Mar', 1500);"/> <s:HGroup> <s:VGroup> <s:Label <s:Label <s:Label </s:VGroup> <s:VGroup> <s:Label <s:Label <s:Label </s:VGroup> </s:HGroup> </s:Panel> </s:Application> text="First Item"/> id="l1"/> id="l2"/> text="Second Item"/> id="l3"/> id="l4"/> You can access an array of the data children by using the dataChildren property of the canvas. This property is an array of the child objects on the canvas. 5 Using data-driven UI components 1395 Using offsets for data coordinates The data canvas classes also let you add offsets to the position of data graphics. You do this by defining the data coordinates with the CartesianCanvasValue constructor rather than passing a data coordinate to the drawing or addDataChild() methods. When you define a data coordinate with the CartesianCanvasValue, you pass the data coordinate as the first argument, but you can pass an offset as the second argument. The following example lets you specify an offset for the labels with an HSlider control. This offset is used when adding a data child to the canvas. -- View source of the following page to see the structure of the data that Flex uses in this example. Text = "Profit: " + value2; chartHasLine = true; } private var s1:String = new String(); private var s2:String = new String(); private var v1:Number = new Number(); private var v2:Number = new Number(); // Set this to true initially so that the chart doesn't // draw a line when the first item is clicked. Private var chartHasLine:Boolean = true; private function handleChange(event:Event):void { var sci:ColumnSeriesItem = ColumnSeriesItem(myChart. Profit; addLabelsToColumn(s2, v2); connectTwoPoints(s1, v1, s2, v2); } } [Bindable] public var labelOffset:Number = 0; [Bindable] public var columnLabel:Label; private function addLabelsToColumn(s:String, n:Number):void { columnLabel = new Label(); columnLabel. Text = s + ": " + "$" + n; // Use the CartesianCanvasValue constructor to specify // an offset for data coordinates. AddDataChild(columnLabel, new CartesianCanvasValue(s, labelOffset), new CartesianCanvasValue(n, labelOffset) ); } ]]></fx:Script> <s:Panel title="Column Chart"> <s:layout> <s:VerticalLayout/> </s:layout> <mx:ColumnChart id="myChart" dataProvider="{srv. Value"/> </s:Panel> </s:Application> Using multiple axes with data canvases A CartesianDataCanvas is specific to a certain data space, which is defined by the bounds of the axis. [. . . ] For example, some browsers display the title as a ToolTip. Audio user agents might speak the title information in a similar context. Title String type String Specifies the content type for the data specified by the data property. The type property is optional but recommended when data is specified; it prevents the browser from loading unsupported content types. [. . . ]