Flex Annotated Charting

By admin

Recently, I want to extend the LineChart in Flex. I want to have line chart with event annotated like Google Finance.

1. Dow Jone Interactive Chart (commerical - it is exactly what I am looking for)
2. Interactive Bubble Chart (open - although it is not exactly want I want, but if I believe the code can benefit me if I need to customize line chart. I may just need to draw the interactive small bubble on the line to get my job done!)
3. This demo gives you tons of chart samples. They are all great example although none of them satisfy my current need.
4. This demo is close to what I want. From this demo, I notice I can use “annotationElement” to draw on top of the data series. However, the trick is to convert the data points to pixel coordinate in order for me to draw something that can move along with the graph even someone stretches it. To make thing easier, Ely Greenfield has created DataDrawingCanvas that helps us draw on the chart with only data points specified instead of pixel coordinates. This class extends the ChartElement like AnnotationElement does (blog). That is amazing!! Thanks!!!
5. Google Finance Chart (It is exactly what I want. I wonder I can get the source of it)
   • I have found the blog and powerpoint of this sample (1/7/2009)
   • Google uses the Flash/ JavaScript integrate kit to get it works (blog) - I heard that it is very nice combination of Flash and AJAX. This is similar to MeasureMap’s use of the kit.
   • It is open source example!!! (code). Thanks for Brendan Meutzner!!
   • Brendan also shows us how he created his demo in 5 steps to help us understand how to build it ourselves.
   • Step 1, Step 2, Step 3, Step 4, Step 5 - enjoy!!

Reference

Useful resources:

1. Building a Flex Component by Ely GreenField
2. Create component and enforce separation of concern
3. http://www.edwardtufte.com/tufte/ (Edward Tufte - famous guy in data visualization)
4. http://www.insideria.com/2008/03/image-manipulation-in-flex.html (Image Manipulation)