<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rd="com.robsondesign.charts.series.*" layout="absolute" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.charts.HitData;
            
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var chartData:Array = [{name:"John", sales:108000, commission:5400, leads:24},
                                          {name:"Paul", sales:150000, commission:6400, leads:27},
                                          {name:"George", sales:180000, commission:7400, leads:21},
                                          {name:"Ringo", sales:124000, commission:5700, leads:30}];
            [Bindable]
            public var haValues:Array = ["left", "center", "right"];
            [Bindable]
            public var vaValues:Array = ["top", "middle", "bottom"];
            
            private function dataTip(hitData:HitData):String
            {
                var item:Object = hitData.item;
                var html:String = "<b>Sales</b>: " + currencyFormatter.format(item.sales) + "<br>";
                html += "<b>Commission</b>: " + currencyFormatter.format(item.commission) + "<br>";
                html += "<b>Leads</b>: " + item.leads;
                return html;
            }
            
        ]]>
    </mx:Script>

    <mx:BubbleChart id="bc" showDataTips="true" dataTipFunction="dataTip">
        <mx:series>
            <!-- The primary departure from the standard BubbleSeries class is that the 
                 LabeledBubbleSeries has four data fields: In addition to xField, yField, and radiusField,
                 there is also a labelField property. As the name suggests, this is the name of the field
                 that stores the string that should be displayed in each bubble's label. 
                 Secondarily, there are also some additional styles, which control the location of the text
                 within the bubble. The combo boxes provide a way to experiment with these, and are pre-set
                 to the default values (center and top). --> 
            <rd:LabeledBubbleSeries dataProvider="{chartData}" 
                                    labelField="name" xField="leads" yField="sales" radiusField="commission" 
                                    textAlign="{haCombo.value}" textVAlign="{vaCombo.value}" />
        </mx:series>
    </mx:BubbleChart>
    
    <mx:Form id="form" x="{bc.width+(bc.x*2)}" y="21">
        <mx:FormHeading label="Text Alignment Settings" />
        <mx:FormItem label="Horizontal Alignment">
            <mx:ComboBox id="haCombo" dataProvider="{haValues}" selectedIndex="1" />
        </mx:FormItem>
        <mx:FormItem label="Vertical Alignment">
            <mx:ComboBox id="vaCombo" dataProvider="{vaValues}" selectedIndex="0" />
        </mx:FormItem>
    </mx:Form>
    
    <mx:CurrencyFormatter id="currencyFormatter" />
</mx:Application>