Flash AS3 Bar Chart Relationship

Posted on 11/22/10 by David Sharek No Comments

I was recently asked to work on a little bit of code that would limit the height of a variable number of bar chart bars to a combined 100% of the total height of the graph. For example, if one bar was at 70%, another bar could only be incremented to 30%. In this example I have five bars. It was a fun little challenge so I thought I would share the code snippet. My initial few attempts were met with a lot of rounding issues since I didn’t want the solution to be limited to specific graph heights, or numbers of bars. I don’t claim to have the best code, but I do enjoy these little challenges, and the solution seems to work quite smoothly. Click here for the zipped Flash CS5 File.



import flash.display.MovieClip;
//------------------------------
//--INIT VARS
//------------------------------
var graphHeight:int = graphMC.height;
var barInc:int = (graphHeight / 100);
//used to temporarily store which atribute is being clicked + or -;
var who:String;
//total height of all bars
var totalHeight:int = 0;
//number of bars
var totalBars:int = 5;

//------------------------------
//--INIT FUNCTION
//------------------------------
init();
function init():void {
    for (var i=0; i<totalBars; i++) {
        //set all the bars to 0 height
        this["bar_" + i].height = 0;
        //makes the mouse hand show up on rollover
        this["minus_" + i].buttonMode = true;
        this["plus_" + i].buttonMode = true;
        //plus button events
        this["plus_" + i].addEventListener(MouseEvent.MOUSE_DOWN,f_plus_start,false,0,false);
        this["plus_" + i].addEventListener(MouseEvent.MOUSE_UP,f_plus_stop,false,0,false);
        this["plus_" + i].addEventListener(MouseEvent.MOUSE_OUT,f_plus_stopOver,false,0,false);
        //minus button events;
        this["minus_" + i].addEventListener(MouseEvent.MOUSE_DOWN,f_minus_start,false,0,false);
        this["minus_" + i].addEventListener(MouseEvent.MOUSE_UP,f_minus_stop,false,0,false);
        this["minus_" + i].addEventListener(MouseEvent.MOUSE_OUT,f_minus_stopOver,false,0,false);
        //I just set the num to the i for each element, so they always know who they are.;
        this["bar_" + i].num = i;
        this["minus_" + i].num = i;
        this["plus_" + i].num = i;
    }
}

//------------------------------
//--MINUS BUTTON
//------------------------------
function f_minus_start(evt:MouseEvent):void {
    //string used to construct the mc
    who = "bar_" + evt.target.num;
    addEventListener(Event.ENTER_FRAME, f_minus);
}
function f_minus_stop(evt:MouseEvent):void {
    removeEventListener(Event.ENTER_FRAME, f_minus);
    who = undefined;
}
function f_minus_stopOver(evt:MouseEvent):void {
    removeEventListener(Event.ENTER_FRAME, f_minus);
    who = undefined;
}
function f_minus(evt:Event):void {
    if (this[who].height - barInc >= 0) {
        this[who].height -=  barInc;
        totalHeight--;
        updateTxt();
    }
}

//------------------------------
//--PLUS BUTTON
//------------------------------
function f_plus_start(evt:MouseEvent):void {
    who = "bar_" + evt.target.num;
    addEventListener(Event.ENTER_FRAME, f_plus);
}
function f_plus_stop(evt:MouseEvent):void {
    f_plus_stopAll();
}
function f_plus_stopOver(evt:MouseEvent):void {
    if (evt.buttonDown == true) {
        f_plus_stopAll();
    }
}
function f_plus_stopAll() {
    removeEventListener(Event.ENTER_FRAME, f_plus);
    who = undefined;
}
function f_plus(evt:Event):void {
    //if the height of the bar + the next increment won't exceed the height of the graph
    if (totalHeight == 100) {
        reOrder(this[who].num);
    }
    else if (totalHeight + 1 <= 100) {
        this[who].height +=  barInc;
        totalHeight++;
        updateTxt();
    }
}

//------------------------------
//--ORDER BAR
//------------------------------
function reOrder(num:int):void {

    var upBars:Array=new Array();

    for (var i=0; i<totalBars; i++) {
        if (i != num && this["bar_" + i].height > 0) {
            upBars.push(i);
        }
    }

    var clickedBar:MovieClip=this[("bar_"+num)];
    clickedBar.height += (barInc*(upBars.length));

    for (var k=0; k<upBars.length; k++) {
        var tmpBar:MovieClip = this[("bar_" + upBars[k])];
        tmpBar.height -=  barInc;
    }

    updateTxt();
}

//------------------------------
//--UPDATE TXT
//------------------------------
function updateTxt():void {
    for (var i:int=0; i<totalBars; i++) {
        var tmpBar:MovieClip = this["bar_" + i];
        this["txt_" + i].text=String(Math.round((tmpBar.height/graphHeight)*100));
    }
    totalTxt.text = String(totalHeight);
}


Creative Commons License
The work on this page is licensed under a
Creative Commons Attribution-ShareAlike 3.0 Unported License.

Post a Comment

Your email is never published or shared. Required fields are marked *