<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    applicationComplete="popularityService.send()" 
    layout="absolute">
    <mx:Script><![CDATA[
        import mx.charts.HitData;
        import mx.charts.ChartItem;
        import mx.charts.chartClasses.AxisBase;
        import mx.charts.chartClasses.Series;
        
        [Bindable]
        //place your own application ID here in order for this to work
        protected static var APP_ID:String = "Your App ID Here";
        
        /*
         * Since we've got complex, nested XML, the default yField, xField, and radiusField aren't going to cut it.
         * Here we define a custom data function to pull out the data we need via e4x.
         * A typical response node looks like this:
         * 
         * <Artist id="261721" name="Elvis Presley" trackCount="5110">
         *         <ItemInfo>
         *            <ChartPosition last="20" this="11"/>
         *        </ItemInfo>
         *    </Artist>
         */
        protected function dataFunction(series:Series, item:Object, fieldName:String):Object 
        {
           switch(fieldName)
           {
               case "yValue":
                   //values are given as a top 25 list. we want the lowest number on top so we subtract from 25    
                   return int(25 - item.ItemInfo.ChartPosition.attribute("this")) ;
               
               case "xValue":
                   //the previous position in the top 25 controls the placement on the horizontal axis
                   var movement:int = item.ItemInfo.ChartPosition.attribute("last") - item.ItemInfo.ChartPosition.attribute("this");
                   return movement;
                   
            case "zValue":
                //zValue is the radius of the circle in the bubble chart
                //here we define its size by the track count
                return int(item.@trackCount);
                
            default:
                return null;
           }
      }
      
        /*
         * This allows us to show valuable info for each item's data tip.
         */
         protected function dataTipFunction(hd:HitData):String
         {
            //calculate the change in popularity
            var movement:int =  hd.item.ItemInfo.ChartPosition.attribute("last") - hd.item.ItemInfo.ChartPosition.attribute("this");
           
            return "<b>" + hd.item.@name + "</b>" + 
                "<br/>Track Count: " +  hd.item.@trackCount +
                "<br/>Current: " +  hd.item.ItemInfo.ChartPosition.attribute("this") +
                "<br/>Movement: " +  (movement>0?"↑ ":"↓ ") + Math.abs(movement);
         }
    ]]>
    </mx:Script>

    <mx:HTTPService id="popularityService" 
        url="http://us.music.yahooapis.com/artist/v1/list/published/popular?appid={APP_ID}" 
        resultFormat="e4x"/>
        
    <mx:SeriesInterpolate id="effect" elementOffset="30" minimumElementDuration="200" duration="1000"/>
    <mx:Stroke color="0x000000" weight="1" id="stroke"/>
    
    <mx:Label x="10" y="10" text="Most Popular Artists from Yahoo! Music" fontSize="18" fontWeight="normal"/>
  
    <mx:BubbleChart
        dataProvider="{popularityService.lastResult.Artist}" 
        paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" 
        backgroundElements="{[]}" 
        dataTipFunction="dataTipFunction" 
        showDataTips="true" 
        top="0" left="0" right="0" bottom="0">

        <mx:series>
            <mx:BubbleSeries id="columnSeries" 
                stroke="{stroke}" 
                showDataEffect="{effect}" 
                dataFunction="dataFunction"/>
        </mx:series>
        
        <mx:horizontalAxisRenderers>
            <mx:Array>
                <mx:AxisRenderer axis="{linearAxis}" showLabels="false" tickPlacement="none" showLine="false"/>
            </mx:Array>
        </mx:horizontalAxisRenderers>
        
        <mx:verticalAxisRenderers>
            <mx:Array>
                <mx:AxisRenderer axis="{verticalAxis}" showLabels="false" tickPlacement="none" showLine="false"/>
            </mx:Array>
        </mx:verticalAxisRenderers>
        
        <mx:horizontalAxis>
            <mx:LinearAxis id="linearAxis"/>
        </mx:horizontalAxis>
        
        <mx:verticalAxis>
            <mx:LinearAxis id="verticalAxis"/>
        </mx:verticalAxis>
            
        <mx:filters>
           <mx:DropShadowFilter blurX="10" blurY="10" distance="1" color="0x000000" alpha=".9" />
        </mx:filters>
        
    </mx:BubbleChart>
    
</mx:Application>