Ask a Jedi: Handling legend clicks in CFCHART

This post is more than 2 years old.

Dave asks:

I have a drill down chart application that allows users to look both at the big picture and drill down to the detail on the charts. Today (after the application has been running for over a year) the customer noticed that if they click on the legend it tried to go to the detail page. However it doesn't send the $ItemLabel (because they didn't click on a data item.) I looked in Webchart 3D to see if there were any options but don't see any for links. Is there a way around this or do I need to remove the legend and replace it with a text legend?

This was an interesting question. I had never even tried to click on a legend in cfchart. I wrote up a quick demo to see if I could reproduce this: <cfset q = queryNew("dept,sales")>

<cfset queryAddRow(q)> <cfset querySetCell(q, "dept", "Alpha")> <cfset querySetCell(q, "sales", 239)> <cfset queryAddRow(q)> <cfset querySetCell(q, "dept", "Beta")> <cfset querySetCell(q, "sales", 80)> <cfset queryAddRow(q)> <cfset querySetCell(q, "dept", "Gamma")> <cfset querySetCell(q, "sales", 120)>

<cfdump var="#url#" label="URL">

<cfchart format="flash" showLegend="true" url="test.cfm?v=$VALUE$&il=$ITEMLABEL$&sl=$SERIESLABEL$"> <cfchartseries type="bar" query="q" itemcolumn="dept" valuecolumn="sales"> </cfchartseries> </cfchart>

All I have here is a simple, hard coded query and a bar chart. Notice too that I dump the URL. When clicking on a bar, I get all 3 values passed as I expected. Clicking on the legend resulted in itemLabel being passed (I assume Dave just typoed in his question) but the serieslabel and value entries were blank.

Now this may not be a bug at all. You may even want this. You could set it up so that clicking on the bar takes you to sales figures for that department, but clicking on the legend takes you to generic info for the department. You would have to use server-side code to sniff the URL values and redirect accordingly. But if you don't want this, what do you do?

Do not forget (and I've blogged on this before) that you can use JavaScript URLs for cfchart. This means you can run a JavaScript function when the user clicks on the chart. It is a trivial matter then to note the values and react accordingly:

<script> function handleClick(v,il,sl) { if(v != "") document.location.href='test.cfm?v='+escape(v)+'&il='+il+'&sl='+sl; } </script> <cfchart format="flash" showLegend="true" url="javascript:handleClick('$VALUE$','$ITEMLABEL$','$SERIESLABEL$')"> <cfchartseries type="bar" query="q" itemcolumn="dept" valuecolumn="sales"> </cfchartseries> </cfchart>

All I've done here is to note the empty value attribute. If it isn't value, we go ahead and load the URL as we did in the first version.

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 Allen posted on 8/8/2008 at 4:13 AM

Thanks for sharing this info with folks. I finally used CFChart a few weeks ago and had the same issue. This was about the best solution I could come up with, too. I have to say I was disappointed that ColdFusion didn't offer better control and options for this sort of thing.

Comment 2 by berto posted on 9/18/2008 at 8:02 PM

Hello, how would you handle the mouseover event using javascript (rather than click event)? so, for instance if I wanted to make a pop up of the value, item label and series label on mouseover, how can I go about doing that.


Comment 3 by Raymond Camden posted on 9/19/2008 at 10:01 PM

Doesn't it already do that? I mean show a tooltip.

Comment 4 by Kevin Duncan posted on 1/9/2010 at 12:11 AM


Using this function how would I escape the single quote in the item label. The problem I have is my item label happens to be the page name on the site. If they call it Men's Golf the rest of my CMS does not care about the single quote but my stats page needs to go to the stats table and find this page link to count the clicks.

Comment 5 by Raymond Camden posted on 1/9/2010 at 12:13 AM

Try jsStringFormat. It should clean it up.