Some time ago I was asked to create column chart representing data in time with user friendly interface to change period of analysis. Current solution was consisted of two data fields to select date range and it was OK but it wasn’t really Flexy.
I decided to enable scrolling the chart by dragging the axis so that if one wants to see what’s beyond the left edge of chart (s)he can simply drag the charts horizontal axis and scroll it right. To enable zooming the data I chose to use mouse wheel. Generally these ideas was based on popular maps services interfaces.
This example is deprecated, consider using ChartScroller instead!!!
Implementation of fully working prototype was really straightforward. In just a few hours I tangled standard column chart with a bunch of event listeners and scrolling/zooming was working. This is what I like in Flex. The next challenge was to create reusable component which could be applied to any chart.
Reusable component implementation
After some investigation I decided to create a subclass of AxisRenderer which will automatically register required listeners and modify corresponding axis minimum and maximum values. I have faced some problems with lack of (or undocumented) functions transforming mouse position along axis renderer to data values. It’s a pity that Flex charting sources are closed, if they were open surely I will find much useful code hidden as private or mx_internal. Anyway, after some playing with debugger I have created my own implementation based on axis minimum/maximum values and renderers gutters. You can see the result below.
There are still few things to be done to improve this component.
- The most important is to add event dispatched certain time after user finished moving or zooming the chart. Such event would allow developer to update chart data provider basing on selected minimum and maximum values.
- Cursor might be changed to indicate grabbing axis.
- Area of axis containing labels might also be mouse sensitive.
- If you have any other ideas add a comment!