Flex Charting Sample: Animated Drilldown
October 2nd, 2006
Interested in Flex? Data Visualization? Animation? Check this out.
Animated Drilldown: Using animation to show relationship and context in Data Visualization.
Take a look, then come back here and let me know what you think.
October 2nd, 2006 at 11:04 pm
Ely, you are rediculous. This thing is great!
October 2nd, 2006 at 11:05 pm
Ridiculous even :)
October 3rd, 2006 at 3:41 am
that is amazing! awesome work. Thanks for offering the source!
October 3rd, 2006 at 3:50 am
Very cool. I can’t wait to get up to speed with Flex. I am a developer by hobby not trade, so learning new stuff means taking a break from making money.
But I have an idea for an application that uses Flex for the UI with cf as the back end and creates coldfusion reports (cfr) as a final result. I think Flex’s slow addoption rate (at least it seems to lag behind Adobe’s goals, as it is not loudly touted in press and financial releases) is a lack of really killer applications that can’t be done any other way.
keep up the good work, I love reading your posts and viewing your examples.
October 3rd, 2006 at 5:03 am
Great stuff, thanks for sharing the code
October 3rd, 2006 at 5:55 am
That’s great! It immediately conveys what’s going on without having to read anything or figure out what just happened when you click. Also, the breadcrumb navigation has become so pervasive that I immediately looked up there for it. It seemed to me that it should be there since I could not see a way to drill back up in the chart itself. Very intuitive.
October 3rd, 2006 at 6:02 am
I like these animations. I think they strike a good balance between conveying visually what is going on mathematically, while distracting as little as possible. If anything, I’d describe them as minimalist.
I have been thinking a lot about when and how much to animate things in an application user interface. It’s clear that animating transitions between modes is practical and helpful in giving the user a better model of the UI: sliding drawers in and out, for example, as a way of drawing attention to tthe controls in the UI that manage the sliding.
It’s less clear that it helps the user to tween things around just for the sake of eye candy. But being helpful isn’t the only good: if users think the application is fun because of the animations, then perhaps they are likely to recommend it to more people, spend more time using it productively, and so on.
One thing I’ve discovered that is particularly challenging is timing: how quickly to start an animation, and how long it should play. For some people a second is a really long time for a UI to take in doing something; for others, it’s too fast. And it’s pretty hard for the UI to figure out which kind of person is using it. (Or is it?…)
October 3rd, 2006 at 9:08 am
David — absolutely right. I actually started off writing a long post along these lines, but I got lazy trying to wordsmith it, so I gave up and just posted the sample. Glad you did the analysis for me :)
Incidentally, I worked with a guy a while back whose company built a large flash based business-critical (meaning, users spent a lot of time in it) web application. They made heavy use of animations, but had a golden rule that no animation could take longer than a quarter of a second, or risk pissing off the user.
I would probably qualify that to say that it’s a good rule for model animations…ones that prevent the user from taking some or any action while the animation is playing. Parallel animations…ones that run side by side with user action, probably should take longer…both because they can afford to do so without annoying the user, and because they may need to if their intention is to draw the user’s attention from whatever their doing to some higher priority interrupt.
October 3rd, 2006 at 12:48 pm
Funny you should mention that quarter-second rule. (Quickly greps code base for “250″… ah, there it is:)
public static const ANIMATION_DURATION:int = 250; // msec
I messed around with timings of animations for a while and eventually settled on that value for a lot of them.
October 3rd, 2006 at 5:53 pm
great work~ cool!!
October 3rd, 2006 at 11:53 pm
VERY cool Ely, and also great to meet you in person at AjaxWorld today! Of course, being the selfish person that I am, I’d love to see something for Bubble charts as well. Also, any thoughts on how to support drill-down in a way that allows the user to choose from multiple dimmensions. For example, if I were looking at a chart where each bubble/column/whatever represents a Product, when I click on it, do I want to drill down by region?, salesrep?, product sub-category?, etc.
October 4th, 2006 at 9:36 pm
This is reaally KEWL!!!! But I still can’t figure out the usecase. I mean how often this drilling down is needed?
October 6th, 2006 at 9:24 pm
Very nice. I found this drill down approach very innovative. Traditionally apps drill down by going to another page or by displaying the results on a different chart… which adds overhead to the already limited real state presented on BI application. Great idea.
October 9th, 2006 at 7:34 am
this is BRILLIANT Ely !!!
but where i can find the source? i have downloaded the zip with all the sources but couldn’t find this one.
it was a lot better when it was able to see the source on right click.
November 6th, 2006 at 5:08 am
first of all thak you for sharing the code… about the bugy part I found and fixed one bug that was appearing (when you had clicked on a pie slice with an index greater than the no of slices of the apearing pie). This was going on at a DrillUp effect … the part that I changed in order to escape that was modifing the DrillUpEffect.as at line 92 :
if(drillToIndex >= dstRenderData.elementBounds.length)
and
line 97:
if(drillToIndex < dstRenderData.elementBounds.length)
hope this helps… it helped me :)
November 8th, 2006 at 7:17 pm
You wouldn’t happen to have given any thought to data entry? How would you get people to input excel like data? Datagrids with editable fields? Have you thought of another way?
December 18th, 2006 at 4:37 am
I just came to post a bug fix for DrillUp not always using the right index (it seemed to randomly zoom out to index 0), but I see someone beat me to it!
It happened when your source (zoomed in) data had less items than your destination (zoomed out) data, and I made the same two changes mentioned to fix it :-)
December 27th, 2006 at 4:13 pm
Just curious, the source for the roll over item renderer seems to be missing code for qs.utils.ColorUtils
did I just miss something, or is this source somewhere else?
January 26th, 2007 at 5:56 am
where is qs.utils.ColorUtils???
January 26th, 2007 at 10:14 am
source should be updated now, and have everything you need.
June 25th, 2007 at 10:28 am
Auto install updated flash player fails for me in OSX (Safari and Firefox), but the demo works ok if I manually visit Adobe’s website, download and install new flash player, and restart browser.
August 2nd, 2007 at 9:49 am
when i am using bar chart if there is no data it will display empty x and y axis labels.
i need same in the pie chart. it is giving me empty i would like to display at least circle with no data
September 15th, 2007 at 3:41 pm
Hi Ely!!! I can see that Flax 3 charting now has multi axis ability. The examples I got from the web has all Y axis side by side!!! Is it possible to stack up Y axis? I kind of want to STAKC up like 10 area graphs with 10 multi Y axis so that I can view all of them at the same time in one chart with one background.
Thanks
November 20th, 2007 at 9:23 am
Hi, I am migrating a prototype I have made in java to Flex. I am fascinated with flex and I am grateful for your great examples. I have one problem, I am using horizontal barcharts, the Y axis represents categories and the X axis numeric values. My problem is that the name of the categories on the Y axis goes to small, even for a gragh of 10 rows (or bars), do you have any suggestions of how I can increase the size of the font? Thanks,
January 30th, 2008 at 11:04 am
Hi Ely!
You have some amazing components. I wanted to ask about the pie chart drill down component… How would I need to approach drilling into data if using 2 different dataSources?
Lets say clicking the first level data fires an event to populate a different data source… can the drill effect still be used?
February 18th, 2008 at 4:37 am
hello,Ely! This is really cool. But there is one problem I found. That’s it: when I write the ‘label’ attribute in Chinese. The Chinese words cannot show. For example,
‘ label=”你好” ‘ cannot show IN .
I hope you could take time to see it.Thanks for your attention.Wait for your answer!
see u.