12 Replies Latest reply on May 24, 2012 12:37 PM by don.pruitt

    Chart doesn't display in Tabbed application

    don.pruitt Level 1

      I am beand new to Flex Builder and am running into a problem that I just can't seem to figure out.  I created a view-based application following the process outlined by Michael Chaize in his Flex 4 Dashboard video (with the exception that I am retrieving data from a Microsoft Web API REST Service rather than PHP).  With some minor changes (to get data into the Array Collection), it works perfectly and my chart displays in the emulator (iPad).  Great.  Flex is cool.

       

      Next I decided to experiment with a tabbed application.  I added a view with the exact same code and the chart deosn't display.  I debugged the application and all of the variables have the same data as in the basic dashboard I successfully created.  The service is being called.  The array is being populated.  and the data source has the data, but no chart displays.

       

      What am I missing?  Do I have to do something differently when creating a tabbed application?  Note:  I put a Text Area and Text box on the view and am able to populate the text area with the xml from the service as well as specific items from the array.

       

      Thanks in advance for any help you can provide.  I am quickly becoming a Flex fan (vs. Silverlight), but I am really confused by this issue!

       

      Thanks,

       

      Don

        • 1. Re: Chart doesn't display in Tabbed application
          Flex harUI Adobe Employee

          Check the sizes and positions of the chart and all of its parents.

          • 2. Re: Chart doesn't display in Tabbed application
            don.pruitt Level 1

            Not sure what you mean.  The cart is in the same location on the view as it is on the view in the tab (same size as well).  I selected to have the chart viewable in all states, too.

            • 3. Re: Chart doesn't display in Tabbed application
              Flex harUI Adobe Employee

              The chart is probably in a container in a contentGroup in the skin of the Tabbed Application.  If you can’t see it, it or one of its parent containers is either sized at zero width/height  or moved somewhere off-screen.  Usually we see zero width/height somewhere.

               

              Set up a mouse handler on the app like

                  click=”dumpSIzes()”

               

              Where

               

                  function dumpSizes()

                  {

                      var p:DIsplayObject = chart;

                      while (p)

                      {

                          trace(p.width, p.height);

                          p = p.parent;

                      }

                  }

              • 4. Re: Chart doesn't display in Tabbed application
                don.pruitt Level 1

                Here is my code:

                 

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  creationComplete="application1_creationCompleteHandler(event)"
                  title="Demographics" xmlns:demographic="services.demographic.*" xmlns:demographicservice="services.demographicservice.*">
                <fx:Script>
                  <![CDATA[
                   import mx.collections.ArrayCollection;
                   import mx.events.FlexEvent;
                   import mx.rpc.events.ResultEvent;
                   import mx.rpc.xml.SimpleXMLDecoder;
                   import mx.utils.ArrayUtil;
                   [Bindable]
                   private var demographicBreakdown:ArrayCollection = new ArrayCollection;
                  
                  
                  
                   protected function application1_creationCompleteHandler(event:FlexEvent):void
                   {
                    // TODO Auto-generated method stub
                    ResponderDemographicBreakdown.token = demographicService.GetDemographic(1);

                   
                   }
                  
                   protected function ResponderDemographicBreakdown_resultHandler(event:ResultEvent):void
                   {
                    var xml:XMLDocument = new XMLDocument(event.message.body.toString());
                    var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
                    var data:Object = decoder.decodeXML(xml);
                    var array:Array = ArrayUtil.toArray(data.ArrayOfDemographic.Demographic);
                    demographicBreakdown = new ArrayCollection(array);
                    textArea1.text = demographicBreakdown[0].DemographicName.toString() + " " + demographicBreakdown[2].DemographicName.toString();
                    label1.text=demographicBreakdown[0].DemographicName.toString();
                   

                   }
                  

                  
                  ]]>
                </fx:Script>

                <s:states>
                  <s:State name="portrait"/>
                  <s:State name="landscape"/>
                  <s:State name="landscapeSmall"/>
                  <s:State name="landscapeMedium"/>
                  <s:State name="landscapeLarge"/>
                </s:states>

                <fx:Declarations>
                  <!-- Place non-visual elements (e.g., services, value objects) here -->
                  <demographicservice:DemographicService id="demographicService"/>
                  <s:CallResponder id="ResponderDemographicBreakdown" result="ResponderDemographicBreakdown_resultHandler(event)"/>
                </fx:Declarations>

                <s:navigationContent>
                  <s:Button icon="@Embed('assets/back.png')" click="navigator.popView();" height="55"/>
                </s:navigationContent>

                <mx:PieChart id="piechart1" x="10" y="37" dataProvider="{demographicBreakdown}"
                     showDataTips="true"
                     x.portrait="9" y.portrait="6" width.portrait="323" height.portrait="329">
                  <mx:series>
                   <mx:PieSeries displayName="Demographic Breakdown" field="DemographicName" nameField="DemographicCount"/>
                  </mx:series>
                </mx:PieChart>
                <mx:Legend x="11" y="444" dataProvider="{piechart1}"
                      x.portrait="10" y.portrait="338"/>
                <s:TextArea id="textArea1" includeIn="portrait" x="110" y="464" height="331"/>
                <s:Label id="label1" includeIn="portrait" x="497" y="400" text="Label"/>


                </s:View>

                • 5. Re: Chart doesn't display in Tabbed application
                  Flex harUI Adobe Employee

                  So I assume piechart1 isn’t showing up in the tabbed app?

                   

                  Add a click handler to the view and modify the code in my previous reply to start with piechart1 instead of chart and see what gets output to the console.

                   

                  -Alex

                  • 6. Re: Chart doesn't display in Tabbed application
                    don.pruitt Level 1

                    Thanks.  I added p.name to tell me which display obkect was being referenced.  Here is the output:

                     

                     

                    PieChart89 323 329

                    Group88 768 916

                    SkinnableContainerSkin87 768 916

                    DemographicsView85 768 916

                    Group27 768 916

                    ViewNavigatorSkin26 768 973

                    ViewNavigator4 768 973

                    Group11 768 973

                    TabbedViewNavigatorSkin10 768 1024

                    TabbedViewNavigator9 768 1024

                    TabbedViewNavigatorApplicationSkin8 768 1024

                    MobileCommunityDashboard2 768 1024

                    root1 768 1024

                    null 788 1044

                     

                    Not sure what this is telling me, other than I think the PieChart should be displayed.

                     

                    Any ideas?  I am confused as to why this code works in a single view application but fails to load the chart (and only the chart - the Text Area, Label and Button all render).

                     

                    Thanks so much for your assistance.

                     

                     

                    • 7. Re: Chart doesn't display in Tabbed application
                      don.pruitt Level 1

                      Just to make sure this isn't an issue with the service, I manually created an array and used it for the chart.  Same result - chart does not display.

                       

                      Code:

                       

                      protected function ResponderDemographicBreakdown_resultHandler(event:ResultEvent):void
                         {
                          var xml:XMLDocument = new XMLDocument(event.message.body.toString());
                          var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
                          var data:Object = decoder.decodeXML(xml);
                          //var array:Array = ArrayUtil.toArray(data.ArrayOfDemographic.Demographic);
                         

                          //new code here to create an array manually
                          var source:Array = [{id:1, DemographicName:"Demo1", DemographicCount:100}, {id:2, DemographicName:"Demo2", DemographicCount:200},{id:3, DemographicName:"Demo3", DemographicCount:300}];
                          var demographicBreakdown = new ArrayCollection(source);
                         
                          //demographicBreakdown = new ArrayCollection(array);
                          textArea1.text = demographicBreakdown[0].DemographicName.toString() + " " + demographicBreakdown[2].DemographicName.toString();
                          label1.text=demographicBreakdown[0].DemographicName.toString();
                         

                         }

                      • 8. Re: Chart doesn't display in Tabbed application
                        Flex harUI Adobe Employee

                        Is it just the chart that doesn’t show up or the TextArea and Label as well?

                        • 9. Re: Chart doesn't display in Tabbed application
                          don.pruitt Level 1

                          Just the pie chart.  All other controls display as expected.  I can control which states and views they will be shown.  No matter what I do, the pie chart does not show up.

                           

                          HOWEVER, the same code works on a single view application (just like in the Chaize video post).

                          • 10. Re: Chart doesn't display in Tabbed application
                            Flex harUI Adobe Employee

                            OK.  Then it probably can’t be a parent problem.  Did you prove it has valid data in its dataprovider?  Maybe some weird thing causes the DP to be un-set.

                             

                            Also make sure other chart properties look ok.

                            • 11. Re: Chart doesn't display in Tabbed application
                              don.pruitt Level 1

                              I checked the data (see post 7) by manually creating an array so that I can isolatethe problem.  Unless there is something wrong with that, it shouldn't be the data.  Also, the text area and label text values are correctly set to the array values.

                              • 12. Re: Chart doesn't display in Tabbed application
                                don.pruitt Level 1

                                Nevermind.  This was a simple user error.  I had the chart values and display text reversed so it was trying to bind text to the counts for display.  Switched it and everything works fine.

                                 

                                Thanks for your help!