Creating a Pie Chart

This topic provides sample code that illustrates how to create a pie chart for SALES BY COUNTRY.

Important: When you pass a field name to pieseries, you must use a verb as the prefix, followed by a dot operator (period), and then a numeric field as the suffix. For example:

Sum.SALES

Top of page

Example: Sample Code for Creating a Pie Chart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 <mx:Script> 
  <![CDATA[
    import mx.charts.Legend; 
    import mx.charts.HitData; 
    import mx.controls.Alert;

    public var grid1:ibiObject = new ibiObject(); 
    public var fex:String = "http://localhost:8080/ibi_apps/WFServlet?IBIF_ex=xmltest";
    public function initApp():void 
    {
      grid1.init(fex,dataReady); 
    }
    public function dataReady(grid:ibiObject,obj:*):void 
    {  
      	grid1.populateGrid(false); 
    	  pieSet(); 
    }
    //=== pie Chart ===================  
    public function pieSet():void 
    { 
       var aggField:Array = new Array(); 
       var byField:Array = new Array(); 
       var calOpts:Array = new Array(); 
       aggField.push("DOLLARS"); 
       byField.push("CITY"); 
       calOpts.push("Sum"); 
       grid1.aggregate(aggField, byField,calOpts,true,false); 
       piechart.dataProvider = grid1.prGridagg; 
       //Define series for the pieChart 
       var mySeries:Array = new Array(); 
       var series:PieSeries=new PieSeries(); 
       //aggregated fields = field 
       series.field = pieseries.field.valueOf(); 
       //byFields = nameField 
       series.nameField = pieseries.nameField.valueOf(); 
       series.labelFunction=lblFunc; 
       mySeries.push(series); 
       piechart.series = mySeries; 
       piechart.dataTipFunction = dtFunc; 
       piechart.showDataTips = true; 
    }
    // data tool tips function for a piechart 
    public function dtFunc(h:HitData):String 
    { 
      var dtText:String; 
      dtText = h.item[pieseries.nameField.valueOf()]  + "\n<B>" + 
         cf.format(h.item[pieseries.field.valueOf()]) + "</B>";  
      return dtText; 
    } 
    //Label function for pie chart 
    public function lblFunc(data:Object, field:String, index:Number, percentValue:Number):String 
    { 
      var temp:String= (" " + percentValue).substr(0,6); 
      var temp1:String; 
      temp1 = data[pieseries.nameField.valueOf()] + "\n" + temp + "%"; 
      return temp1; 
    } 
  ]]> 
 </mx:Script>
 <mx:Style> 
   PieSeries { 
     labelPosition: callout;  
   }
  </mx:Style>
 <mx:CurrencyFormatter id="cf" currencySymbol="$" />
 <!--//piechart -->
 <mx:PieChart x="10" y="19" id="piechart" height="425" width="420">
   <mx:series>
     <mx:PieSeries id="pieseries" field="Sum.DOLLARS" nameField="CITY"/>
   </mx:series>
 </mx:PieChart>
 <mx:Legend dataProvider="{piechart}" x="438" y="101"/>
</mx:Application>


WebFOCUS