I have been working on flex chart utilizing the range selector component. Technically I have two charts on top of each other and based on the one on the bottom the top chart x axis is being updated. It works fine with up to 300 records, but anything more than that the my slider which is updating the chart is being extremely unresponsive and useless. I tried figuring out where this slowness comes from and wasn't able to determine the reason.
I hope someone can detect where my problem may be coming from. My input comes as an xml file with 2600 records in the following format structure: - <NFS> - <Trade> <OrNo>0000000Y</OrNo> <Date>6/10/2008 6:25:00 AM</Date> <IP>10.200.79.146</IP> <Ex>CBOT-A</Ex> <A>Add</A> <Trd>TTORDMNMADN1ABERNAL</Trd> <W2G>15</W2G> <W2E>15</W2E> <G2E>0</G2E> </Trade> </NFS> Thank you for everyone who would take the time to look at my code. And this is the entire code to my chart. <?xml version="1.0" encoding="utf-8"?> <mx:Application width="100%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns:mccune="com.dougmccune.controls.*" initialize="init()" creationComplete="chartComplete()" backgroundColor="#FFFFFF" > <mx:HTTPService id="nfsXML" url="Data/nfsDataC.xml" showBusyCursor="true" fault="faultHandler(event)" result="resultHandler(event)" method="GET" /> <!-- Define custom colors to use as plot point fills. --> <mx:SolidColor id="sc1" color="green" alpha=".5"/> <mx:SolidColor id="sc2" color="red" alpha=".5"/> <mx:SolidColor id="sc3" color="#0045f0" alpha=".5"/> <mx:SolidColor id="sc4" color="Blue" alpha=".5"/> <!-- Define custom Strokes. --> <mx:Stroke id="s1" color="green" weight="1"/> <mx:Stroke id="s2" color="red" weight="1"/> <mx:Stroke id="s3" color="#0045f0" weight="1"/> <mx:Stroke id="s4" color="blue" weight="1"/> <mx:Panel title="NFS Analysis" width="100%"> <mx:Legend dataProvider="{bigChart}" direction="horizontal"/> </mx:Panel> <mx:Spacer height="20"/> <mx:HBox height="30"> <mx:Label width="100%" color ="blue" text="Lookup by Order Number:"/> <mx:TextInput id="txtOrderNum" /> <mx:Button label="Look Up" id="btnLookup" click="selectItems(event)"/> <mx:Button label="Clear Selection" id="btnClr" click="bigChart.clearSelection()"/> </mx:HBox> <mx:Spacer height="10" /> <mx:CartesianChart id="bigChart" selectionMode="multiple" mouseSensitivity="5" dataTipMode="multiple" width="80%" height="80%" showDataTips="true" dataTipFunction="myDataTipFunction" dataProvider="{mainData}" > <mx:horizontalAxis> <!--<mx:DateTimeAxis dataUnits="hours" parseFunction="parseDate"/>--> <!--<mx:CategoryAxis categoryField = "E" title="Date/Time"/>--> <mx:DateTimeAxis id ="bigChartDateAxis" /> </mx:horizontalAxis> <mx:horizontalAxisRenderer> <mx:AxisRenderer visible="true" /> </mx:horizontalAxisRenderer> <mx:verticalAxis> <mx:LinearAxis title="" /> </mx:verticalAxis> <mx:verticalAxisRenderer> <mx:AxisRenderer visible="true" /> </mx:verticalAxisRenderer> <mx:backgroundElements> <mx:GridLines direction="both" alpha="1" > <mx:horizontalStroke> <mx:Stroke color="black" weight="0" alpha="0.2" /> </mx:horizontalStroke> </mx:GridLines> <mx:Image source="Assets/Power_By_Logo_Faded.gif" horizontalAlign="center" alpha=".09"/> </mx:backgroundElements> <mx:series> <mx:PlotSeries yField="W2G" radius="2" xField="Date" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="W2G" fill="{sc1}" stroke="{s1}" /> <mx:PlotSeries yField="G2E" xField="Date" radius="2" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="G2E" fill="{sc2}" stroke="{s2}" /> <mx:PlotSeries radius="2" yField="W2E" xField="Date" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="W2E" fill="{sc3}" stroke="{s3}" /> </mx:series> <mx:annotationElements> <mx:Canvas width="100%" height="100%" buttonMode="true" mouseDown="setMouseDown(bigChart)" /> </mx:annotationElements> </mx:CartesianChart> <mx:VBox verticalGap="0" width="100%" verticalScrollPolicy="off" horizontalAlign="center"> <mx:CartesianChart id="smallChart" dataProvider="{chartData.source}" width="80%" showDataTips="true" height="100" > <mx:horizontalAxis> <mx:DateTimeAxis id="smallChartDateAxis" /> <!--<mx:CategoryAxis categoryField = "E" title="Date/Time"/>--> </mx:horizontalAxis> <mx:horizontalAxisRenderer> <mx:AxisRenderer visible="false" /> </mx:horizontalAxisRenderer> <mx:verticalAxis><mx:LinearAxis/></mx:verticalAxis> <mx:verticalAxisRenderer> <mx:AxisRenderer visible="false" /></mx:verticalAxisRenderer> <mx:series> <mx:PlotSeries yField="W2G" radius="2" xField="Date" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="W2G" fill="{sc1}" stroke="{s1}" /> <mx:PlotSeries yField="G2E" xField="Date" radius="2" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="G2E" fill="{sc2}" stroke="{s2}" /> <mx:PlotSeries radius="2" yField="W2E" xField="Date" itemRenderer="mx.charts.renderers.CircleItemRenderer" displayName="W2E" fill="{sc3}" stroke="{s3}" /> </mx:series> <mx:annotationElements> <mx:HDividedBox id="overlayCanvas" width="100%" alpha="1" dividerAffordance="5" liveDragging="true" horizontalGap="10" verticalGap="0" horizontalScrollPolicy="off" dividerDrag="updateBoundariesFromDivider(event)" dividerSkin="{blankDividerClass}" mouseOver="overlayCanvas.setStyle('dividerSkin', dividerClass);" mouseOut="overlayCanvas.setStyle('dividerSkin', blankDividerClass);"> <mx:Canvas id="leftBox" height="100%" width="{(overlayCanvas.width / chartData.length) * leftBoundary}" backgroundAlpha="0.8" backgroundColor="#EEEEEE" borderThickness="1" borderColor="#999999" borderStyle="solid" /> <mx:Canvas id="visibleBox" width="100%" height="100%" buttonMode="true" mouseDown="setMouseDown(smallChart)" /> <mx:Canvas id="rightBox" height="100%" width="{(overlayCanvas.width / chartData.length) * (chartData.length - rightBoundary)}" backgroundAlpha="0.8" backgroundColor="#EEEEEE" borderThickness="1" borderColor="#999999" borderStyle="solid"/> </mx:HDividedBox> </mx:annotationElements> </mx:CartesianChart> <mx:Spacer height="-30" /> <mccune:HSlider id="slider" width="{overlayCanvas.width}" height="25" trackHighlightSkin="com.dougmccune.skins.SliderThumbHighlightSkin" allowTrackClick="true" allowThumbOverlap="false" liveDragging="true" change="updateBoundariesFromSlider()" showDataTip="true" dataTipPlacement="bottom" dataTipOffset="3" showTrackHighlight="true" thumbCount="2" snapInterval="1" values="{[leftBoundary, rightBoundary]}" minimum="0" maximum="{chartData.length - 1}" /> </mx:VBox> HERE IS THE REST: <mx:Script> <![CDATA[ import mx.charts.DateTimeAxis; import mx.utils.ObjectProxy; import mx.charts.series.PlotSeries; import mx.charts.series.items.PlotSeriesItem; import mx.rpc.events.ResultEvent; import mx.charts.GridLines; import mx.rpc.events.FaultEvent; import mx.controls.Alert; import mx.charts.chartClasses.Series; import mx.managers.SystemManager; import mx.events.ResizeEvent; import mx.graphics.Stroke; import mx.graphics.SolidColor; import mx.collections.ArrayCollection; import mx.events.DividerEvent; import mx.managers.SystemManager; import mx.charts.HitData; import mx.graphics.IFill; import mx.charts.ChartItem; import mx.core.IFlexDisplayObject; import mx.charts.events.ChartItemEvent; import mx.charts.series.ColumnSeries; import mx.effects.Move; import mx.events.DragEvent; import mx.controls.List; import mx.managers.DragManager; import mx.core.DragSource; import mx.rpc.events.*; import mx.rpc.http.HTTPService; import mx.utils.ObjectUtil; [Embed(source="divider.png")] [Bindable] public var dividerClass:Class; [Embed(source="blank.png")] [Bindable] public var blankDividerClass:Class; //private var LEFT_START:Number = 123;//Covert to date object value //private var RIGHT_START:Number = 250;//Covert to date object value //Decrlare array to gather data from web service //and distribute to chart elements [Bindable] public var chartData:ArrayCollection; [Bindable] public var mainData:ArrayCollection; [Bindable] public var xmlData:ArrayCollection;//Initially takes the data from xml [Bindable] private var leftBoundary:Number; [Bindable] private var rightBoundary:Number; private var staticLeftBoundary:Number; private var staticRightBoundary:Number; public var smallDrag:Boolean = false; public var bigDrag:Boolean = false; public var mouseXRef:Number; private function init():void { nfsXML.send(); txtOrderNum.text = new Date(2008, 05, 12).toString(); } private function chartComplete():void { } public function resultHandler(event:ResultEvent):void { if(event.result.NFS.Trade == null ) { mx.controls.Alert.show("The response data are empty !"); } else if ( event.result.NFS.Trade is ObjectProxy ) { // the response data has only one item xmlData = new ArrayCollection( [event.result.NFS.Trade ] ); chartData = new ArrayCollection(xmlData.source); mainData = new ArrayCollection(chartData.source); leftBoundary = 10; //SET left boundary to be be set a week from the present day... rightBoundary = 30;//SET right boundary to be set updateBoundariesFromSlider(); } else { xmlData = event.result.NFS.Trade as ArrayCollection; chartData = new ArrayCollection(xmlData.source); mainData = new ArrayCollection(chartData.source); leftBoundary = 10; //SET left boundary to be be set a week from the present day... rightBoundary = 30;//SET right boundary to be set updateBoundariesFromSlider(); } } public function faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString, "Failed loading data!"); } //Not in use private function loadData(smallChart:CartesianChart, bigChart:CartesianChart, data:ArrayCollection):void { bigChart.dataProvider=data; smallChart.dataProvider=data; } private function updateBoundariesFromSlider():void { leftBoundary = slider.values[0]; rightBoundary = slider.values[1]; updateMainData(); } private function updateBoundariesFromDivider(eventividerEvent):vo id { leftBoundary = Math.abs(HDividedBox(event.target).getChildAt(0).w idth / (event.target.width / chartData.length)); rightBoundary = Math.abs(chartData.length - (HDividedBox(event.target).getChildAt(2).width / (event.target.width / chartData.length))); updateMainData(); } private function updateMainData():void { mainData.source = chartData.source.slice(leftBoundary, rightBoundary) } private function setMouseDown(theChart:CartesianChart):void { mouseXRef = this.mouseX; staticLeftBoundary = leftBoundary; staticRightBoundary = rightBoundary; if(theChart == bigChart) bigDrag = true; if(theChart == smallChart) smallDrag = true; this.systemManager.addEventListener(MouseEvent.MOU SE_MOVE, moveChart); this.systemManager.addEventListener(MouseEvent.MOU SE_UP, stopDragging); } private function stopDragging(event:MouseEvent):void { smallDrag = false; bigDrag = false; this.systemManager.removeEventListener(MouseEvent. MOUSE_MOVE, moveChart); this.systemManager.removeEventListener(MouseEvent. MOUSE_UP, stopDragging); } private function moveChart(event:MouseEvent):void { if(bigDrag) { leftBoundary = staticLeftBoundary + (mouseXRef - this.mouseX) / (bigChart.width / mainData.length); rightBoundary = staticRightBoundary + (mouseXRef - this.mouseX) / (bigChart.width / mainData.length); } else if(smallDrag) { leftBoundary = staticLeftBoundary - (mouseXRef - this.mouseX) / (smallChart.width / chartData.length); rightBoundary = staticRightBoundary - (mouseXRef - this.mouseX) / (smallChart.width / chartData.length); } } public function selectItems(event:Event):void { var allSeries:Array = bigChart.series; for (var i:int=0; i < allSeries.length; i++) { var selectedData:Array = []; // Iterate over each item in the series. for (var j:int=0; j< mainData.length; j++) { if (mainData.getItemAt(j).OrNo == String(txtOrderNum.text)) { selectedData.push(j); } } allSeries[i].selectedIndices = selectedData; } txtOrderNum.text = ''; } public function ResetChart():void { leftBoundary = 1;//SET left boundary to be be set a week from the present day... rightBoundary = 300;//SET right boundary to be set updateBoundariesFromSlider(); } public function myDataTipFunction(e:HitData):String { var s:String; //s = "<B>" + PlotSeries(e.element).displayName + "</B>" + "\n"; s = "<B>" + e.item.A + "</B>" + "\n"; s += "------------------------------" + "\n"; s += "<B>Order Number:</B> " + "<FONT COLOR='#FF0000'><B>" + e.item.OrNo + "</B></FONT>"+ "\n"; s += "<B>Date:</B> " + e.item.Date + "\n"; s+= "<B>Trader:</B> " + e.item.Trd + "\n"; s+= "<B>IP:</B> " + e.item.IP + "\n"; s+= "<B>Exchange:</B> " + e.item.Ex + "\n"; return s; } public function parseDate(str:String)ate { //get each number in an array var match:Array = str.match( /\d+/g); var dateObjate; //if there were no miliseconds, add 0 to the end if( match.length < 7 ) match.push('0'); dateObj = new Date(Number(match[0]), Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4]), Number(match[5]), Number(match[6])); //txtOrderNum.text = dateObj.toString(); //return dateObj; //var delimeters:Array = ['/', ':', ' ']; txtOrderNum.text = "1:" + Number(match[0]).toString() + " 2:" + Number(match[1]).toString() + " 3:" + Number(match[2]).toString() + " 4:" + Number(match[3]).toString() + " 5:" + Number(match[4]).toString() + " 6:" + Number(match[5]).toString() + " DATE: " + dateObj.toString(); //var dateArray:Array = str.split('/'); return dateObj; //return new Date(dateArray[2], dateArray[0], dateArray[1]); } ]]> </mx:Script> </mx:Application>
