<?xml version="1.0"?>
<!-- charts/AddDataItem.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:ns1="com.anychart.*" layout="absolute" creationComplete="initChart();" viewSourceURL="srcview/index.html">
    <mx:TabNavigator width="559" height="422" id="tabCtrl" creationPolicy="all" horizontalCenter="0" verticalCenter="2">
        <mx:Canvas label="Chart Preview" width="100%" height="100%" id="chartPage">
            <ns1:AnyChartFlex x="0" y="0" width="100%" height="100%" id="chart"/>
        </mx:Canvas>
        <mx:Canvas label="Output XML" width="100%" height="100%">
            <mx:TextArea x="10" y="10" width="537" height="369" id="editOutputXML"/>
        </mx:Canvas>
    </mx:TabNavigator>
    
    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.collections.ICollectionView;
            import mx.collections.ArrayCollection;
             
             public var chartData:ArrayCollection = new ArrayCollection([
                    {x:148,y:180,size:76},
                    {x:177,y:56,size:92},
                    {x:17,y:238,size:83},
                    {x:213,y:65,size:20},
                    {x:178,y:169,size:78},
                    {x:232,y:236,size:35},
                    {x:19,y:149,size:64},
                    {x:173,y:51,size:92},
                    {x:208,y:223,size:3},
                    {x:66,y:231,size:29},
                    {x:204,y:128,size:1},
                    {x:34,y:129,size:56},
                    {x:237,y:99,size:98},
                    {x:96,y:103,size:98},
                    {x:233,y:152,size:10},
                    {x:118,y:197,size:47},
                    {x:154,y:139,size:76},
                    {x:14,y:228,size:90},
                    {x:8,y:162,size:44},
                    {x:213,y:177,size:48},
                    {x:162,y:221,size:98},
                    {x:220,y:92,size:52},
                    {x:72,y:102,size:17},
                    {x:133,y:78,size:77},
                    {x:181,y:22,size:50},
                    {x:47,y:125,size:48},
                    {x:117,y:176,size:64},
                    {x:81,y:95,size:57},
                    {x:82,y:223,size:93},
                    {x:117,y:94,size:20},
                    {x:212,y:4,size:74},
                    {x:23,y:17,size:24},
                    {x:157,y:39,size:53},
                    {x:173,y:172,size:4},
                    {x:99,y:144,size:4},
                    {x:240,y:199,size:54},
                    {x:106,y:34,size:30},
                    {x:151,y:90,size:64},
                    {x:172,y:8,size:90},
                    {x:208,y:157,size:96},
                    {x:203,y:160,size:66},
                    {x:92,y:23,size:87},
                    {x:212,y:108,size:8},
                    {x:53,y:130,size:94},
                    {x:235,y:185,size:18},
                    {x:171,y:96,size:39},
                    {x:119,y:87,size:22},
                    {x:173,y:38,size:95},
                    {x:200,y:115,size:8},
                    {x:154,y:53,size:68}
                ]);
             
             private function createBubbleSeriesFromAC(collection:ArrayCollection,xField:String,yField:String,sizeField:String):XML
             {
                 var seriesXML:XML=<series type="Bubble" style="Aqua"/>;
                 
                 for(var i:int=0;i<collection.length;i++) {
                     seriesXML.appendChild(<point x={collection[i][xField]} y={collection[i][yField]} size={collection[i][sizeField]}/>);
                 }
                 return seriesXML;
             }
             
             private function initChart():void
             {
                 var xmlData:XML=
                     <anychart>
                         <charts>
                             <chart plot_type="Scatter">
                                 <data>
                                     {createBubbleSeriesFromAC(this.chartData,"x","y","size")}
                                 </data>
                                 <chart_settings>
                                     <title enabled="false"/>
                                     <axes>
                                         <y_axis><title enabled="false"/></y_axis>
                                         <x_axis><title enabled="false"/></x_axis>
                                     </axes>                            
                                 </chart_settings>
                                 <data_plot_settings>
                                     <bubble_series>
                                         <tooltip_settings enabled="true">
                                             <format>{"X: {%XValue}\nY: {%YValue}\nSize: {%BubbleSize}"}</format>
                                         </tooltip_settings>
                                     </bubble_series>
                                 </data_plot_settings>
                             </chart>
                         </charts>
                     </anychart>;
                 
                 chart.anychartXML=xmlData;
                 editOutputXML.text=xmlData.toXMLString();                 
             }
        ]]>
    </mx:Script>
</mx:Application>