Make Flex Plot Chart items toggled to show/hide item's label - apache-flex

Question

I made an application for generating a plot chart based on previously calculated data (X,Y). After plotting the data on the chart, I tried to make the items (dots) to show a label (through addChild an external custom label component) when a user click on the dots (for example: if a user click on a chart item, the corresponding ID number will show beside the dot).
Although everything works fine, I can't make the items toggled (for example: if a dot is already clicked and label ID is visible, on next click on the same dot I want to hide (removeChild) the label component which corresponds to that item)... A simple example code of what I did so far is attached:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="417" height="468" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script><![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.charts.HitData;
import mx.collections.ArrayCollection;
[Bindable]
public var ARR:ArrayCollection = new ArrayCollection([
{ID:1, Y:2000, X:1500},
{ID:2, Y:1000, X:200},
{ID:3, Y:1500, X:500},
{ID:4, Y:500, X:300},
{ID:5, Y:1000, X:450},
{ID:6, Y:2000, X:500}
]);
private function labels_plot1(plot:String, dotIndex:int, labelID:String):void {
var ID_lab:ID_label = new ID_label();
if(this[plot].series[0] == ID_lab.parent){
this[plot].series[0].removeChild(ID_lab);
}else{
this[plot].series[0].addChild(ID_lab);
ID_lab.x = this[plot].series[0].getChildAt(dotIndex).x + 8;
ID_lab.y = this[plot].series[0].getChildAt(dotIndex).y + 1.2;
ID_lab.ID_txt.htmlText = "<B>" + labelID + "</B>";
}
}
private function dotClickEvent(event:ChartItemEvent):void{
labels_plot1(event.currentTarget.id, event.hitData.chartItem.index, event.hitData.item.ID);
}
]]></mx:Script>
<mx:PlotChart id="myChart" dataProvider="{ARR}" itemClick="dotClickEvent(event)">
<mx:series>
<mx:PlotSeries id="pl"
xField="X"
yField="Y"
displayName="Plot 1"
/>
</mx:series>
<mx:annotationElements>
<mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
</mx:annotationElements>
</mx:PlotChart>
</mx:WindowedApplication>
I tried almost everything, but with no success... How to solve this problem?

Answer 1

The first check in your function could not be true, that is why the children are not removed. First of all you should not create a new label before you have got to know either or not you need a new one.
In your case I would use the property name of a component to save the dotIndex there. The dotIndex is uniq, so you can check anytime if the label exists by using the function getChildByName(dotIndex.toString()).
I also prefer to add new Labels direct into a separate container or in our case into the application itself. Here is something you can try to do:
private function labels_plot1(plot:String, dotIndex:int, labelID:String):void {
var dispObj:DisplayObject = this.getChildByName(dotIndex.toString());
if (dispObj != null)
{
this.removeChild(dispObj);
}
else
{
var ID_lab:Label = new Label();
ID_lab.x = this[plot].series[0].getChildAt(dotIndex).x + 8 + 60;
ID_lab.y = this[plot].series[0].getChildAt(dotIndex).y + 1.2 + 4;
ID_lab.text = labelID;
ID_lab.name = dotIndex.toString();
this.addChild(ID_lab);
}
}
I don't have your component ID_Label, so I have used a normal Label here.