Hello, I am creating a LineChart using a DateTimeAxis for the horizontal axis. My xAxis is ordered incorrectly. How can this be fixed?
My yAxis are int values. My xAxis are Strings that represent a time, which I parse into a Date objects. My time strings range from "00:00:00" to "23:55:00" in the format of (hh:mm:ss). They are in five minute increments. I am able to run and see the data. Good. My problem is that the chart starts at "06:00:00" increments up to "23:55:00" then continues with "00:00:00" up to "05:55:00". Bad. Like this: ------------------------------------------------------------- 06:00 23:55 00:00 05:55 Among other things I have tried... setting the LineSeries 'sortOnXField' with no visible change. setting combinations of DateTimeAxis 'minimum' and 'maximum' properties with no visible change. setting DateTimeAxis 'baseAtZero' with no visible change. Below is a sample mxml code showing my example. I was having it connect to an HTTPService to retrieve the xml input, but for this purpose I have modified slightly to include some sample data. I have only been messing around with flex for a couple days and am not adept to thing that are probably obvious with the flex language. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" applicationComplete="resultHandler(null)"> <mx:Script> <![CDATA[ import mx.charts.series.LineSeries; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.Fault; import mx.utils.ObjectUtil; private var result:XML = <Machines> <Machine ename="machinename"> <load> <time>00:00:00</time> <cpu>0</cpu> </load> <load> <time>01:00:00</time> <cpu>0</cpu> </load> <load> <time>02:00:00</time> <cpu>0</cpu> </load> <load> <time>04:00:00</time> <cpu>0</cpu> </load> <load> <time>05:00:00</time> <cpu>0</cpu> </load> <load> <time>06:00:00</time> <cpu>0</cpu> </load> <load> <time>07:00:00</time> <cpu>1</cpu> </load> <load> <time>08:00:00</time> <cpu>3</cpu> </load> <load> <time>09:00:00</time> <cpu>3</cpu> </load> <load> <time>10:00:00</time> <cpu>4</cpu> </load> <load> <time>11:00:00</time> <cpu>3</cpu> </load> <load> <time>12:00:00</time> <cpu>3</cpu> </load> <load> <time>13:00:00</time> <cpu>2</cpu> </load> <load> <time>14:00:00</time> <cpu>3</cpu> </load> <load> <time>15:00:00</time> <cpu>3</cpu> </load> <load> <time>16:00:00</time> <cpu>3</cpu> </load> <load> <time>17:00:00</time> <cpu>3</cpu> </load> <load> <time>18:00:00</time> <cpu>1</cpu> </load> <load> <time>19:00:00</time> <cpu>0</cpu> </load> <load> <time>20:00:00</time> <cpu>0</cpu> </load> <load> <time>21:00:00</time> <cpu>0</cpu> </load> <load> <time>22:00:00</time> <cpu>0</cpu> </load> <load> <time>23:00:00</time> <cpu>0</cpu> </load> </Machine> </Machines> public function faultHandler(event:FaultEvent):void { const fault:Fault = event.fault; const faultString:String = "FAULT CODE: " + fault.faultCode + "\n\n" + "FAULT DETAIL: " + fault.faultDetail + "\n\n" + "FAULT STRING: " + fault.faultString + "\n\n"; Alert.show( "FAULT!\n\n" + faultString ); } [Bindable]private var datainfo:XMLList; [Bindable]private var arrObjs:Array = new Array(); public function resultHandler(event:ResultEvent):void { datainfo = result.Machine; var arrSeries:Array = new Array(); for each(var machxml:XML in datainfo) { var loadArr:ArrayCollection = new ArrayCollection(); for each(var loadxml:XML in machxml.load) { loadArr.addItem({time:loadxml.time, cpu:loadxml.cpu}); } var machSeries:LineSeries = new LineSeries(); machSeries.setStyle("form", "curve"); machSeries.dataProvider = loadArr; machSeries.xField = "time"; machSeries.yField = "cpu"; machSeries.displayName = machx...@ename; arrSeries.push(machSeries); } cpulinechart.series = arrSeries; cpulinechart.invalidateSeriesStyles(); cpulinechart.series = cpulinechart.series; trace("Response from service received."); } public function parseTimeFunc(s:String):Date { var a:Array = s.split(":"); var newDate:Date = new Date(0,0,0,a[0],a[1],a[2]); return newDate; } ]]> </mx:Script> <mx:LineChart x="10" y="10" id="cpulinechart" width="100%"> <mx:horizontalAxis> <mx:DateTimeAxis dataUnits="hours" minorTickUnits="minutes" minorTickInterval="5" baseAtZero="true" parseFunction="parseTimeFunc"/> </mx:horizontalAxis> </mx:LineChart> <mx:Legend dataProvider="{cpulinechart}" x="10" y="418" direction="horizontal"/> </mx:Application>
