specify the x, y, height, and width properties of a rectangular range. : Column Chart Style « Chart « Flex






specify the x, y, height, and width properties of a rectangular range.

specify the x, y, height, and width properties of a rectangular range.
               

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



    <!-- charts/GetItemsInRangeExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="srv.send()" height="600" width="600">
    <fx:Declarations>
        <!--
            View source of the following page to see the structure of the data
            that Flex uses in this example.
        -->
        <mx:HTTPService id="srv"
            url="http://aspexamples.adobe.com/chart_examples/medals-xml.aspx" />
        <!--
            To see data in an HTML table, go to
            http://aspexamples.adobe.com/chart_examples/medals.aspx
        -->
    </fx:Declarations>
    <fx:Script> 
         
        import mx.charts.chartClasses.ChartBase; 
        import mx.charts.ChartItem; 
        import mx.charts.series.items.ColumnSeriesItem; 
        private function getItems(e:Event):void { 
            var x:Number = Number(ti1.text); 
            var y:Number = Number(ti2.text); 
            var h:Number = Number(ti3.text); 
            var w:Number = Number(ti4.text); 
            var r:Rectangle = new Rectangle(x, y, h, w); 
            // Get an Array of ChartItems in the defined area. 
            var a:Array = myChart.getItemsInRegion(r); 
            for (var i:int = 0; i<a.length; i++) { 
                var myChartItem:ColumnSeriesItem = ColumnSeriesItem(a[i]); 
                // Make items appear selected. 
                myChartItem.currentState = "selected"; 
                // Show values of the items that appear selected. 
                ta1.text += myChartItem.xValue.toString() + "=" + myChartItem.yValue.toString() + "\n"; 
            } 
        } 
      
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Panel id="p1" title="Selecting Items in Ranges">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <mx:ColumnChart id="myChart" height="207" width="350"
            showDataTips="true" dataProvider="{srv.lastResult.data.result}"
            selectionMode="multiple">
            <mx:series>
                <mx:ColumnSeries id="series1" yField="gold"
                    displayName="Gold" selectable="true" />
                <mx:ColumnSeries id="series2" yField="silver"
                    displayName="Silver" selectable="true" />
                <mx:ColumnSeries id="series3" yField="bronze"
                    displayName="bronze" selectable="true" />
            </mx:series>
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="country" />
            </mx:horizontalAxis>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}" direction="horizontal" />
        <s:Label text="Specify dimensions of a rectangle:" />
        <s:HGroup>
            <mx:Form>
                <mx:FormItem label="x">
                    <mx:TextInput id="ti1" text="20" width="50" />
                </mx:FormItem>
                <mx:FormItem label="y">
                    <mx:TextInput id="ti2" text="20" width="50" />
                </mx:FormItem>
            </mx:Form>
            <mx:Form>
                <mx:FormItem label="Height">
                    <mx:TextInput id="ti3" text="200" width="50" />
                </mx:FormItem>
                <mx:FormItem label="Width">
                    <mx:TextInput id="ti4" text="200" width="50" />
                </mx:FormItem>
            </mx:Form>
        </s:HGroup>
        <s:Button label="Select Items Inside Rectangle" click="ta1.text='';getItems(event)" />
        <s:TextArea id="ta1" height="100" width="300" />
    </s:Panel>
</s:Application>

   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.ColumnChart with Color GradientColumnChart with Color Gradient
2.Use SolidColorStoke to paint horizontalStrokeUse SolidColorStoke to paint horizontalStroke
3.Use SolidColorStoke to paint verticalStrokeUse SolidColorStoke to paint verticalStroke
4.Set fill colorSet fill color
5.background Elements for ColumnChartbackground Elements for ColumnChart
6.Remove Shadows for ColumnChartRemove Shadows for ColumnChart
7.Fill column with LinearGradientFill column with LinearGradient
8.Use GridLines as backgroundUse GridLines as background
9.LinearGradient fillLinearGradient fill
10.Formatting grid lines with ActionScriptFormatting grid lines with ActionScript
11.Formatting grid lines with MXMLFormatting grid lines with MXML
12.Chart With StyleChart With Style
13.Apply a custom drop shadow filter to a ColumnChart controlApply a custom drop shadow filter to a ColumnChart control
14.Creates a floating ColumnChart controlCreates a floating ColumnChart control
15.Alternatively, you can set the gutter properties inlineAlternatively, you can set the gutter properties inline
16.Define a custom component inline by using the tag.Define a custom component inline by using the <fx:Component> tag.
17.Add background to chartAdd background to chart
18.Add new grid lines as annotation elements to the chart and an image as the background element.Add new grid lines as annotation elements to the chart and an image as the background element.
19.Add an image to the chart and manipulate its propertiessAdd an image to the chart and manipulate its propertiess
20.Style tickStrokeStyle tickStroke
21.Style minorTickStrokeStyle minorTickStroke
22.Disabling axis labelsDisabling axis labels
23.Change the label alignment for the vertical and horizontal axes.Change the label alignment for the vertical and horizontal axes.