Chart Flex


    
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"
    height="600">
    
        
    

     
        import mx.charts.series.items.ColumnSeriesItem; 
        import mx.charts.ChartItem; 
        private function connectTwoPoints(month1:String,value1:Number,month2:String,value2:Number):void { 
            canvas.clear(); 
            canvas.lineStyle(4,0xCCCCCC,.75,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.MITER,2); 
            canvas.moveTo(month1, value1); 
            canvas.lineTo(month2, value2); 
            l1.text = "Month: " + month1; 
            l2.text = "Profit: " + value1; 
            l3.text = "Month: " + month2; 
            l4.text = "Profit: " + value2; 
            chartHasLine = true; 
        } 
        private var s1:String = new String(); 
        private var s2:String = new String(); 
        private var v1:Number = new Number(); 
        private var v2:Number = new Number(); 
        // Set this to true initially so that the chart doesn't 
        // draw a line when the first item is clicked. 
        private var chartHasLine:Boolean = true; 
  
    import mx.collections.ArrayCollection;
    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
      {month:"Jan", profit:20, expenses:15, amount:145},
      {month:"Feb", profit:1, expenses:2, amount:60},
      {month:"Mar", profit:15, expenses:5, amount:3}
      ]);
        private function handleChange(event:Event):void { 
            var sci:ColumnSeriesItem =ColumnSeriesItem(myChart.selectedChartItem); 
            if (chartHasLine) { 
                canvas.clear(); 
                s1 = sci.item.month; 
                v1 = sci.item.profit; 
                addLabelsToColumn(s1,v1); 
                chartHasLine = false; 
            } else { 
                s2 = sci.item.month; 
                v2 = sci.item.profit; 
                addLabelsToColumn(s2,v2); 
                connectTwoPoints(s1, v1, s2, v2); 
            } 
        } 
        [Bindable] 
        public var columnLabel:Label; 
        private function addLabelsToColumn(s:String, n:Number):void { 
            columnLabel = new Label(); 
            columnLabel.setStyle("fontWeight", "bold"); 
            columnLabel.setStyle("color", "0x660000"); 
            columnLabel.text = s + ": " + "$" + n; 
            // This adds any DisplayObject as child to current canvas. 
            canvas.addDataChild(columnLabel, s, n); 
        } 
      

    
        
            
        

                    selectionMode="single" change="handleChange(event)">
            
                                    includeInRanges="true" />
            

            
                
            

            
                                    displayName="Profit" selectable="true" />
            

        
        
                    click="connectTwoPoints('Jan', 2000, 'Mar', 1500);" />