Creates a floating ColumnChart control

             

<!--
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/MinFieldColumn.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"
    height="600">
    <fx:Script> 
        import mx.collections.ArrayCollection; 
        [Bindable] 
        public var expenses:ArrayCollection = new ArrayCollection([ 
            {Month:"Jan", Revenue:1200, Expenses:500}, 
            {Month:"Feb", Revenue:1200, Expenses:550}, 
            {Month:"Mar", Revenue:1240, Expenses:475}, 
            {Month:"Apr", Revenue:1300, Expenses:600}, 
            {Month:"May", Revenue:1420, Expenses:575}, 
            {Month:"Jun", Revenue:1400, Expenses:600}, 
            {Month:"Jul", Revenue:1500, Expenses:600}, 
            {Month:"Aug", Revenue:1600, Expenses:750}, 
            {Month:"Sep", Revenue:1600, Expenses:735}, 
            {Month:"Oct", Revenue:1750, Expenses:750}, 
            {Month:"Nov", Revenue:1800, Expenses:800}, 
            {Month:"Dec", Revenue:2000, Expenses:850} 
        ]); 
      </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Panel title="Floating Column Chart">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <mx:ColumnChart dataProvider="{expenses}" showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{expenses}"
                    categoryField="Month" />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries yField="Revenue" minField="Expenses"
                    displayName="Revenue" />
            </mx:series>
        </mx:ColumnChart>
    </s:Panel>
</s:Application>

Related examples in the same category

1.	ColumnChart with Color Gradient
2.	Use SolidColorStoke to paint horizontalStroke
3.	Use SolidColorStoke to paint verticalStroke
4.	Set fill color
5.	background Elements for ColumnChart
6.	Remove Shadows for ColumnChart
7.	Fill column with LinearGradient
8.	Use GridLines as background
9.	LinearGradient fill
10.	Formatting grid lines with ActionScript
11.	Formatting grid lines with MXML
12.	Chart With Style
13.	Apply a custom drop shadow filter to a ColumnChart control
14.	Alternatively, you can set the gutter properties inline
15.	Define a custom component inline by using the tag.
16.	specify the x, y, height, and width properties of a rectangular range.
17.	Add background to chart
18.	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 propertiess
20.	Style tickStroke
21.	Style minorTickStroke
22.	Disabling axis labels
23.	Change the label alignment for the vertical and horizontal axes.

Creates a floating ColumnChart control : Column Chart Style « Chart « Flex

Related examples in the same category