Flex: Traffic Timeline Chart #2
Okay, so this is a bit better:
What we are looking at here is an interesting mix of stuff from Ely Greenfields Flex Charting blog. Ely is the guy who wrote Flex Charts so his site is a first stop if you are considering using the charting controls.
There are two things going on here, the first is that I have used Elys DataDrawingCanvas to delineate the chart sections across the time ‘now’. There other is the range selector (see RangeSelector in Elys Chart Sampler).
Because the x-axis of the chart is a DateTime axis I have modified the rendering of the selection labels to display the time. You can look at this hacked code here.
You can see that all I’ve done is pass the millisecond values for the axis into a Date object and then used the FlexLib DateUtil function to render the time string.
override protected function commitProperties():void
{
super.commitProperties();
_labelTop.text = Math.round(dTop).toString();
_labelBottom.text = Math.round(dBottom).toString();
// This looks like milliseconds but it doesn'e parse to that
dateValue.setTime(dLeft);
_labelLeft.text = DateUtil.toW3CDTF(dateValue);
dateValue.setTime(dRight);
_labelRight.text = DateUtil.toW3CDTF(dateValue);
}
I want to use this to zoom in and out of the graph elements but as yet am clueless how to do this (although I’m sure it’s doable). The chart should also render the bar items to a maximum width to stop one item stretching out to the entire height of the window which looks really naff.
Comments
Leave a Reply