Ask a Jedi: Handling legend clicks in CFCHART

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

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 developer advocate. He focuses on JavaScript, serverless 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

Comments