package chart{

    import mx.core.UIComponent;
    import flash.geom.Matrix;
    import flash.display.GradientType;
    import flash.display.SpreadMethod;
    import flash.display.InterpolationMethod;

    public class Chart1 extends UIComponent {

        internal var _barWidth : Number = 20;

        internal var _value1 : Number = 50;

        public function get value1() : Number {
            return _value1;
        }

        public function set value1(value: Number) : void {
            this._value1 = value;
            invalidateProperties();
            invalidateSize();
            invalidateDisplayList();
        }

        override protected function measure() : void {
            measuredHeight    = _value1;
            measuredMinHeight = _value1;
            measuredWidth     = _barWidth;
            measuredMinWidth  = _barWidth;

        }

        override protected function updateDisplayList(
            unscaledWidth:Number, unscaledHeight:Number):void {

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            graphics.clear();
            graphics.lineStyle(1, 0x000000, 1.0);

            graphics.beginFill(0x00ff00, 1.0);

            graphics.drawRect(0, 0, 20, _value1);

        }
    }
}

/* USAGE

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:jenkov="chart.*" backgroundColor="#ffffff">

    <mx:Script>

     <![CDATA[
        public function updateChartValue() : void {
            myChart.value1 = new Number(textField.text);
        }
    ]]>

    </mx:Script>


    <mx:Panel width="100%" height="100%"
        title="A Basic Chart Component in a Flex Panel">
        <mx:VBox height="100%">
            <jenkov:Chart1 id="myChart" x="0" y="0" />
            <mx:TextInput id="textField" text="50"/>
            <mx:Button label="Update Chart" click="updateChartValue()"/>
        </mx:VBox>
    </mx:Panel>

</mx:Application>


*/

Flex Custom Component Skeleton

Flex

ActionScript 3