Chart doesn't display in Tabbed application

Question

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

Answer 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>