Quietly Scheming

I’ve been fielding a lot of questions about extending charts in Flex 2 as more and more people are downloading and getting excited about the new Flex beta. Developers who want to build custom charting rendering and behavior have a couple of options in Flex 2. In order of complexity, they can:

1. use the charting APIs to listen to mouse events to trigger custom behavior.
2. built a custom renderer to change the way a pre-built series types displays its data
3. built a custom element to add new data overlays or interactive behavior to the chart.
4. extend the pre-built series types to add to or modify its interaction, data, and display.

You might be surprised that I listed building a custom element as easier than extending the pre-built series that ship with the charting package. But writing a one-off component intended for a specific use is a a lot simpler than building a reusable component that many different developers will use and abuse in many different applications. Writing your own custom element, however, can actually be a pretty straightforward thing to do.

So in the spirit of making my point, I thought it was maybe time to post a sample of a custom annotation element that I had lying around. This annotation element allows the user to click and drag on the chart to hilight a region of the chart, with feedback about what region they selected.

A couple of hilights to point out:

• the annotation is written as a custom chart element, not a custom chart. That means it can be dropped into any other chart, combined with other custom elements or series, etc.
• the annotation stores the selection as data coordinates, not screen coordinates. Try resizing the browser while you have a selection on the chart and you’ll see that the selection stays correct even as the range of the chart changes. Look at the source and you can see some basic use of the chart extension APIs to see how this is done.
• the annotation puts some big labels on screen showing the bounds of the selection, in data space. But the chart still manages to adjust the auto-generated ranges to make sure that both the selected region, and the labels, stay inside the bounds of the chart. Try clicking and dragging outside the chart to see an example of this. All chart elements have the ability to ‘describe’ their data to the cart to make sure the ranges are generated correctly. Look at the ‘DescribeData’ implementation in the source to see how this is done.
• Many applications might not need to go all the way to building custom annotations to add interactivity to their charts. There are also two methods on the chart, called dataToLocal and localToData, that an application can use to add overlays at certain points, etc. This application uses those APIs to display the current mouse position, in both screen and data coordinates, on the left hand side of the screen. Check in the source to see how it’s done.
• The demo has view source enabled — right click and choose ‘View Source..’ to see it (make sure your popup blocker doesn’t block it). From there you can download the source and play with it yourself (see the link in the lower left corner of the source viewer).

One more note…this application was built against the beta 2 release of the Flex SDK. Please make sure you have the beta 2 player installed before viewing it.

Flex 2 Beta 2 Custom Chart Annotation

Questions, Comments, Improvements? Leave ‘em here, and let me know what you think.