Combine column chart and pie chart

           
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script>
    
    import mx.charts.events.ChartItemEvent;
    import mx.collections.ArrayCollection;
    import mx.charts.HitData;
    
    [Bindable]
    private var productSales:ArrayCollection;
 
     public function myListener(e:ChartItemEvent):void {
       var pieData:ArrayCollection = new ArrayCollection( [
         {Product: "PC", Total: e.hitData.item.PC},
         {Product: "Mac", Total: e.hitData.item.Mac},
         {Product: "Gadgets", Total: e.hitData.item.Gadgets},
     ]);
       pieChart.dataProvider=pieData;
     }
 
    private function initApp():void{
      productSales = new ArrayCollection( [
            { Quarter: "1", PC: 10000, Mac: 3000, Gadgets: 1000, Total: 14000 },
            { Quarter: "2", PC: 12000, Mac: 4000, Gadgets: 2000, Total: 18000 },
            { Quarter: "3", PC: 15000, Mac: 8000, Gadgets: 5000, Total: 28000 },
            { Quarter: "4", PC: 20000, Mac: 10000, Gadgets: 9000, Total: 39000 }
            ]);
      columnChart.addEventListener(ChartItemEvent.ITEM_CLICK,myListener);
    }
        
    public function display(data:Object, field:String, index:Number,                
      percentValue:Number):String {
      return data.Product + ": " + data.Total;
    }

    public function dtFunc(h:HitData):String {
      return h.item.Product + "\n<B>" + h.item.Total +"</B>";
    }
  
  </mx:Script>

  <mx:Panel title="" width="100%" height="100%" >

    <mx:ColumnChart id="columnChart" height="100%" width="100%" showDataTips="true" dataProvider="{productSales}">
      <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="Quarter"/>
      </mx:horizontalAxis>          
      <mx:series>
        <mx:ColumnSeries xField="Quarter" yField="Total" displayName="Quarter"/>
      </mx:series>
    </mx:ColumnChart>

    <mx:PieChart id="pieChart" height="100%" width="100%"
            showDataTips="true" dataTipFunction="dtFunc">
      <mx:series>
        <mx:PieSeries labelPosition="callout" field="Total" labelFunction="display"/>
      </mx:series>
    </mx:PieChart>

  </mx:Panel>
</mx:Application>

Related examples in the same category

1.	PieChart vs ColumnChart
2.	ColumnChart Demo
3.	Waterfall Stacked ColumnChart
4.	Create a PieChart control from the selected columns in the ColumnChart control.
5.	Column Chart Demo and CategoryAxis
6.	Using strokes in ActionScript
7.	You can also represent the range of dates in MXML by using the following syntax:
8.	Creating a custom Legend control
9.	Stack the Profit and Expenses fields, in which some of the values are negative.
10.	Add new grid lines as annotation elements to the chart and an image as the background element
11.	Define the grid lines inside each chart control's definition
12.	Turns on grid lines in both directions and applies them to the chart:
13.	Define set of filters, and then applies them to various chart elements:
14.	Mixed Chart
15.	Multiple Axis Chart
16.	Display two charts
17.	Define two colors and then uses those colors in the axis renderers and in the strokes and fills for the chart items
18.	Make Chart From Drag Drop

Combine column chart and pie chart : Column Chart « Chart « Flex

Related examples in the same category