<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.anychart.*" creationComplete="initChart();" viewSourceURL="srcview/index.html"> <mx:XMLList id="salesData"> <order Month="Jan" ProductA="24873" ProductB="22763" ProductC="6135"/> <order Month="Feb" ProductA="18198" ProductB="34234" ProductC="9623"/> <order Month="Mar" ProductA="10217" ProductB="21876" ProductC="13163"/> <order Month="Apr" ProductA="29873" ProductB="11109" ProductC="26643"/> <order Month="May" ProductA="22129" ProductB="16251" ProductC="34754"/> <order Month="Jun" ProductA="14876" ProductB="24623" ProductC="18247"/> <order Month="Jul" ProductA="26120" ProductB="27411" ProductC="32235"/> <order Month="Aug" ProductA="31787" ProductB="19634" ProductC="26641"/> <order Month="Sep" ProductA="24214" ProductB="13777" ProductC="14623"/> <order Month="Oct" ProductA="14247" ProductB="11262" ProductC="28741"/> <order Month="Nov" ProductA="27623" ProductB="17264" ProductC="12246"/> <order Month="Dec" ProductA="18734" ProductB="18746" ProductC="31624"/> </mx:XMLList> <ns1:AnyChartFlex width="682" height="257" id="firstLevelChart" pointClick="onPointClick(event);" horizontalCenter="-11" verticalCenter="-152"/> <ns1:AnyChartFlex width="682" height="295" id="secondLevelChart" horizontalCenter="-11" verticalCenter="132"/> <mx:Script> <![CDATA[ import com.anychart.events.AnyChartPointEvent; private function initChart():void { firstLevelChart.anychartXML=createFirstLevelChartXML(); } private function calcPeriodSalesSum(fromMonth:int,toMonth:int):Number { var sum:Number=0; for(var i:int=fromMonth;i<=toMonth;i++) { sum+=Number(salesData[i].@ProductA)+Number(salesData[i].@ProductB)+Number(salesData[i].@ProductC); } return sum; } private function createFirstLevelChartXML():XML { var xmlData:XML= <anychart> <margin all="0"/> <settings> <animation enabled="true"/> </settings> <charts> <chart> <chart_settings> <title align="Near"> <text>ACME Corp. Sales 2007</text> </title> <axes> <y_axis> <title><text>Sales</text></title> <labels> <format>{"${%Value}{numDecimals:0}"}</format> </labels> <minor_grid enabled="false"/> <scale minimum="50000"/> </y_axis> <x_axis> <title><text>Period</text></title> </x_axis> </axes> <chart_background> <border color="Rgb(150,150,150)" thickness="1"/> <corners type="Square"/> </chart_background> </chart_settings> <data_plot_settings> <bar_series style="AquaLight"> <label_settings enabled="true"> <format>{"${%Value}{numDecimals:0}"}</format> </label_settings> <tooltip_settings enabled="true"> <format>{"Period: {%Name}\nSales: {%Value}{numDecimals:0}\nRatio: {%YPercentOfSeries}{numDecimals:1}%"}</format> </tooltip_settings> <marker_settings enabled="true" color="Gold"> <marker type="None" size="10" anchor="Center" v_align="Center" h_align="Center"/> <states> <hover> <marker type="Circle"/> <border thickness="2"/> </hover> <pushed> <marker type="Circle" size="6"/> <border thickness="2"/> </pushed> <selected_normal> <marker type="Star5" size="16"/> <border thickness="1"/> </selected_normal> <selected_hover> <marker type="Star5" size="12"/> <border thickness="1"/> </selected_hover> </states> </marker_settings> </bar_series> </data_plot_settings> <data> <series> <point name="Quarter 1" y={calcPeriodSalesSum(0,2)} selected="true"/> <point name="Quarter 2" y={calcPeriodSalesSum(3,5)}/> <point name="Quarter 3" y={calcPeriodSalesSum(6,8)}/> <point name="Quarter 4" y={calcPeriodSalesSum(9,11)}/> </series> </data> </chart> </charts> </anychart>; return xmlData; } private function getPeriodDetailedDataByProduct(product:String,fromMonth:int,toMonth:int):XML { var seriesXML:XML=<series name={product}/>; for(var i:int=fromMonth;i<=toMonth;i++) { var value:Number=0; switch(product) { case "Product A": value=Number(salesData[i].@ProductA); break; case "Product B": value=Number(salesData[i].@ProductB); break; case "Product C": value=Number(salesData[i].@ProductC); break; } var pointXML:XML=<point name={salesData[i].@Month} y={value}/>; seriesXML.appendChild(pointXML); } return seriesXML; } private function createSecondLevelChartXML(period:String):XML { var fromMonth:int=0; var toMonth:int=11; switch(period) { case "Quarter 1": fromMonth=0; toMonth=2; break; case "Quarter 2": fromMonth=3; toMonth=5; break; case "Quarter 3": fromMonth=6; toMonth=8; break; case "Quarter 4": fromMonth=9; toMonth=11; break; } var xmlData:XML= <anychart> <margin all="0"/> <settings> <animation enabled="true"/> </settings> <charts> <chart> <chart_settings> <title align="Near"> <text>{period}</text> </title> <axes> <y_axis> <scale mode="Stacked"/> <title> <text>Sales</text> </title> <labels> <format>{"${%Value}{numDecimals:0}"}</format> </labels> <minor_grid enabled="False"/> </y_axis> <x_axis> <title> <text>Month</text> </title> </x_axis> </axes> <chart_background> <border color="Rgb(150,150,150)" thickness="1"/> <corners type="Square"/> </chart_background> </chart_settings> <data_plot_settings> <bar_series style="AquaLight"> <label_settings enabled="true"> <position anchor="Center" valign="Center" halign="Center"/> <font color="White"> <effects enabled="true"> <drop_shadow enabled="true" distance="1" opacity="0.8" blur_x="1" blur_y="2"/> </effects> </font> </label_settings> <tooltip_settings enabled="true"> <format>{"Month: {%Name}\nSales: {%Value}{numDecimals:0}\nRatio: {%YPercentOfCategory}{numDecimals:1}%"}</format> </tooltip_settings> </bar_series> </data_plot_settings> <data> {getPeriodDetailedDataByProduct("Product A",fromMonth,toMonth)} {getPeriodDetailedDataByProduct("Product B",fromMonth,toMonth)} {getPeriodDetailedDataByProduct("Product C",fromMonth,toMonth)} </data> </chart> </charts> </anychart>; trace(xmlData.toXMLString()); return xmlData; } private function onPointClick(event:AnyChartPointEvent):void { this.secondLevelChart.anychartXML=createSecondLevelChartXML(event.pointName); } ]]> </mx:Script> </mx:Application>