Ask a Jedi: Showing the values on a chart

This post is more than 2 years old.

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:

<cfchart format="flash" xaxistitle="respondents" yaxistitle="numbers">

&lt;cfchartseries type="bar" serieslabel="result" seriescolor="##6633CC" datalabelstyle="value"&gt;
	&lt;cfchartdata item="result1" value="75"&gt;
	&lt;cfchartdata item="result2" value="80"&gt;
&lt;/cfchartseries&gt;

</cfchart>

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:

<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>

<cfchart format="flash" xaxistitle="respondents" yaxistitle="numbers" style="#style#">

&lt;cfchartseries type="bar" serieslabel="result"&gt;
	&lt;cfchartdata item="result1" value="75"&gt;
	&lt;cfchartdata item="result2" value="80"&gt;
&lt;/cfchartseries&gt;

</cfchart>

<p/>

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!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Alirio Boquin posted on 3/7/2009 at 2:16 AM

WOW, Raymond you always give us, a nice stuff.

Thank you

Comment 2 by Dan G. Switzer, II posted on 3/7/2009 at 2:29 AM

While not directly related to this issue, I just made a post on how to fix the default CFCHART tooltip behavior if you're generating static images:

http://blog.pengoworks.com/...

There are some issues with the default mouse handlers--the main issue is that tooltips can run out of the viewport.

Comment 3 by Venkata Unnam posted on 3/26/2009 at 3:06 PM

YOu helped more today. Thanks Unnam

Comment 4 by Eric Brancaccio posted on 2/12/2010 at 2:08 AM

Hi Ray,
I have a cfchart issue I wanted to run by you. Taking the chart you have on this page, let's say I wanted to have 2 or more bars above the result1 label on the xaxis.

Comment 5 by Raymond Camden posted on 2/12/2010 at 5:52 PM

Sorry - not quite sure I get what you mean. You want two rows of bars?

Comment 6 by Eric Brancaccio posted on 2/12/2010 at 9:30 PM

Your chart above has two labels across the x axis "result1" and "result2". Each label has one bar above it. Instead of one bar per label, I'd like to have two bars with different colors above the label "result1".

Comment 7 by Raymond Camden posted on 2/13/2010 at 8:23 PM

Just add another series:

<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>

<cfchartseries type="bar" serieslabel="moon">
<cfchartdata item="result1" value="15">
<cfchartdata item="result2" value="20">
</cfchartseries>

</cfchart>

Comment 8 by Colin C. posted on 2/25/2010 at 3:18 AM

Has anyone been able to place a datalabel value at the top of a stacked bar chart? The minute I use seriesplacement="stacked" in my CFCHART tag it seems to screw up the placement of the value label.

Comment 9 by Raymond Camden posted on 2/25/2010 at 3:57 AM

Have you tried it in the Chart Editor?

Comment 10 by Pristos posted on 1/31/2012 at 9:42 PM

Hello, Raymond!
I'm trying to use the datalabelstyle pattern in a pie chart, but it's a mess! All labels are on top of the other, so I can't read anything. Do you know how can I fix it?
Thanks

Comment 11 by Raymond Camden posted on 2/1/2012 at 12:12 AM

If you could create a one page demo I could run, I'd take a stab at trying to fix it.

Comment 12 by Pristos posted on 2/1/2012 at 3:29 PM

I've get the answer in another post! Thanks for the help!
If anyone is interested..
http://www.raymondcamden.co...
Great Post

Now I'm having another problem with a cfchart... It's a bar chart created with data from a query.
I'm having trouble to define the thickness of bars and the distance between them. When I have lots of bars, they stay close to each other, but when I have just a few, they are really apart.
That's the xml:
<cfsavecontent variable="style">
<?xml version="1.0" encoding="UTF-8"?>
<frameChart>
<frame xDepth="6" yDepth="6" outline="#333333" lightColor="white"
leftAxisPlacement="Front" rightAxisPlacement="Front"/>
<elements shapeSize="40" place="stacked"/>
<xAxis scaleMin="0">
<labelStyle isHideOverlapped="true" orientation="vertical"/>
<titleStyle font="Verdana-14-bold" isMultiline="true"/>
</xAxis>
<yAxis scaleMin="0">
<titleStyle font="Verdana-14-bold"/>
</yAxis>
<topYAxis>
<titleStyle font="Arial-12-bold"/>
</topYAxis>
<dataLabels foreground="black"/>
<popup background="#C8FFFFFF" foreground="#333333"/>
<paint paint="Plain"/>
<insets left="5" top="5" right="5" bottom="5"/>
</frameChart>
</cfsavecontent>

That's my chart:
<cfchart scalefrom = "0"
scaleto = "100"
format = "jpg"
chartHeight = "500"
chartWidth = "800"
font = "arial"
fontSize = "10"
showBorder = "no"
labelFormat = "number"
tipStyle = "mouseOver"
backGroundColor = "##f9f9f9"
show3D = "no"
title = "Chart"
name = "my_chart"
showlegend = "yes"
xaxistitle = "x"
yaxistitle = "y"
style = #style#>

<cfchartseries
type="bar"
colorlist="#variables.color#"
dataLabelStyle="value">
<cfloop query="q_data">
<cfchartdata item="#desc#" value="#qty#">
</cfloop>
</cfchartseries>
</cfchart>

Comment 13 by Bernie posted on 4/4/2012 at 8:39 PM

How would one go about charting the data in percentages but displaying the inside chart labels in counts?

Comment 14 by Raymond Camden posted on 4/4/2012 at 10:06 PM

As far as I know you can't do this - the "tokens" in the labels are based on values. You can't pass in arbitrary data.

Comment 15 by sherri posted on 2/6/2013 at 7:05 PM

Thanks so much for posting this Raymond! You helped me to better define the pattern style to meet the needs of a client.

Comment 16 by Raymond Camden posted on 2/6/2013 at 7:46 PM

Glad this was useful for you! :)

Comment 17 by Sarah posted on 6/17/2013 at 9:55 AM

I have a combo chart (line and bar) but only want the data values on my bar series to be displayed. How do I do that? I've tried using <elements shape="Bar">
<series index="1" shape="Prism">
<morph morph="Grow"/>
<dataLabel style="Value"/>
</series>
</elements>
in my xml file, but I get an error. Invalid attribute: style
Do you know why this would be if i pulled it out of WebCharts? I'm using CF Version 8

Comment 18 by Raymond Camden posted on 6/17/2013 at 7:22 PM

Can you show me how you used cfchart? Just that line.