[flexcoders] ColumnChart Issue: How to access data properties when clicking on a Column

[gilbert_mizrahi]

I have a ColumnChart for which the dataProvider is an XML file. The
chart is displayed as expected, but when I click on a column on the
chart i want to display some information about that column in a text area.

However, I haven't been able to achieve that. My code is below:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" width="780"
        creationComplete="init();" >
        <mx:HTTPService id="chartFeed" url="{chart1URL}"
result="dataLoaded(event)" resultFormat="e4x"/>
  <mx:Script>
    <![CDATA[
        import mx.events.SliderEvent;
        import mx.events.DragEvent;
        import mx.controls.HSlider;
        import mx.charts.events.ChartItemEvent;
        import mx.controls.Spacer;
        import mx.charts.CandlestickChart;
        import mx.containers.Canvas;
        import mx.controls.Text;
        import mx.controls.CheckBox;
        import mx.containers.HBox;
        import mx.rpc.events.*;

     import mx.graphics.IFill;
     import mx.graphics.SolidColor;
     import mx.charts.ChartItem;
     import mx.charts.series.items.ColumnSeriesItem;
     
     [Bindable] private var chart1URL:String;
     [Bindable] private var topicInterest:XMLList;
     private var sliders:Array = new Array;

    private function init():void
     {
        chart1URL = "data/star1.xml";
                chartFeed.send();
     }
     
     private function dataLoaded(e:ResultEvent):void
     {
        topicInterest = e.result.element;
        var numTopics:int = topicInterest.length();
        trace("numTopics "+numTopics);
        var i:int;
        var topicHolder:HBox;
        for(i=0; i<numTopics; i++){
                topicHolder = new HBox;
                topicHolder.setStyle("horizontalGap", 10);
                var cBox:CheckBox = new CheckBox;
                var col:Canvas = new Canvas;
                var spacer:Spacer = new Spacer;
                var slider:HSlider = new HSlider;
                slider.id = i.toString();
                slider.minimum =-0.1;
                slider.maximum = 1.0
                //slider.allowTrackClick = true;
                slider.liveDragging = true;
                slider.tickInterval = 0.1;
                slider.value = Number([EMAIL PROTECTED]);
                sliders[i] = slider;
                //slider.width = 50;
                var theColor:Number = Number([EMAIL PROTECTED]);
                topicHolder.percentWidth = 100;
                cBox.label = [EMAIL PROTECTED];
                col.setStyle("backgroundColor", theColor);
                col.width = 20;
                col.height = 20;
                cBox.id = i.toString();
                cBox.selected = true;
                spacer.percentWidth= 100;
                topicHolder.addChild(col);
                topicHolder.addChild(cBox);
                topicHolder.addChild(spacer);
                topicHolder.addChild(slider);
                controls.addChild(topicHolder);
                
                cBox.addEventListener(MouseEvent.CLICK, onCBSelected);
                //currCSeries.addEventListener(MouseEvent.CLICK, onItemClick);
                //slider.addEventListener(SliderEvent.THUMB_RELEASE, 
onDragSlider);
                slider..addEventListener(SliderEvent.CHANGE, onDragSlider);
        }
     }
     
     private function onDragSlider(e:SliderEvent):void
     {
        var i:int = Number(e.currentTarget.id);
        var id:int = i+1;
        trace("val "+ topicInterest.(@id==id)[EMAIL PROTECTED]);
        trace("e.currentTarget.value "+ e.currentTarget.value);
        topicInterest.(@id==id)[EMAIL PROTECTED] = e.currentTarget.value;
     }
     
     private function onClickSlider(e:MouseEvent):void
     {
        var i:int = Number(e.currentTarget.id);
        var id:int = i+1;
        var aSlider:HSlider = e.currentTarget as HSlider;
        aSlider.addEventListener(SliderEvent.CHANGE, onDragSlider);
        trace("val "+ topicInterest.(@id==id)[EMAIL PROTECTED]);
        trace("e.currentTarget.value "+ sliders[i].value);
        //topicInterest.(@id==id)[EMAIL PROTECTED] = sliders[i].value;
     }
     
     private function onCBSelected(e:MouseEvent):void
     {
        var cBox:CheckBox = e.currentTarget as CheckBox;
        var i:int = Number(e.currentTarget.id);
        
        //cBox.selected = !cBox.selected;
        if(!cBox.selected) [EMAIL PROTECTED] = false;
        else [EMAIL PROTECTED] = true;
        myChart.dataProvider = topicInterest.(@display==true);
        //currCSeries.fillFunction
        trace("dp "+topicInterest.(@display==true));
        trace("dp "+myChart.getChildAt(0));
     }
     
    private function myFillFunction(element:ChartItem,
index:Number):IFill {
        var c:SolidColor = new SolidColor(0x00CC00);
        var item:ColumnSeriesItem = ColumnSeriesItem(element);
        if(index < topicInterest.(@display==true).length()){
                var name:String = currCSeries.items[index].xValue;
                var theColor:Number =
Number(topicInterest.(@topicName==name)[EMAIL PROTECTED]);
        }

                c.color=theColor;
        return c;
        
    }
    
    private function onItemClick():void
    {
        var index = currCSeries.getChildIndex();
        details.text = "hi there"+index;

    }
    
    ]]>
  </mx:Script>
  
 <mx:SeriesSlide 
        id="slideIn" 
        duration="500" 
        direction="up"
    />
    <mx:SeriesSlide 
        id="slideOut" 
        duration="400" 
        direction="down"
    />



  <mx:Panel id="chart" title="Using a custom fillFunction in a Column
Chart" width="400" height="300"
        x="10" y="10">
     <mx:ColumnChart id="myChart" 
        dataProvider="{topicInterest}" 
        showDataTips="true" 
        width="100%" height="100%" 
        
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                title="Topic"
                categoryField="@topicName"
           />
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:LinearAxis title="Some title here"/>
        </mx:verticalAxis>
        
        <mx:series>
           <mx:ColumnSeries id="currCSeries" 
                xField="@topicName" 
                yField="@value" 
                fillFunction="myFillFunction" 
                displayName="Some Name"  selectable="true"
click="onItemClick()"
                showDataEffect="slideIn"
                        hideDataEffect="slideOut"
           />
        </mx:series>
     </mx:ColumnChart>
     
  </mx:Panel>
  <mx:Panel id="controlBox" width="{application.width-chart.width-30}"
x="{chart.width+20}" y="10" title="Select topics to view on map:" >
        <mx:VBox id="controls" width="100%" height="100%" verticalGap="8"
paddingLeft="10"
         paddingRight="10" paddingTop="10" paddingBottom="10">
                
        </mx:VBox>
  </mx:Panel>
  <mx:Label x="10" y="332" text="Details" fontWeight="bold"/>
  <mx:TextArea x="10" y="358" width="537" height="91" id="details"
editable="false"/>
  
</mx:Application>


I customized the chart to have each column of a different color and
the values can be changed with an HSlider for each bar. But I still
have issues with selecting a column.

Thanks,

Gilbert