Chart Flex


    
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="initApp();" height="600">
    
                    elementOffset="0" minimumElementDuration="200" />
    

     
         
        import mx.collections.ArrayCollection; 
        import mx.charts.chartClasses.ChartBase; 
        import mx.charts.ChartItem; 
        import mx.charts.PieChart; 
        import mx.charts.series.PieSeries; 
        import mx.charts.events.ChartItemEvent; 
        import mx.events.DragEvent; 
        import mx.controls.List; 
        import mx.managers.DragManager; 
        import mx.core.DragSource; 
        import mx.charts.Legend; 
        [Bindable] 
        public var newDataProviderAC:ArrayCollection; 
        [Bindable] 
        private var expensesAC:ArrayCollection; 
    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 initApp():void { 
            setupPieChart(); 
        } 
        private function resultHandler():void { 
            expensesAC = expenses; 
        } 
        private var newChart:PieChart; 
        private var newSeries:PieSeries; 
        [Bindable] 
        private var explodedPiece:Array; 
        private function explodePiece(e:Event):void { 
            explodedPiece = new Array(); 
            explodedPiece[newSeries.selectedIndex] = .2; 
            newSeries.perWedgeExplodeRadius = explodedPiece; 
        } 
        private function setupPieChart():void { 
            newChart = new PieChart(); 
            newChart.showDataTips = true; 
            newChart.selectionMode = "multiple"; 
            newChart.dropEnabled= true; 
            newChart.dragEnabled= false; 
            newChart.height = 350; 
            newChart.width = 350; 
            newChart.addEventListener("dragEnter", doDragEnter); 
            newChart.addEventListener("dragDrop", doDragDrop); 
            newChart.dataProvider = newDataProviderAC; 
            newSeries = new PieSeries(); 
            newSeries.field = "expenses"; 
            newSeries.nameField = "month"; 
            newSeries.setStyle("labelPosition", "callout"); 
            newSeries.setStyle("showDataEffect", "interpol"); 
            var newSeriesArray:Array = new Array(); 
            newSeriesArray.push(newSeries); 
            newChart.series = newSeriesArray; 
            newChart.addEventListener(ChartItemEvent.CHANGE, explodePiece); 
            // Create a legend for the new chart. 
            var newLegend:Legend = new Legend(); 
            newLegend.dataProvider = newChart; 
            p2.addElement(newChart); 
            p2.addElement(newLegend); 
        } 
        private function doDragEnter(event:DragEvent):void { 
            // Get a reference to the target chart. 
            var dragTarget:ChartBase = ChartBase(event.currentTarget); 
            // Register the target chart with the DragManager. 
            DragManager.acceptDragDrop(dragTarget); 
        } 
        private function doDragDrop(event:DragEvent):void { 
            // Get a reference to the target chart. 
            var dropTarget:ChartBase=ChartBase(event.currentTarget); 
            // Get the dragged items from the drag initiator. When getting 
            // items from chart controls, you must use the 'chartitems' 
            // format. 
            var items:Array = event.dragSource.dataForFormat("chartitems") as Array; 
            // Trace status messages. 
            trace("length: " + String(items.length)); 
            trace("format: " + String(event.dragSource.formats[0])); 
            // Add each item to the drop target's data provider. 
            for(var i:uint=0; i < items.length; i++){
                // If the target data provider already contains the 
                // item, then do nothing. 
                if (dropTarget.dataProvider.contains(items[i].item)) { 
                    // If the target data provider does NOT already 
                    // contain the item, then add it. 
                } else { 
                    dropTarget.dataProvider.addItem(items[i].item); 
                } 
            } 
        } 
      
    

    
        
    

    
        
            
        

                    showDataTips="true" dataProvider="{expenses}"
            selectionMode="multiple" dragEnabled="true" dropEnabled="false">
            
                                    displayName="Expenses" selectable="true" />