Using mx.charts in a Flex mobile project

Question

Adobe states that Charts are supported in mobile projects but when I try to change the following working files (created project with File - New - Flex Mobile Project - Google Nexus One):

MyTest.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication 
      xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      firstView="views.MyTestHome">
 <s:navigationContent>
  <s:Button label="Home"
     click="navigator.popToFirstView();"/>
 </s:navigationContent>

 <s:actionContent/>
</s:MobileApplication>

MyTestHome.mxml:

<?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" 
  title="Test Chart">
</s:View>

to the new MyTestHome.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:mx="library://ns.adobe.com/flex/mx" 
  xmlns:s="library://ns.adobe.com/flex/spark"
  title="Test Chart">

 <fx:Script>
  <![CDATA[
   import mx.collections.*;

   [Bindable]
   private var medalsAC:ArrayCollection = 
    new ArrayCollection( [
    {Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
    {Country:"China", Gold: 32, Silver:17, Bronze: 14 },
    {Country:"Russia", Gold: 27, Silver:27, Bronze: 38 } 
   ]);
  ]]>
 </fx:Script>

 <mx:PieChart id="chart" height="100%" width="100%"
     paddingRight="5" paddingLeft="5" color="0x323232"
     dataProvider="{medalsAC}" >

  <mx:series>
   <mx:PieSeries labelPosition="callout" field="Gold">
    <mx:calloutStroke>
     <s:SolidColorStroke weight="0" 
        color="0x888888" alpha="1.0"/>
    </mx:calloutStroke>
    <mx:radialStroke>
     <s:SolidColorStroke weight="0" 
        color="#FFFFFF" alpha="0.20"/>
    </mx:radialStroke>
    <mx:stroke>
     <s:SolidColorStroke color="0" 
        alpha="0.20" weight="2"/>
    </mx:stroke>
   </mx:PieSeries>
  </mx:series>
 </mx:PieChart> 
</s:View>

and also add

• c:\Program Files\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\frameworks\libs\datavisualization.swc
• c:\Program Files\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\frameworks\libs\sparkskins.swc
• c:\Program Files\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\frameworks\libs\mx\mx.swc

to Flex Build Path (clicking "Add SWC" button):

Then it fails with the error:

Could not resolve to a component implementation.

Does anybody please have an idea here?

Answer 1

Okay got this working, here's what I have setup, using the default Hero SDK that comes with Flash Builder Burrito I was able to ultimately get this working I also tested with the Hero 17689 build and it appears to be working fine as well. You only need the two swcs imported from the 4.5.0\frameworks\libs folders the mx.swc and the datavisualization.swc. After adding these two I also needed to correct the namespaces in order to get it to be recognized and build and run.

TestMobileApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.TestMobileAppHome">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:MobileApplication>

TestMobileAppHome.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:charts="mx.charts.*"
    xmlns:series="mx.charts.series.*"
    xmlns:chartClasses="mx.charts.chartClasses.*" 
    title="Test Chart">

<fx:Script>
    <![CDATA[
        import mx.charts.PieChart;
        import mx.collections.*;

        [Bindable]
        private var medalsAC:ArrayCollection = 
            new ArrayCollection( [
                {Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                {Country:"China", Gold: 32, Silver:17, Bronze: 14 },
                {Country:"Russia", Gold: 27, Silver:27, Bronze: 38 } 
            ]);
    ]]>
</fx:Script>

<charts:PieChart id="chart" height="100%" width="100%"
                 paddingRight="5" paddingLeft="5" color="0x323232"
                 dataProvider="{medalsAC}" >

    <charts:series>
        <series:PieSeries labelPosition="callout" field="Gold">
            <series:calloutStroke>
                <s:SolidColorStroke weight="0" 
                                    color="0x888888" alpha="1.0"/>
            </series:calloutStroke>
            <series:radialStroke>
                <s:SolidColorStroke weight="0" 
                                    color="#FFFFFF" alpha="0.20"/>
            </series:radialStroke>
            <series:stroke>
                <s:SolidColorStroke color="0" 
                                    alpha="0.20" weight="2"/>
            </series:stroke>
        </series:PieSeries>
    </charts:series>
</charts:PieChart>