Interesting CFCHART Trick

This post is more than 2 years old.

A reader, Asaf, and I exchanged a few emails earlier this week about an interesting little cfchart trick. It relates to a blog entry I did earlier in the month: Ask a Jedi: Showing the Values on a Chart. Specifically - controlling the labels on your chart. I definitely recommend reading that article first as some of the following won't make sense without it.

Asaf discovered that when you specify a dataLabel style in your chart XML, one of the special values is $(desc). In my last article I showed a few other tokens (value, colPercent, colTotal). The desc token is interesting. It takes a string from your data and uses it for the label. So consider this hacked up data:

<cfset q2 = queryNew("year,employees","integer,varchar")> <!--- generate random sales data ---> <cfloop index="y" from="1994" to="1998"> <cfscript> queryAddRow(q2); querySetCell(q2, "year", y); querySetCell(q2, "employees", randRange(2,8) & " foo #y#"); </cfscript> </cfloop>

Previously, this query was simply a set of years and employees. Notice I still use a random number for that. But now I've added a string, foo #y#, after the value. So one row of the query may look like so:

year=1994 employes=5 foo 1994

In the style XML for the chart, I used:

<?xml version="1.0" encoding="UTF-8"?> <frameChart is3D="false"> <legend useMarkers="true"/> <elements action="" place="Default" outline="black"> <series index="0" place="Clustered" shape="Line"> <dataLabel style="Pattern"> <![CDATA[ $(desc) ]]> </dataLabel> </series> </elements> </frameChart>

Notice the dataLabel and the use of $(desc). So what happens next is kind of cool. I can run the chart as normal:

<cfchart chartWidth="400" chartHeight="400" title="Sales" font="arial" style="#chartxml#"> <cfchartseries type="line" query="q2" itemColumn="year" valueColumn="employees" seriesLabel="Employees" /> </cfchart>

And ColdFusion will ignore the string portion of the data. The charting engine will use this as the label:

This could have some interesting uses. For example, you could add descriptions for data points that have special meanings. For example, you could correlate your query to product releases, and for every year that had a product release, mention it: "Released Phaser Gun". This would help give some context to the ups and downs of the chart.

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

Archived Comments

Comment 1 by Neil posted on 5/12/2009 at 5:00 PM

this appears to only work if the chartseries draws its data from a query using its query attribute. it does not work if you try to append a string to the cfchartdata tag's value attribute. it throws an error as coldfusion expects a number.

Comment 2 by Monte Chan posted on 4/27/2010 at 6:41 PM

Instead of showing the labels above the markers, can it make the labels displayed below the markers?

Comment 3 by Raymond Camden posted on 4/30/2010 at 7:26 AM

This XML will do it:

<dataLabels style="Value" placement="Inside"/>

Comment 4 by Monte Chan posted on 5/1/2010 at 12:24 AM


Thank you for your response. That's exactly what I am looking for.

Oh by the way, I found a webcharts plug-in that works with CF Builder. Go to Help>Install New Software and paste in the following URL,

Follow the instructions. After the installation, just restart the CF????????????????????????????????????????????????? Builder.

I don't know about you but my webcharts GUI messes up on me all the time. The webcharts GUI within CF Builder is a lot more stable.

Comment 5 by Monte Chan posted on 5/1/2010 at 12:25 AM

Sorry about those question marks in my previous post. I have no clue how those question marks got in there.

Comment 6 by Monte Chan posted on 5/1/2010 at 12:27 AM

oops, I put the wrong URL there. That URL shows the steps on what needs to be done. This is the URL that you put in your CF Builder.

Comment 7 by Raymond Camden posted on 5/1/2010 at 12:38 AM

Yep, knew about that. Pretty cool thing.

Comment 8 by Kelly McIntosh posted on 1/31/2014 at 10:59 PM

Sorry, I know this is an old post, but I can't find the answer to my question anywhere.
I am using a query to create a stacked chart and I want to have the label to be generated dynamically and be cumulative and formatted.
For example:
Qtr Data Label
Q1 1000 $1K
Q2 1200 $2.2K
Q3 900 $3.1K
Q4 1500 $4.6K
Is this possible? Can I set the desc somehow?

Comment 9 by Raymond Camden posted on 2/5/2014 at 3:48 AM

Labels are tied to data points typically not to the sum or anything like that. Best I can suggest is firing up the chart editor and seeing if you can find an option.