Thursday, December 31, 2009

Flex: DateTimeAxis and ColumnChart components

I love flex. It is a framework where you can do great things, however there are a number of "gotchas" as with every framework. Not necessarily a bad thing, so long as it is documented properly. This is what I found when using the ColumnChart component within the data-visualization framework of flex in combination with the DateTimeAxis for the xField. I had an object using the following structure:
public class MyChartItem {
    public var time:Number;
    public var amount:int;
Notice that one of the properties represents the current time. It's represented by a numeric field (Number type). This model should allow for an exact representations of time when serializing a remote object back to its counterpart in ActionScript.
Of course, I choose to use a DateTimeAxis to let me render this numeric "xField" within the ColumnSeries. It was configured like this:

I wanted to display data every second however the time property would be in milliseconds (epoch time). My surprise was that as the bound dataProvider object was updated, no chart was being displayed. I struggled with this for some time until I placed the mouse over the graph. Flex was showing the data points summary of the chart, but no graph!

Upon further research, I found this piece of documentation which brought a lot of light to my development. From the Flex documentation.

"Some series use the value of the dataUnits property to affect their rendering. Specifically, most columnar series (such as Column, Bar, Candlestick, and HLOC controls) use the value of dataUnits to determine how wide to render their columns. If, for example, the ColumnChart control's horizontal axis has its labels set to weeks and dataUnits set to days, the ColumnChart control renders each column at one-seventh the distance between labels." (Flex Docs)

Ah! So it was a problem with the way the flash player was computing how to render the chart control. In particular, flash was thinking that each Column in the chart should be of one-thousandth distance. So I continued looking and found the "dataInterval" property in the "DateTimeAxis" API:

"If, for example, the dataUnits property is set to "hours", and dataInterval property is set to 4, the chart assumes your data occurs every four hours. This affects how some series (such as ColumnSeries and CandlestickSeries) render their data. It also affects how labels are automatically chosen." (Flex API)

After setting my "dataInterval" to 1000, I was back in business and my graph displaying properly again. Lesson learned: never boast that I know Flex. I can only say I can use flex and have found some tricks to make User Interfaces look fun.

No comments: