5 Replies Latest reply on Apr 20, 2011 8:46 AM by digsafe

    using xml as dataProvider for chart

    digsafe Level 1

      I am trying to use a loaded xml as the dataProvider for a pie chart like this

       

      <mx:PieChart id="pieChart"
                           dataProvider="{get_xml.lastResult.AssetAllocationFunds.fund[0].target_allocation}">

       

      This works, but gives a warning that

      "Data binding will not be able to detect changes when using the square bracket operator. For Array, please use ArrayCollection.getItemAt() instead."

       

      Can someone give me some direction on how to implement this.

      Thanks.

        • 1. Re: using xml as dataProvider for chart
          Tanu Jain Level 2

          Direct data binding doesnt work with square brackets.

           

          It works the first time, but doesnt reflect changes on any change of dataprovider.

           

          Try

          <mx:PieChart id="pieChart"
                               dataProvider="{(get_xml.lastResult.AssetAllocationFunds.fund as ArrayCollection).getItemAt(0).
          target _allocation}">

          • 2. Re: using xml as dataProvider for chart
            digsafe Level 1

            Hmmm.

            Throws this error;
            "Multiple initializers for property 'dataProvider'. (note: 'dataProvider' is the default property of 'mx.charts.PieChart')."

            I'll be honest, I don't really get how ArrayCollections work.

            Going to research.

            Thanks anyway.

            • 3. Re: using xml as dataProvider for chart
              Tanu Jain Level 2

              U can try saving the fetched result in an array Collection in the webservice/httpservice resultHandler and bind the arrayCollection with pieChart's dataprovider.

               

              In resultHandler,

              arrColl = get_xml.lastResult.AssetAllocationFunds.fund as ArrayCollection;

               

              in Pie chart,

              dataprovider = {arrColl.getItemAt(0).target_allocation}

              • 4. Re: using xml as dataProvider for chart
                digsafe Level 1

                Tanu Jain wrote:

                 

                U can try saving the fetched result in an array Collection in the webservice/httpservice resultHandler and bind the arrayCollection with pieChart's dataprovider.

                 

                In resultHandler,

                arrColl = get_xml.lastResult.AssetAllocationFunds.fund as ArrayCollection;

                 

                in Pie chart,

                dataprovider = {arrColl.getItemAt(0).target_allocation}

                No, that threw the same error.

                 

                I was able to get around the issue by integrating the whole thing into a for loop in a function that fires after the xml loads like this;

                 

                private function xmlLoaded(myEvt:ResultEvent):void{
                                arrColl = myEvt.result.MasterNode.SubNode as ArrayCollection;

                               var numOfNodes:int = arrColl.length;
                                //

                               var myArr:Array = [];
                               var i:int;

                                    for(i=0;i<numOfNodes;i++){

                                         var myNum:int = arrColl[i].SubNode[0].wedgePercent;

                                         myArr.push({percent:myNum});

                 

                                         if(i==numOfNodes-1){
                                            //---DONE LOOPING---//

                                            //---build series---//
                                            series = new PieSeries();
                                            series.field = "percent";
                                            //---build chart---//
                                            myChart = new PieChart();
                                            myChart.dataProvider = myArr;
                                            myChart.height = 210;
                                            myChart.width = 210;
                                            myChart.showDataTips = false;
                                            myChart.series = [series];
                                           
                                            // Add chart to the display list.
                                            addElement(myChart);

                                            }

                                    }

                }

                 

                Still wish I had a simple way to have a dynamic name for the data provider.

                • 5. Re: using xml as dataProvider for chart
                  digsafe Level 1

                  So that solution I posted up wasn't going to work for what I needed.

                  Basically, the "itemRollOver" and "itemClick" that work for the pie chart when hard coded on the main application don't work when embedded in a custom class that extends the PieChart. I haven't been able to figure out why.

                  However, I did get the syntax for targeting ArrayCollection.getItemAt() worked out.

                  Here is a simple example.

                  Hope it helps others.

                  Mark

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application
                      xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      >
                      <fx:Script>
                          <![CDATA[
                              import mx.charts.events.ChartEvent;
                              import mx.charts.events.ChartItemEvent;
                              import mx.charts.series.items.PieSeriesItem;
                              import mx.collections.ArrayCollection;
                              import mx.events.FlexEvent;
                              import mx.rpc.events.ResultEvent;
                              import mx.charts.series.PieSeries;
                           
                              private function pieChart_itemRoll(evt:ChartItemEvent):void {
                                  var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
                                  myTextArea.text += "\rtarget: "+psi.item.target;
                                  trace(psi.item.target);
                              }
                              private function pieChartClick(event:ChartItemEvent, pieName:String):void{   
                                  myTextArea.text += "\rid: "+pieName;
                              }
                             
                              [Bindable]
                              private var chartData:ArrayCollection = new ArrayCollection(
                                  [[{target:"Target A0",percent:40},
                                      {target:"Target A1",percent:30},
                                      {target:"Target A2",percent:20},
                                      {target:"Target A3",percent:10}],
                                     
                                      [{target:"Target B0",percent:45},
                                          {target:"Target B1",percent:22},
                                          {target:"Target B2",percent:17},
                                          {target:"Target B3",percent:8}]]);
                             
                          ]]>
                      </fx:Script>
                      <s:VGroup>
                         
                          <s:HGroup id="myGroup">
                             
                              <mx:PieChart
                                  dataProvider="{chartData.getItemAt(0)}"
                                  itemRollOver="pieChart_itemRoll(event);"
                                  itemClick="pieChartClick(event, 'pie 0');"
                                  showDataTips="false"
                                  height="210"
                                  width="210">
                                  <mx:series>
                                      <mx:PieSeries
                                          field="percent"
                                          nameField="target"
                                          labelPosition="inside"
                                          >
                                      </mx:PieSeries>
                                  </mx:series>
                              </mx:PieChart>
                             
                              <mx:PieChart
                                  dataProvider="{chartData.getItemAt(1)}"
                                  itemRollOver="pieChart_itemRoll(event);"
                                  itemClick="pieChartClick(event, 'pie 1');"
                                  showDataTips="false"
                                  height="210"
                                  width="210">
                                  <mx:series>
                                      <mx:PieSeries
                                          field="percent"
                                          nameField="target"
                                          labelPosition="inside"
                                          >
                                      </mx:PieSeries>
                                  </mx:series>
                              </mx:PieChart>
                             
                          </s:HGroup>
                         
                          <s:TextArea id="myTextArea"  width="550" height="220" />
                      </s:VGroup>
                  </s:Application>