Recently we decided to switch from an open source AS2 based flash chart to using Flex 3 for our charting to get more control over the styling of the chart. I'm pretty new to Flex, but so far I'm pretty disappointed by the out of the box behavior of the charts. Basically, I'm trying to do something very simple: dates on the x-axis, some numerical value on the y-axis. I need to control a little bit about the fonts, colors, and data tips, but not much else. I thought this would be easy, but after a few days of toying around, I'm really ready to gouge out my own eyes.
After messing around for days, I went back and tried the simplest possible thing, straight out of the docs: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:Script><![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var deck:ArrayCollection = new ArrayCollection([ {date:"08/01/2005", close:42.71}, {date:"08/02/2005", close:42.99}, {date:"08/03/2005", close:42.65} ]); ]]></mx:Script> <mx:Panel title="Sample DateTimeAxis"> <mx:LineChart id="myChart" dataProvider="{deck}" showDataTips="true"> <mx:horizontalAxis> <mx:DateTimeAxis dataUnits="days" /> </mx:horizontalAxis> <mx:series> <mx:LineSeries yField="close" xField="date" displayName="DECK" /> </mx:series> </mx:LineChart> <mx:Legend dataProvider="{myChart}"/> </mx:Panel> </mx:Application> This gives you a nice little chart where the x-axis labels and tick marks do not come close to lining up with any of the data points. I tried messing around with AxisRenderers and labelAlignment settings to no avail. My conclusion thus far is that DateTimeAxis is basically useless. Right now, I'm working around this by switching to a CategoryAxis, but the DateTimeAxis has some nice features I'd like to take advantage of, and the CategoryAxis seems to have its own hurdles to overcome. Does anyone know if there's a work around for this behavior?
