Built-in charting capability is definitely one of the great conveniences of using ColdFusion over other languages (although I'd argue that Google's Chart API, which lets any developer call custom charts through a REST API, is eroding that advantage; more on that later). But sometimes there are a few flaws in cfchart that make you look at other charting solutions.
The flaw that I was presented with the other day has to do with the spacing of the wedges in a pie chart. Of the three numbers we're sending to the chart, one is quite a bit larger than the other two and thus takes up most of the pie's area. Here's the code, with static values:
<cfchart chartheight="200" chartwidth="300" format="png"
title="Pie Chart" backgroundcolor="##DCE6ED" showlegend="no"
labelformat="currency" tipstyle="none">
<cfchartseries type="pie" colorlist="##539853,##990000,##4B6FA3">
<cfchartdata item="Net Proceeds" value="6918.75">
<cfchartdata item="Taxes" value="5518.25">
<cfchartdata item="Exercise Cost" value="4437500.00">
</cfchartseries>
</cfchart>
And here's the chart it creates:
Note how the two smaller numbers create two small contiguous pie wedges. When the pie wedges are that small, the labels have a tendency to collide, or overlay one another. It's unfortunate that this bug hasn't been fixed; it occurs in both ColdFusion 7 and 8. Sure, I could account for this problem by increasing the spacing between the wedges or by increasing the offset of the labels, but that's something I'd have to do in a special XML stylesheet for the chart, and I'd have to write some logic to pull the stylesheet in only when I had two small numbers (I don't think you'd want that larger spacing unless you really needed to-- it would look odd when the pie wedges are normal size). That's a bit of a pain, especially when the charting software should be able to handle that kind of condition on its own. I've used Adobe's bug report form to inform them of this problem.
Now Google Charts, on the other hand, handles small numbers gracefully by making a visual association between labels and wedges with a connector line. Instead of using cfchart tags, you call the chart with a URL in an image tag. We'd call the chart with http://chart.apis.google.com/chart?cht=p&chs=260x100& \:
chd=t:0.97235,0.01537,0.012264&chl=$4,437,500.00|$6,918.75|$5,518.25
It comes down to taste, but it seems like a very well-designed chart to me. I will have to consider switching to Google Charts, at least for the generation of this particular chart.
Comments (3)
February 12, 2008
09:12AM | #
Hi Tom,
There is an attribute called autocontrol in DataLabels in the default styles in /charting/styles, it needs to be turned on.
Please refer http://www.adobe.com/support/documentation/en/coldfusion/mx701updater/cf701releasenotes01.html
for more details.
February 12, 2008
16:50PM | #
Tom and Hareni - I have spent hours trying to fix this and you guys have solved it for me!
And, what a coincidence - Hareni posted the answer for me just THIS MORNING!!
WOW, talk about making my day...Thanks Guys!!
February 12, 2008
16:57PM | #
Derrill, I'm glad to know that I could help, even indirectly! Your optimism impresses me, since I didn't even bother to try to fix it-- while I knew that you could control certain options via XML styles, I figured that this would be the kind of thing that would be controlled automatically instead of having to be turned on by the user.