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!!!
Prototype implementation
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.
TODOs
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!
This example demonstrates scrolling and zooming chart using ScrollableAxisRenderer.
View source is enabled, you can download zipped sources from here.
Hi Iwo
a)
I would probably add some navigation. I’ve just moved the x-axis to -200 and I would like to jump to the first available column.
b) Maybe activating zooming on the whole chart would be more intuitive. Just a thought. I had to really read the label above the chart to learn what I can do. My Łeb/Web 2.0 approach was literally offended 😉
BR, Michał
Actually, you can get the source for the charts…
http://blogs.adobe.com/flexdoc/2008/04/extracting_data_visualization.html
Nice example btw.
Thanks for the link! It surely will be useful in further work on charting enhancements.
Hi Iwo
I wonder where in the code i can prevent the baritem to be clipped, it disappear to fast on the left och right side when you pan in some direction. This is acceptable for the baritems, but it doesn’t looks so good when you have lines.
Thanks