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