der hess

Disclaimer Start:

Please be pleasant with my English. I am not a native English speaker and the English language is one of my personal weaknesses. To improve my English skills, I am planning to write some blog posts in English. So if I wrote any bullshit in these blog posts, please correct me!

Disclaimer End:

At my work at Liip I had to work quite a lot with the Flex Chart API. At some point I was very disappointed about the lack of deeper documentations or advanced flex charts examples. In my mind the whole dashboard flex chart examples are not really helpful, because the examples are not very good real-life examples. But after a few months ago I found some very nice examples for the Flex Chart Advanced stuff and now I would like to give you a short guidance, how you can handle the complex and powerful Flex Chart API.

First Step - Check your Skills

Make sure that you understand the Flex Component Life Cycle and the rendering procedure behind the Flex Framework. The whole Chart Topic is very complex in handling data and handling a good rendering procedure. So that is the reason why it is very important that you understand the basics of the Flex Framework. If you have got some problems to understand the concepts behind the Flex Framework, no problem, I highly recommend the Adobe Max presentation Diving Deep with the Flex Component Lifecycle from Deepa Subramaniam. Otherwise have a look on my SFUG Presentation “Moving from AS3 to Flex”

Second Step – Set up your documentation for the Flex Chart Basic Stuff:

Yeah, the Flex Chart API is very huge. So you have to work a lot with the documentation. Fortunately, the basic Flex Chart stuff is documented very well. If you want to do some minor changes on your chart, please have a look on the Flex Data Visualization documentation (Livedocs) and on the Language Reference.  Sometimes you would not get a solution from this documentation, than have a look on the Flex Chart examples at flexexamples.com. Mostly I use the tags-Content overview and press the Buttons “CTRL+F” in Mozilla Firefox for the string search. After that I typed in “LineChart” for Line Chart examples or “Charting” for Flex charts in general. So I am quite fast and I always find the right code snippets. This procedure fits for the basic chart stuff very well.

Third Step – Things are becoming complicated

Oh no, our client wants to have some special item renderings and user interaction on the charts… At this point the Flex Chart could become a nightmare. Why?!

• Because of the Flex Charts API Architecture is very complex. A lot of classes are related to each other and so on
• The Adobe Livedocs documentation doesn’t really deliver any advanced flex charts examples and doesn’t explain the ideas behind the Flex Charts API Architecture
• You don’t have access to the source code of the Flex Charts API, so it is always a black box for you
• There are very less information (and blog post) about Advanced Flex Charts API stuff on the internet or you have to pay for this information (lectures in Flex Charts)

These points sound very disappointed but I have some Flex Charts resources for you, which are able to solve these problems. To understand some complex Chart behaviors please download the Flex Chart Class diagram. It shows the relationship between the classes very well, so you should get the basic ideas behind the Flex Chart API. After that, you should go to quietlyscheming.com. It is a great resource for advanced chart examples and getting an orientation in the Advanced Flex Chart Stuff. Especially, these blog posts are very useful

• ChartSampler (kind of Flex Chart Explorer)
• Easy Custom Charts
• Dashed Lines

Unfortunately, all the examples are coded in Flex 2 and the source code doesn’t work very well with the Flex 3 SDK. So yeah, shit… For long time I thought there don’t exists another resource on the Flex Chart API… But last month I found this very helpful Adobe Max Presentation from Tom Gonzalez about Data Visualization with Flex 3(!). Yeah 🙂 And I have to say Tom is the new Flex Chart API man for the Flex 3.x SDK. His blog contains very helpful posts about Flex Charts and he posted the source code, too! So if you want to dive into Flex Chart API, you have to visit his blog (especially this post and try to understand the source code)

Fourth Step – Flex Charts are nice but I want more….

Flex Charts are nice but in some cases we need some extended functionality. Here are two nice extended Flex Chart Components and one recommendation:

• Flex Chart Dashed Line Component
• Scrolling chart
• Visualizing LARGE Data Sets
• Flex Annotated Charting *UPDATE*

Otherwise in some cases Flex Charts are not the right data visualization tool. Fortunately, for Flex and Flash exist some more open source data visualization tools:

• Flare Data Visualization
• HeatMap Component
• TreeMap Component
• Birdeye Data Analysis Framework
• And maybe the new Chart Library Axiis (video | Tutorial)

The advanced data visualization ELIXIR from ILOG looks very cool, too, but it cost some money. The same money argument is valid for the FusionCharts. That is the reason why I don't know how interesting it is for you?! So that’s all what I could say about the basics and orientation of data visualization with the Flex (Chart API). I hope this blog post was helpful for you…