Data Based Renderers
There’ve been a couple of questions on the Flex lists lately about how to write custom renderers that draw a chart item differently based on the value it’s representing. I plan to flesh this out more over time, but to start off, here’s an example of a PieChart that renders its wedges with different colors based on whether the value they represent pass a particular threshold.
A couple of notes:
- Pie Series item renderers are the trickiest of the bunch. This should serve as a decent example of how to write one.
- custom renderers can choose what features of the parent series they want to support, based on where and how they’ll be used. In this case, I chose to support stylable strokes, but not support the ‘innerRadius’ feature of the PieChart.
- This item renderer was written to make the thresholds configurable, by defining a simple AS value class and assigning it to a property in the MXML. Remember that MXML is easy to extend with custom classes…that goes for non-visual classes too.
- If you like the idea but want it to work differently or for a different chart type, grab the code and make it work for you. I wrote it to be easy to move to other scenarios, and it’s pretty well commented.
And, while clearly I have a bit of an advantage, I threw this example together in the past 25 minutes or so. So take heart that once you get your hands dirty, extending charts can be fast and effortless ;)
* Threshold based Pie Chart
* view source
* download source
Feedback or thoughts on this example, as well as requests for other examples you’d like to see, are much appreciated. Leave comments, suggestions, criticisms here.
RSS Feed