Misha asks:
Hi Raymond, I would really appreciate you if you could help me with CFCHART (CF8). In CF5 in CFGRAPH it was possible to display the value by using showValueLabel attribute. I don't see anything in CF8. Is it possible to display the value from the ValueColumn attribute on the actual bar itself?
At first I wasn't sure what she meant. I could easily see the values when I moused over the bars in a barchart. But after speaking with her I figured out that what she really wanted was to see the values without a mouseover. This would be especially useful on a printout. Turns out this is rather easy. You can use the dataLabelStyle attribute to specify a label for your data points. Valid values are none (default), value, rowLabel (kinda silly), columnLabel (ditto), pattern (a data pattern you can't modify, more on that in a bit). So as a concrete example, consider this chart:
<cfchartseries type="bar" serieslabel="result" seriescolor="##6633CC" datalabelstyle="value"> <cfchartdata item="result1" value="75"> <cfchartdata item="result2" value="80"> </cfchartseries> </cfchart><cfchart format="flash" xaxistitle="respondents" yaxistitle="numbers">
Which creates:
Almost right - the chart isn't quite tall enough. We can fix that by using scaleTo:
<cfchart format="flash" xaxistitle="respondents" yaxistitle="numbers" scaleTo="100">
That's better, but obviously we would have to make scaleTo a bit dynamic if we weren't sure of our value range. I mentioned 'pattern' above. What does that do?
That's cool, but you don't have control over what is there. It is kind of silly that the label is repeated, but that second line is really nice.
That got me digging into the chart editor. First I was curious about the data label placement. What if you didn't want to use scaleTo? In my digging I found that you can use an 'Extra Lines' attribute. If set to something above 0, like 1 for example (duh), the chart will always ensure there is an extra line. This handles ensuring the values fit ok. You can also switch to an inner display as well. Here is an example with extra lines turned on:
<cfchart format="flash" xaxistitle="respondents" yaxistitle="numbers" style="#style#"> <cfchartseries type="bar" serieslabel="result"> <cfchartdata item="result1" value="75"> <cfchartdata item="result2" value="80"> </cfchartseries> </cfchart> <p/><cfsavecontent variable="style"> <?xml version="1.0" encoding="UTF-8"?> <frameChart is3D="false"> <yAxis scaleMin="0"> <labelFormat pattern="#,##0.###"/> <parseFormat pattern="#,##0.###"/> </yAxis> <legend allowSpan="true" equalCols="false" isVisible="false" showColumnLegend="false" halign="Right" isMultiline="true"> <decoration style="None"/> </legend> <dataLabels style="Value" extraLines="1" autoControl="true"/> </frameChart> </cfsavecontent>
Notice I also turned off the legend in the chart. This resulted in:
So - remember how I said that pattern was hard coded? Well with the chart editor you can muck with that. Consider this XML:
<dataLabels style="Pattern" placement="Inside" extraLines="1" autoControl="true"> <![CDATA[ $(value) [$(colPercent) of $(colTotal)] ]]> </dataLabels>
I specified both the value, and the percent of total, and got rid of the newline there by default. Also note I moved the labels inside. I could get rid of extraLines now if I wanted to. This resulted in the following chart:
Pretty cool! But I'd probably want to change that font color. Anyway, I hope this is useful!