Flex / Spark Organization Chart (v2)

Rebuilt from scratch

Due to the popularity of the original organization chart (post can be found below) and the demand for it, I’ve rebuilt the component and made it available as open source.
Not that I love creating hierarchical data charts (though I must admit, it is fun), but the previous version was not ready to be openly released.

It didn’t follow Flex standards, the datasource had to be an XML file, etc… Not that the component is no good, it was just too specifically designed for the client back then.

In short, here’s the new version, and it boasts quite a few good features :
- Full Spark component architecture, meaning everything you see can be spark-skinned.
- Support for massive amouts of nodes
- Data can be any IList, in the demo it is an ArrayCollection. As with any Flex/Spark component, direct changes to the dataProvider collection result in the component updating itself, and vice-versa.

Layout calculations through Alchemy

Besides building it on Spark, the other new feature is that it crunches most calculations using Alchemy.

The layout is done with Alchemy, using a recursive function, which calculates every x and y position of each node.
Afterwards, another Alchemy function will return only those nodes that need to be rendered.

For example, you have a dataprovider of 1000 nodes, Alchemy will position each node, resulting in a viewpane of 10000×1000 pixels for example, yet the component itself in the Flash player is only 400×400 in size. For that 400×400 rectangle, Alchemy will return which nodes fit into that pane.
As a result, the player will never render all 1000 items, yet only those viewable.
As you scroll, the rendererd nodes will be recycled as Alchemy returns different nodes as you scroll.

To gain as much speed as possible, Alchemy function calls are kept to a minimum, and changes to the dataProvider are transferred directly into Alchemy memory.
When done calculating, the component in its turn will read all data from Alchemy by reading directly from the Alchemy memory ByteArray.

Design freedom

As noted above, the whole component can be skinned as you would any other Spark component.
Now 3 states are supported, minimized-normal-maximized.
In the demo, the maximized state implements an Image component and a DataGrid component.
The line connectors between 2 nodes can also be altered with the skin, where you can specify if lines should enter or exit from top, bottom, left or right of the node.

Bottleneck?

Even though I’m happy with the result, since you have to keep in mind that the whole chart starts out with all nodes expanded, the current bottleneck appears to be the rendering of many nodes on screen at once. The current skin does use a lot of gradients, but I’ll try to make it go smoother over time…

*** update *** I upped a version boasting 10000 items, which might criple performance on lower end computers.

Click on the image below or here to go to the style explorer.
If you are looking for the source, I’ve placed it at google code.

It’d be appreciated if you post your performance experience, I’ve set the item count on 5000 for the moment, which should make it run reasonably adequate on most computers.

Flex Organization Chart Component

It’s been one hell of a long time since my last update.
Ever since I’ve been working as a freelancer, time to spend experimenting with Flash has been very few.

Nevertheless, I’d like to showcase this custom built Flex component :

As you may notice by the choice of image, it was developed for Telenet, as a way to represent their organizational structure.
The component is fed by a zipped XML file, containing up to 3000 profiles.

Code has been optimized to display loads of profiles at once, and keeping performance on par.
The component also boasts drag and drop features and is fully skinnable.

Top-right you’ll notice a small menu, use it to go either fullscreen, or to start looking for a specific person. Do keep in mind that all data has been replaced with dummy data, normally you can look for firstname, lastname and department in the input field.

Last but not least, the data generating this chart, is retrieved from Org Publisher. I’ve witten a Java parser to convert the OCB filetype to a ZIP which this Flash loads. So you could view this component as a glorified Org Publisher frontend.

The component has already been reused in a different project, where the profile data is replaced by Flex charts, displaying just how well a certain employee has performed over the past year. You’ll understand I can’t just put that online

More updates coming soon, there’s much in the pipeline, just need to find some time!