Tag: Flex

Find all unique values from array or collection

Find all unique values from array or collection

I needed a quick/simple method to iterate through a collection of data and pull out just the unique values.
So if you had a collection that looked like





  
  
  
  
  
  
  
  
 
 

Then you only have 3 unique values (A, B & C).

So I came up with a method that is effectively a single pass through the data.
It uses a dictionary, and the value of the objects inside the AC for the key.

So if you have a dictionary variable dict, then if you have a value of ‘XX’ and you use that as the key (dict[‘XX’] = ‘XX’) then if you have another value of ‘XX’ and assign that to dict[‘XX’] = ‘XX’ then the previous entry gets overwritten giving you a set of unique values.

Its just a case of then getting the value out of the dictionary and back into an AC. (dictionary’s are not Bindable like AC’s)

//takes an AC and the filters out all duplicate entries
public function getUniqueValues (collection : ArrayCollection) : ArrayCollection {
	var length : Number = collection.length;
	var dic : Dictionary = new Dictionary();

	//this should be whatever type of object you have inside your AC
	var value : Object;
	for(var i : Number = 0; i < length; i++){
		value = collection.getItemAt(i);
		dic[value] = value;
	}

	//this bit goes through the dictionary and puts data into a new AC
    var unique : ArrayCollection = new ArrayCollection();
    for(var prop : String in dic){
    	unique.addItem(dic[prop]);
    }
    return unique;
}

[ad name="ad-1"]

Exploding Pie Charts

Exploding Pie Charts

Flex is good, but see trying to get that last few bits out of it at times can be a pain. Take pie charts and the legends. What was required was a simple pie chart with the middle cut out (doughnut chart) and when you moused over the appropriate legend item it would expand the matching item in the pie chart. Surely that would be simple, yeah. Nope, it wasn’t and what I’ve done feels like a hack, but it works.

I’m not going to cover the creation of pie charts, if you want to know that then check out

http://blog.flexexamples.com/2007/10/13/creating-donut-shaped-pie-charts-using-the-innerradius-style/

and

http://blog.flexexamples.com/2007/11/06/exploding-wedges-in-a-flex-piechart-control/

So how did I do the exploding and keep it smooth?

Well first you must make sure the Lengend is listening for the itemMouseOver and Out event



After that you implement the over and out functions. Although you can get the itemMouseOver event you do not actual get a reference/index to what you have just moused over that you can use, so you have to go through the PieSeries data and check its labels against the label that comes with the event. Once you have that you can set the wedge explode radius (perWedgeExplodeRadius).

I also change the alpha value just to make things look a bit better. I also set a over flag so that if you mouse over the label/marker then mouse over it again you stop any flickering. If you mouse over the marker -> label this will result in a item mouse out & over event even though its the same item.

At the same time if an itemMouseOut event occurs i start a short timer before resetting the exploded radius. Again this just helps things look a little smoother.
 

private var pieSeries : PieSeries;

//Boolean value to make sure that the animation is smooth and that the correct item is exploded.
//the item out event gets fired when the mouse moves from label to the marker
private var over : Boolean = false;
//explode the section of the chart that was just moused over in the legend
private function explode(event : LegendMouseEvent) : void {
  if(delayTimer){//this will stop the legend, pie chart flickering as the user moves mouse from the label to the marker
     delayTimer.stop();
     delayTimer.removeEventListener(TimerEvent.TIMER, callAfterDelay);
  }

  var len : Number = PieSeries(event.item.source).legendData.length;
  var index : Number = 0;
  var arr:Array = new Array(len);
  if(over){
    event.item.alpha = 0.70;
  } else {
    event.item.alpha = 0.70;
    for(var i : Number = 0; i < len ; i++){
      //set the explode radius on the item that fired the over event
      //and make sure that the rest of the exploded radii are 0
      if(event.item.label == event.item.source.legendData[i].label){
        index = i;
        arr[i] = 0.1;
      }else {
	arr[i] = 0;
      }
    }
    PieSeries(event.item.element).perWedgeExplodeRadius = arr;
    over = true;//set the flag to true
  }
}

//on the mouse out event this gets called, start a timer in case the user is just moving from label to marker or vice-versa
private function implode(event : LegendMouseEvent) : void {
  delayTimer = new Timer(200, 1);
  delayTimer.addEventListener(TimerEvent.TIMER, callAfterDelay, false, 0, true);
  delayTimer.start();
  pieSeries = PieSeries(event.item.element);
  over = false;//if you don't reset this then when the user moves the mouse down the list nothing will happen
}

//This gets called if the timer has finished (mouse has been of legend for a set amount of time)
private function callAfterDelay(event : TimerEvent) : void {
  var arr : Array = [];
  pieSeries.perWedgeExplodeRadius = arr;
}

Thats it, hopefully that will help someone.

Check out part 2 of this explanation here. Part 2 explains the circular effect and how to do the labels for the legend.

[ad name="ad-1"]

Creating gradient lines and fills

Creating gradient lines and fills

Ever wanted to create a gradient fill or experiment with the various settings in the beginGradientFill method?

I was trying to recreate a simple black background which faded in the middle to a white shade then back to black again and I spent quite a while  trying various options, recompile, test, try more options etc.  This was taking way to long so I created a very quick explorer for the beginGradientFill method.

Hopefully you’ll find it as useful as I did for finding out exactly what values need to change to get a desired result.

Gradient Explorer image

Click to open fill explorer

[ad]