Search Flex Samples

Flex Interactive Bubble Chart

The New York times has a really nice interactive bubble chart known as the Sector Graphic Chart. As a proof of concept, I put a few hours into seeing how hard it would be to recreate this chart using the Flex Charting components.
Take a look at the original version:
NY Times Sector Graphic.
Now before you go poking at the Flex version, Let me make one thing clear. The version I’ve put together is only a small portion of the functionality in that chart. As far as I know, that’s not due to any inherent limitations of the Flex charting components, but rather to the fact that I only put a few hours of work into this. Putting up a polished, produced and published application to be compared against a quick code sample is generally not a smart thing for me to do ;). But with only a few hours of work I was able to add the most visible and impressive interaction to the basic bubble chart supplied by the flex framework. It shouldn’t take too long for someone to take this example and turn it into a full fledged polished and working chart like the Sector Graphic.
Alright, with that caveat, here it is:
Interactive Bubble Chart
View the source
download the source
Some of the noteworthy concepts demonstrated by this example include:
Custom Bubble Item Renderer
Custom interactive Pan/Zoom chart element
Custom Axis Renderer
That last one is the real kicker. Between Beta3 and Release, we added the option of dropping your own component in as a custom axis renderer on a chart. Take a look.


Mars said...

I'm trying to run this in Flex 3 but I'm getting error with the AS components you defined, even though the namespace is correctly defined.
Any ideas?

Kiran Mallampalli said...

I have integrated Bubble chart with my existing application. Its working fine. But I have to identify two fixes.

* How can I set intervals by overriding default intervals on y and X-axis.

* Bubbles are filling with orange colors by overriding the existing random colors.

Please help me in resolving the above. Thanks in advance.


Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples