Bar Graph

[pinalbhuta]

Hi,

I am trying to create bar chart like this with xml driven data, i have written a script for that I want to connect x-axis with my bar height. how do i do it?

Can any one help me for that,

My script is,

package
{
    import fl.transitions.Tween;
    import fl.transitions.easing.Strong;
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.events.Event;
    import flash.filters.DropShadowFilter;
    public class PS extends Sprite
    {        private var graphContainer:Sprite = new Sprite();
        private var xmlFile:XML;
        private var urlLoader:URLLoader = new URLLoader();
        private var totalBars:Number;
        private var tween:Tween;
        private var tf:TextFormat = new TextFormat();
       
        public function PS():void
        {
            /* Text Format */
           
            tf.color = 000099;
            tf.size = 40;
            tf.font = "Century Gothic";            createGraphContainer();
            loadXML();
            createBars();
           
        }        private function createGraphContainer():void
        {
            graphContainer.graphics.lineStyle(1, 0x9C9C9E);
            graphContainer.graphics.moveTo(30,30);
            graphContainer.graphics.lineTo(30, 100);
            graphContainer.graphics.lineTo(325, 100);
            graphContainer.graphics.lineTo(325, 30);
            graphContainer.x = 50;
            graphContainer.y = 50;            addChild(graphContainer);
        }        private function loadXML(file:String = "PS.xml"):void
        {
            urlLoader.load(new URLRequest(file));
            urlLoader.addEventListener(Event.COMPLETE, parseXML);
           
        }        private function parseXML(e:Event):void
        {
            xmlFile = new XML(e.target.data);
            totalBars = xmlFile.children().length();            createBars();
        }        private function createBars():void
        {
            for (var i:Number = 0; i < totalBars; i++)
            {
                var bar:Sprite = new Sprite();
               
                bar.graphics.beginFill(xmlFile.children().@color);
                bar.graphics.drawRect(0,0, xmlFile.@width, xmlFile.children().@value);
                bar.graphics.endFill();
               
               
                bar.x = 150 + (xmlFile.@width * i) + (80*i);
                bar.y = 150 - bar.height;                var val:TextField = new TextField();                val.defaultTextFormat = tf;
                val.autoSize = TextFieldAutoSize.RIGHT;
                val.text = xmlFile.children(). @ value;                val.x = 110 + (xmlFile.@width * i) + (80*i);
                val.y = 160 - bar.height;                tween = new Tween(bar,"height",Strong.easeOut,15,bar.height,1,true);
               
                addChild(bar);
                addChild(val);
            }
        }
           }
}

[Guest]

You know the height of each bar, from your xml, so you just need to store the max height in some variable like:

private function createBars():void
{
    var maxHeight = 0;and then in the for loop:    if(bar.height > maxHeight){
    maxHeight = barHeight;
    }So then you have the height of the tallest bar. You then just need to decide how to segment the axis, and what to start at.Say your maxHeight is 1185 - from the pic. So, you might start at 1200. If you want increments of 100 on the axis then 1200 / 100 = 12 - you need 12 segments in the axis space - whatever that is.Let's assume it's 600 pixels tall... so 600 / 12 = 50Then all you need to do is add a label every 50 pixels along the axis.HTH