LineChartRenderer.mxml

The following code generates line chart.And the line chart can be drilldown based on adding Levels in the following Zoomintoseries().


<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%" creationComplete="initApp()">
   
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.charts.HitData;
            import mx.charts.events.ChartItemEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.soap.WebService;
           
            private var ws:WebService;
            private var Level:int = 0;
            private var Cdtxt:String = "";
            private var LocCd:String = "";
            private var Cd:String = "";
           
            [Bindable]
            public var dpac:ArrayCollection = new ArrayCollection
           
            public var initSeriesArray:Array = new Array();
            public var level:Number = 1;
            public var newSeries:Array;
            [Bindable]
            public var drillDownDataSet:ArrayCollection;
           
            [Bindable]
            public var dp:ArrayCollection = dpac;

            override public function set data(value:Object):void
            {
                super.data = value;
               
                if (value.hasOwnProperty("detail1"))
                    //chart.dataProvider = value.detail1;
                    dp = value.detail1;
                    dpac = dp
/*                     var TmpObj:Object = new Object();
                    TmpObj['CUST'] = 'TSD1'
                    TmpObj['amount'] = 100000
                    dp.addItem(TmpObj);
 */            }
           
            private function initApp():void
            {
                initSeriesArray = chart.series;            
            }
           
            private function zoomIntoSeries(e:ChartItemEvent):void
            {
                e.stopImmediatePropagation();
                var hitData:HitData = e.hitData;
               
                if (Level==0)
                {
                    Cdtxt = "DRILL1"
                    LocCd = hitData.item.CUST;
                    Cd = "";
                }
                else if (Level==1)
                {
                    Cdtxt = "DRILL2"
                    LocCd = hitData.item.LOC;
                    Cd = hitData.item.CUST;
                }
                else
                {
                    Cdtxt = "DRILL"
                    LocCd = hitData.item.LOC;
                    Cd = "";               
                }
               
                ws = new WebService();
                ws.wsdl="http://localhost/ds/Service1.asmx?WSDL";
                ws.addEventListener("result", echoResultHandler);
                ws.addEventListener("fault", faultHandler);
                ws.loadWSDL();
                ws.search("Test_Test", Cdtxt, Cd, "", LocCd, "", "", "");
               
            }
           
            private function echoResultHandler(event:ResultEvent):void
            {
                var pietmpArr:ArrayCollection = new ArrayCollection();
                var TmpArr:ArrayCollection = new ArrayCollection();
                pietmpArr = event.result.Tables.Table.Rows;
                for (var i:int=0; i<=pietmpArr.length-1;i++)
                {
                    var TmpObj:Object = new Object();
                    TmpObj['CUST'] = pietmpArr[i].ACT
                    TmpObj['amount'] = pietmpArr[i].VAL
                    TmpObj['LOC'] = pietmpArr[i].CD
                    TmpArr.addItem(TmpObj);
                }
                dp = TmpArr
                if (Cdtxt == "DRILL")
                {
                    Level = 0
    /*                 var TmpObj:Object = new Object();
                    TmpObj['CUST'] = 'TSD1'
                    TmpObj['amount'] = 100000
                    dp.addItem(TmpObj); */
                }
                else
                {
                    Level = Level + 1   
                }   
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show("Bye")
            }

        ]]>
    </mx:Script>

    <mx:SeriesZoom id="zoomIn"  duration="1000"  verticalFocus="bottom"/>
    <mx:SeriesSlide id="zoomOut" duration="1000" direction="left"/>

    <mx:LineChart id="chart"
                  height="178"
                  width="100%"
                  gridLinesStyleName=""
                  showDataTips="true"
                  dataProvider="{dp}"
                  itemClick="zoomIntoSeries(event)">
<!--        <mx:series>
            <mx:LineSeries yField="amount" form="curve"  >
                <mx:lineStroke>
                    <mx:Stroke weight="1"  />
                </mx:lineStroke>
            </mx:LineSeries>
        </mx:series>
-->       
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca1" categoryField="CUST"/>
        </mx:horizontalAxis>

        <mx:series>
            <mx:LineSeries id="s1"
                           xField="CUST" 
                           yField="amount"
                           form="curve"
                           displayName="CUST"
                           hideDataEffect="zoomOut"
                           showDataEffect="zoomIn"
/>
<!--            <mx:LineSeries id="s1" yField="amount" form="curve" displayName="AMOUNT"/>-->
        </mx:series>

        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer visible="true"/>
        </mx:horizontalAxisRenderer>
        <mx:verticalAxisRenderer>
            <mx:AxisRenderer visible="true"/>
        </mx:verticalAxisRenderer>
    </mx:LineChart>
</mx:HBox>