Charting Example

A couple of weeks ago, I said I'd compile some thoughts about charting. Normally, this would mean that I'd talk about charts in a general way. I'm not much on posting code, mainly because I'm terrified that I'll post something that will lead someone who's even more newbie than I am down the wrong path. Instead, I prefer to talk about code in general terms, then let people go off and make whatever mistakes I've inspired them to while I keep a clean conscience.

But this week someone asked me to give an example of showing how to add an axis in ActionScript, so I thought I'd do that just this once because my husband just had shoulder surgery and goes to bed early these days. While I was at it, I threw in a little bit of this and that other stuff I'd learned while building charts.

I don't claim my approach is the only approach or the best approach to the problem. But here's an example of how to create a chart entirely in ActionScript. Right click to view source. If you pick up bad habits from it don't blame me!!!

Some thoughts on charting

This past week, I made my first foray into the world of Flex charting, and I'll have to say that I found it a pleasant surprise. From all the comments I've seen from others using charting, I had expected a difficult, painful process. My experience was quite the opposite. This is the first time in my year or so of using Flex that I've been able to accomplish anything significant without having to customize or rewrite anything. It seems that almost anything you'd want to do with a chart, there was a property or style that would handle it. I did find the fact that nearly everything was a style a bit confusing at first, but once you realize this, it goes fairly smoothly.

I might not have found the whole experience quite so smooth if I hadn't found some nice examples by good people who were willing to post their code for the world, so I thought I'd acknowledge them here:

• Taking Control of Flex Charting Styles
• Flex 2 Charting with XML Tutorial
• Animated Chart Series
• Flex Chart Sampler

I learned a lot about charting this week, and I hope to have time someday to share more of it, but I did find two quick things that might be helpful to you if you're trying to get your charts looking exactly right. The first is if you use a line chart with itemRenderers that mark each data point in the chart, the first and last one will be cut off through the middle where the chart control clips the content. The solution is to set clipContent on the chart to false. Seems obvious, but took me two days to find it.

The second is that if your first legend item in a Legend control has a short label, you'll wind up with overlapping legends where the Legend control lays them all out as if they had a short label. You can use the markerWidth style to make all of the legend items the same size, and you can just make sure that size is large enough that your legends don't collide. No, this won't give you a pixel-perfect layout, but it is a heck of a lot quicker than fixing either Legend or LegendItem to correct this.