<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:effects="qs.charts.effects.*"
backgroundColor="0xffffff" xmlns:skin="skin.*">
<mx:Style source="assets/css/bubble.css"/>
<mx:Script>
<![CDATA[
import skin.BreadCrumbLink;
import skin.ChartBackground;
import mx.events.DynamicEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var mainData:ArrayCollection = new ArrayCollection( [
{x: 20, y: 10, r:10, label:"Sales Team 1", id:2, type:"main" },
{x: 40, y: 30, r:20, label:"Sales Team 2", id:1, type:"main" } ,
{x: 60, y: 80, r:30, label:"Sales Team 3", id:0, type:"main" }]);
[Bindable]
private var d0:ArrayCollection = new ArrayCollection( [
{x: 10, "y": 30, "r":30, "label":"Jim", "id":0, type:"sub", image:"Picture 2.jpg" },
{x: 54, "y": 25, "r":10, "label":"Nate", "id":1, type:"sub", image:"Picture 1.jpg" },
{x: 42, "y": 15, "r":30, "label":"Jane", "id":2, type:"sub", image:"Picture 3.jpg" },
{x: 16, "y": 35, "r":10, "label":"Doug", "id":3, type:"sub", image:"Picture 6.jpg" },
{x: 22, "y": 20, "r":20, "label":"Sara", "id":4, type:"sub", image:"Picture 9.jpg" } ]);
[Bindable]
private var d1:ArrayCollection = new ArrayCollection( [
{"x": 85, "y": 88, "r":74, "label":"Joe", "id":0, type:"sub", image:"Picture 7.jpg" },
{"x": 69, "y": 71, "r":67, "label":"Kim", "id":1, type:"sub", image:"Picture 8.jpg" },
{"x": 75, "y": 69, "r":45, "label":"Mike", "id":2, type:"sub", image:"Picture 10.jpg" },
{"x": 88, "y": 28, "r":22, "label":"Laura", "id":3, type:"sub", image:"Picture 4.jpg" },
{"x": 78, "y": 77, "r":87, "label":"Barb", "id":3, type:"sub", image:"Picture 11.jpg" },
{"x": 24, "y": 38, "r":18, "label":"Kelly", "id":4, type:"sub", image:"Picture 5.jpg" } ]);
[Bindable]
private var d2:ArrayCollection = new ArrayCollection( [
{"x": 79, "y": 80, "r":87, "label":"Eric", "id":0, type:"sub", image:"Picture 10.jpg" },
{"x": 88, "y": 75, "r":69, "label":"Tim", "id":1, type:"sub", image:"Picture 13.jpg" },
{"x": 77, "y": 75, "r":28, "label":"John", "id":2, type:"sub", image:"Picture 14.jpg" },
{"x": 68, "y": 75, "r":47, "label":"Ty", "id":3, type:"sub", image:"Picture 15.jpg" },
{"x": 58, "y": 80, "r":33, "label":"Scott", "id":4, type:"sub", image:"Picture 16.jpg" } ]);
private function drillDown(e:DynamicEvent):void
{
myChart.showDataTips = false;
bubbleSeries.setStyle("showDataEffect",effD);
addBreadCrumb(e.chartData.label);
_linkIndex = e.chartData.id;
effD.chartItem = e.chartItem;
switch(e.chartData.id)
{
case 0: myChart.dataProvider = d2;break;
case 1: myChart.dataProvider = d1;break;
case 2: myChart.dataProvider = d0;break;
}
}
private function upOneLevel(e:DynamicEvent):void
{
bubbleSeries.setStyle("showDataEffect",effU);
myChart.showDataTips = false;
bcHolder.removeChildAt(1);
effU.drillToIndex = _linkIndex;
myChart.dataProvider = mainData;
}
private function addEventListerners():void
{
var bgElement:ChartBackground = new ChartBackground();
bgElement.id = "chartBackground";
myChart.backgroundElements = [bgElement,bge];
bge.clear();
bge.lineStyle(1, 0xFFFFFF, 1, false, LineScaleMode.NORMAL, CapsStyle.SQUARE, JointStyle.BEVEL, 2 );
bge.moveTo(0, 53);
bge.lineTo(100, 53);
systemManager.addEventListener('dataTipClick', drillDown);
systemManager.addEventListener('upOneLevel', upOneLevel);
}
private function addBreadCrumb(l:String):void
{
var bc:BreadCrumbLink = new BreadCrumbLink();
bc.label = l;
bcHolder.addChild(bc);
}
[Bindable]
private var _linkIndex:int = 0;
]]>
</mx:Script>
<mx:Stroke id="axisStroke"
color="#FFFFFF"
weight="1"
alpha="1"
caps="square"/>
<mx:Stroke id="tickStroke"
color="#FFFFFF"
weight="1"
alpha="1"
caps="square"/>
<mx:Canvas id="backGround" styleName="backGroundSkin" width="100%" height="100%" left="30" right="5" bottom="5" top="3">
<mx:Label top="2" left="5" text="Interactive Bubble Chart" styleName="titleText"/>
<mx:filters>
<flash.filters:DropShadowFilter id='dropShadowFilter' xmlns:flash.filters='flash.filters.*'
angle='45'
blurX='4' blurY='4'
distance='4'
alpha='0.4' color='#000000'
knockout='false' quality='1'
strength='1' inner='false' hideObject='false'/>
</mx:filters>
</mx:Canvas>
<mx:Canvas id="blueBackground" styleName="contentSkin" width="100%" height="100%" right="20" bottom="10" left="10" top="50">
<mx:BubbleChart id="myChart"
includeInLayout="{myChart.visible}"
creationComplete="addEventListerners()"
maxRadius="25" minRadius="8"
top="50" bottom="10" left="10" right="20"
dataTipMode="single"
visible="true"
showDataTipTargets="false"
mouseChildren="false"
selectionMode="single"
dataProvider="{mainData}"
dataTipRenderer="itemrenderer.DataTip"
showDataTips="true">
<mx:backgroundElements>
<mx:CartesianDataCanvas id="bge" includeInRanges="false" />
</mx:backgroundElements>
<mx:verticalAxis>
<mx:LinearAxis id="a1" baseAtZero="false" autoAdjust="true" maximum="100" minimum="0" interval="10" title="SCORE"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis id="a2" baseAtZero="false" autoAdjust="true" maximum="100" minimum="0" interval="10" title="SALES GROWTH"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{a2}">
<mx:axisStroke>{axisStroke}</mx:axisStroke>
<mx:tickStroke>{tickStroke}</mx:tickStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{a1}">
<mx:axisStroke>{axisStroke}</mx:axisStroke>
<mx:tickStroke>{tickStroke}</mx:tickStroke>
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:series>
<mx:BubbleSeries id="bubbleSeries" selectable="true"
itemRenderer="itemrenderer.ChartRenderer"
xField="x"
yField="y"
radiusField="r">
</mx:BubbleSeries>
</mx:series>
</mx:BubbleChart>
</mx:Canvas>
<mx:HBox id="bcHolder" width="100%" top="40" left="50" horizontalGap="1" >
<skin:BreadCrumbLink label="All Teams"/>
</mx:HBox>
<effects:DrillDownEffect id="effD" duration="1000" effectEnd="myChart.mouseChildren = true;myChart.showDataTips = true;"/>
<effects:DrillUpEffect id="effU" duration="1000" effectEnd="myChart.mouseChildren = true;myChart.showDataTips = true;" />
</mx:Application>