Home > english, Programming > Mastering the Flex Charts

Mastering the Flex Charts

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

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:

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:

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…

  1. admin
    October 12th, 2009 at 18:49 | #1

    Mathias have sent me a nice link to the Flex Doc Blog. At this blog post you can read how you get access to the source code of the data visualization source code!!!


    Maybe after that the Flex charts stop behaving like a black box?!

  2. admin
    October 14th, 2009 at 08:33 | #2

    Thomas Gonzalez did a great talk Advanced Data Visualization with Flex at the Adobe Max 2009! The sourcecode of this session is available on http://www.twgonzalez.com/blog/?p=267

  3. May 9th, 2010 at 11:52 | #3

    Adobe included the Flex Charts API to the standard Flash Builder IDE and the SDK. They made it also Open Source in Flex 4!!! Nice step!

  4. admin
    March 18th, 2011 at 10:51 | #4

    Also a very nice diagramm and visualization library Kalileo produced by Kap Lab. In some cases the usage is free and in some cases not. Please check the license details.

  1. No trackbacks yet.