Flash AS3 Bar Chart Relationship
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.
//------------------------------
//--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);
}

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