8 Replies Latest reply on Aug 28, 2009 1:01 PM by marcus_72

    PieChart with HttpService

    marcus_72

      I have created a PieChart that I am struggling with.

       

      The data returned my servlet looks like so:

       

       

      date  Ascending counter
      2008-03-161
      2008-03-201
      2009-08-1736

       

       

       

      The code for my piechart is below. I thought I could take the Result returned from my httpservice and set it to the pieseries and voila, a piechart would show up.  No luck.   I looked at one of the samples from Adobe and I noticed that my data structure differed from there's so I built an array of "objects".  This didn't work either. Am I missing something obvious?   A view of the data is above.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="450" initialize="init();">
      <mx:Script>
          <![CDATA[
                  import classes.valueObjects.GuestList;
                  import classes.valueObjects.Guest;
                  import mx.automation.codec.ArrayPropertyCodec;
                  import flash.sampler.NewObjectSample;
             
                  import mx.collections.ArrayCollection;
                  import mx.rpc.events.ResultEvent;
                 [Bindable]
                  private var counter:ArrayCollection = new ArrayCollection();
                 [Bindable]
                  private var counterArray:ArrayCollection;

       

                  private function resultHandler(event:ResultEvent):void{
                      var counterArray:ArrayCollection = new ArrayCollection();
                      var counter:ArrayCollection= event.result.Results.Row;
                      var resultLength:Number = counter.length;
                      for (var i:Number=0; i < resultLength; i++){
                          var tmp:Object = new Object();
                          tmp.hasOwnProperty("counter");
                          tmp.counter = counter.getItemAt(i).counter;
                          tmp.hasOwnProperty("date");
                          tmp.date = counter.getItemAt(i).date;
                          counterArray.addItem(tmp);
                      }  // end for loop
                  }
                  function fault_handler(event):void{
                      System.resume();
                  }
                  private function init():void{
                         getCounts.send();
                  }      

       

          ]]>
      </mx:Script>

       

          <mx:Panel title="Access History">
              <mx:PieChart id="chart" dataProvider="{counter}" showDataTips="true" >
                      <mx:series>
                          <mx:PieSeries
                              displayName="Access history"
                              field="counter"
                              nameField="date"
                              labelPosition="callout"
                          />   
                  </mx:series>
              </mx:PieChart>
          </mx:Panel>
          <mx:HTTPService id="getCounts" url="http://localhost:8080/demoApplication/gatekeeper" method="POST"  result="resultHandler(event);" fault="fault_handler(event);">
              <mx:request xmlns="">
                  <fromDate>2008/01/01</fromDate>
                  <toDate>2009/08/24</toDate>
                  <memberid>3</memberid>
                  <action>dateCount</action>
              </mx:request>
          </mx:HTTPService>
           <mx:Legend dataProvider="{chart}"/>
         
      </mx:Canvas>

        • 1. Re: PieChart with HttpService
          babo_ya Level 3

          You sure this works?

           

          var counter:ArrayCollection= event.result.Results.Row;

           

          I think, I could be wrong this should be something like this...

           

          var counter:ArrayCollection= ArrayCollection(event.result);

           

          Hope this helps,

           

          BaBo,

          • 2. Re: PieChart with HttpService
            marcus_72 Level 1

            BaBo,

             

            Thanx for the reply.  In debug mode, I see that the ArrayCollection counter is populated properly with data.  I tried it your way too, the ArrayCollection is also populated and the piechart produces the same result, nothing

             

            Marcus

            • 3. Re: PieChart with HttpService
              babo_ya Level 3

              What about changing this:

               

              tmp.counter = counter.getItemAt(i).counter;

               

              to

               

              tmp.counter = counter.getItemAt(i).counter as int;

               

              BaBo,

              • 4. Re: PieChart with HttpService
                marcus_72 Level 1

                Babo,

                 

                I had wondered if I needed to type the data too.  Setting it "as int" didn't change anything.  Still no piechart.  I also flipped the dataprovider back to counterArray when I tried this as I obviously wanted to use the tmp objects with your suggestion.

                 

                Thanx again.  Wish I could figure this out.

                 

                Marcus

                • 5. Re: PieChart with HttpService
                  marcus_72 Level 1

                  So it's definitely something with how I'm populating the arraycollection.  If i hardcode the data, it works.

                   

                             [Bindable]
                              private var counter:ArrayCollection = new ArrayCollection([
                              {date:"08/09/2009", counter:2},
                              {date:"08/08/2009", counter:3},
                              {date:"08/10/2009", counter:4},
                              ]);      

                  • 6. Re: PieChart with HttpService
                    babo_ya Level 3

                    <mx:HTTPService id="getCounts" url="http://localhost:8080/demoApplication/gatekeeper" method="POST"  result="resultHandler(event);" fault="fault_handler(event);">

                     

                     

                    Maybe your service doesn't return an arraycollection type?

                     

                    try to loop through the result and create objects and add them to the counter arraycollection

                     

                    BaBo,

                    • 7. Re: PieChart with HttpService
                      marcus_72 Level 1

                      The service appears to be returning an arraycollection without incident.  A datagrid displays it fine and the loop idea i had already tried, that's what we were originally working with.

                       

                                  private function resultHandler(event:ResultEvent):void{
                                      var counterArray:ArrayCollection = new ArrayCollection();
                                      var counter:ArrayCollection= event.result.Results.Row;
                                      var resultLength:Number = counter.length;
                                      for (var i:Number=0; i < resultLength; i++){
                                          var tmp:Object = new Object();
                                          tmp.hasOwnProperty("counter");
                                          tmp.counter = counter.getItemAt(i).counter as int;
                                          tmp.hasOwnProperty("date");
                                          tmp.date = counter.getItemAt(i).date;
                                          counterArray.addItem(tmp);
                                      }  // end for loop
                                  } // end resultHandler

                       

                      It appears that when I statically define the values in the collection, the internal structure doesn't have an objectproxy.  When I create the arraycollection like I did above or if I use the arraycollection directly from my service, it has one.

                      • 8. Re: PieChart with HttpService
                        marcus_72 Level 1

                        I'm still not sure why the above didn't work but I finally found something that does. I changed the dataProvider to be the lastResult of my HttpService.

                         

                            <mx:Panel title="Access History">
                                <mx:PieChart id="chart" dataProvider="{getCounts.lastResult.Results.Row}" showDataTips="true" >
                                        <mx:series>
                                            <mx:PieSeries displayName="Access history" field="counter" nameField="date"   />   
                                    </mx:series>
                                </mx:PieChart>
                            </mx:Panel>

                         

                         

                        And my chart is now showing up!  Looks awesome!!!

                         

                         

                        I cut out all of the rest of the code and i'm now working to make my pie chart a little more elegant with some controls and configuration.