Scrolling Large Data Sets in Flex Charts

 

Sometimes you just have too much chart data to display it all at once. The problem with this is that if you bind all the data to your chart, the chart axis labels become too small to read.

I came across this blog post by Joel May (http://www.connectedpixel.com/blog/scrollingcharts), which demonstrated a really neat way to deal with large chart data in Flex by using a component Joel dubbed a “ScrollableAxisRenderer”. Basically, Joel made a skin for a ScrollBar component so that it would fit compactly on a chart’s X or Y axis. He then made a special implementation of IList that wraps the base data provider (i.e. the one with too many elements to display), so that only a small portion of the data would be “visible” to the chart through the wrapper at any one time. Then, Joel programmed the scroll bar so that moving it around would result in scrolling of the large data set, allowing the chart to “see” as much or as little of the data as you want it to. The effect is really cool.

Unfortunately, Joel’s code didn’t work with dynamic data providers. I tried to take his original code and tweak it slightly to handle dynamic data, but it wasn’t as simple as I had hoped since all the classes seemed to be collaborating with different parts of the process. So, borrowing heavily from Joel’s original code, I re-implemented his idea, focusing most of my effort on a solid implementation of the class that masks the large data set. Once this was finished, I got a sample app working using a basic MXML component with embedded ActionScript. Finally, I split out the code in to AS classes so that the custom scroll bar, custom axis renderer, and collection mask had clearly defined responsibilities and worked as proper components.

I got it all working nicely, so I sent it to Joel just now to see if he was okay with me submitting our joint work to FlexLib. There was certainly a lot of interest in a dynamic version of his component on his blog post, but (like many of us with non-work projects) it looks like Joel did not have the time to go back and finish it off. It certainly is a really cool way to handle large data sets in Flex charts, so kudos to Joel for coming up with the idea and cooking it up.