0 Replies Latest reply on May 9, 2009 6:58 AM by kavehg

    Migrate Flex Chart to AS

    kavehg

      Hi,

       

      I've put together a simple test app that pulls data from blazeds and inserts the results in a PieChart defined in mxml. However when I try to create the same chart in AS the chart doesn't show up. I suspect that it is perhaps related to the sequence of how things are initialized? but I'm not sure

       

      Here is my code. I've created 3 charts. The first (mxml) chart is the one that works fine. The second (AS) is my attempt to recreate the mxml chart in AS and it does not work. The third is a sanity check of another test AS chart just to see if I can actually make an AS PieChart and it also works fine.

       


      If anyone has any insight it would be much appreciated.

       

      Thank you,

      Kaveh

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- intro\intro_remoting.mxml -->
      <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"
                          xmlns:data="com.kg.data.*"
                          width="100%"
                          height="100%"
                          initialize="getPokerParameterNumbers()"
                          backgroundColor="#FFFFFF">

       

          <mx:Script>
              <![CDATA[          
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.ArrayCollection;
                 
                  import mx.charts.PieChart;
                  import mx.charts.series.PieSeries;
                  import mx.charts.Legend;           

                  [Bindable]
                  public var paramCount:ArrayCollection;

       

                  [Bindable]
                   public var expenses:ArrayCollection = new ArrayCollection([
                      {Expense:"Taxes", Amount:2000},
                      {Expense:"Rent", Amount:1000},
                      {Expense:"Bills", Amount:100},
                      {Expense:"Car", Amount:450},
                      {Expense:"Gas", Amount:100},
                      {Expense:"Food", Amount:200}
                   ]);
                  
                  // Get the initial data set from the poker db
                  private function getPokerParameterNumbers():void {
                      //remoteObject.getParameterTypesAndCount();
                      remoteObject.getParameterCount();
                      addSecondChart();
                      add3rdChart();
                  }

       

                  // Handle the recevied message.
                  private function resultHandler(event:ResultEvent):void {
                      statusTextArea.text += "Server responded [] : \n";
                      var myObject:Object = event.result;
                      paramCount.removeAll();
                      for (var key:* in myObject)
                      {
                        var value:* = myObject[key];
                        statusTextArea.text += "Parameter: " + key + " Count: " + value + "\n";
                        var paramItem:Object = new Object();
                        paramItem.parameterization = key;
                        paramItem.count = value;
                        paramCount.addItem(paramItem);
                      }
                      paramCount.refresh();
                  }
                 
                  private function newResultHandler(event:ResultEvent):void {
                      var collectionResult:ArrayCollection = ArrayCollection(event.result);
                      statusTextArea.text += "-" + collectionResult.length + "-";
                      paramCount = ArrayCollection(event.result);
                  }

       

                  // Handle a message fault.
                  private function faultHandler(event:FaultEvent):void {
                      statusTextArea.text += "Received fault: " + event.fault + "\n";
                  }         

       

                 
                  public function addSecondChart():void {
                      //var medalsAC:ArrayCollection;
                      var chart:PieChart;
                      var series:PieSeries;
                     
                 
                      //medalsAC = getDataProvider();

       

                      /* Define pie series. */
                      series = new PieSeries();
                      //series.nameField = "label";
                      //series.field = "data";
                     
                      series.nameField = "name";
                      series.field = "count";

       

                      /* Remove default dropshadow filter. */
                      series.filters = [];

       

                      /* Define pie chart. */
                      chart = new PieChart();
                      chart.percentWidth = 100;
                      chart.percentHeight = 100;
                      chart.showDataTips = true;
                      //chart.dataProvider = medalsAC;
                      chart.dataProvider = paramCount;
                      chart.series = [series];

       

                      /* Add chart to the display list. */
                      topHBox.addChild(chart);
                  }
                 
                  private function add3rdChart():void {
                      var medalsAC:ArrayCollection;
                      var chart:PieChart;
                      var series:PieSeries;
                 
                      medalsAC = getDataProvider();

       

                      /* Define pie series. */
                      series = new PieSeries();
                      series.nameField = "label";
                      series.field = "data";
                      /* Remove default dropshadow filter. */
                      series.filters = [];

       

                      /* Define pie chart. */
                      chart = new PieChart();
                      chart.percentWidth = 100;
                      chart.percentHeight = 100;
                      chart.showDataTips = true;
                      chart.dataProvider = medalsAC;
                      chart.series = [series];

       

                      /* Add chart to the display list. */
                      p1.addChild(chart);
                  }
                 
                  /**
                   * Create and return a simple ArrayCollection to
                   * use as a data provider.
                   */
                  private function getDataProvider():ArrayCollection {
                      var arr:Array = [];
                      arr.push({label:"Product 1", data:3});
                      arr.push({label:"Product 2", data:1});
                      arr.push({label:"Product 3", data:4});
                      arr.push({label:"Product 4", data:1});
                      arr.push({label:"Product 5", data:5});
                      arr.push({label:"Product 6", data:9});
                      return new ArrayCollection(arr);
                  }

       


              ]]>
          </mx:Script>

       

          <mx:RemoteObject id="remoteObject"
              destination="pokerDataSource"
              result="newResultHandler(event);"
              fault="faultHandler(event);"/>

       


          <mx:HBox width="100%" id="topHBox">
              <mx:VBox>
             
                  <mx:PieChart id="myChart"
                      dataProvider="{paramCount}"
                      showDataTips="true"
                      selectionMode="single"
                      itemRollOverColor="#FF0066">
                      <mx:series>
                          <mx:PieSeries
                              field="count"
                              nameField="name"
                              labelPosition="callout"
                          />
                      </mx:series>
                  </mx:PieChart>
                  <mx:Legend dataProvider="{myChart}"/>
                         
              </mx:VBox>
             
              <mx:TextArea     id="statusTextArea"
                              width="100%"        
                              height="100%"               
                              backgroundAlpha="0"
                              focusAlpha="0"
                              selectable="false"/>       
          </mx:HBox>
          <mx:Panel id="p1"/>
      </mx:Application>