ColdFusion : How to link each part of a pie chart to a specific URL?

Question

I've got a basic pie chart with values like this

    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="720310">
    <cfchartdata item="March" value="688700">

I'd like to link each piece of the pie to a specific URL - I don't need to post any variables to the URL.

I tried something like this;

<cfchartdata item="January" value="503100" url="januarydata.cfm">

but URL is not a valid attribute for 'cfchartdata'

It doesn't make sense from my standpoint to have JanuaryData.cfm FeburaryData.cfm etc... just monthlyData.cfm?month=January that looks at form or url variables (url in this case). that's 1 page to maintain, not 12. but I did give you a way to work this out in my answer. — genericHCU, Feb 04 '13 at 16:55

genericHCU · Accepted Answer · 2013-02-05T10:44:08.023

The url attribute belongs to the CFChart tag, not the CFChartData tag

URL:

URL to open if the user clicks item in a data series; the onClick destination page.

You can specify variables within the URL string; ColdFusion passes current values of the variables.

$VALUE$: the value of the selected row. If none, the value is an empty string.

$ITEMLABEL$: the label of the selected item. If none, the value is an empty string.

$SERIESLABEL$: the label of the selected series.

If none, the value is an empty string, for example: "somepage.cfm?item=$ITEMLABEL$&series=$SERIESLABEL$&value=$VALUE$

"javascript:...": executes a client-side script.

if you want to do a dynamic search you can use the dynamic values above mixed in with static and other CF values. for example:

<cfchart url="someSearchPage.cfm?param1=Static Text&param2=#form.ColdFusionFormVariable#&param3=$ITEMLABEL$" ...>

In this example the $ITEMLABEL$ is converted to the label automatically.

Disclaimer

Before answering your actual question, I should point out that this isn't a good practice and defeats the entire purpose of a dynamic website. You should consider a single page that accepts a parameter and pulls the data from a database depending on that parameter. For example monthlyData.cfm?month=january

The simplest way would be to put the item label in the file name as you confirmed worked in the comments.

<cfchart url = "$itemLabel$data.cfm" ...>

If you needed to do a little more testing before sending the user along, you could send them to a single ColdFusion page and use CFSWITCH / CFCASE or good old CFIF / CFELSE if there aren't that many combinations.

-or-

you could use the javaScript: option and run a function that uses window.location depending on the series clicked.

javaScript:goto($itemSeries$,$seriesLabel$)

The js function may look like:

function goto(item,label){
  if(item == "..." && label== "..."){
   document.location = "..."; 
  }else{
   etc...;
  }
}

Ok so how can I request a specific URL from different parts of the piechart without having to post variables? — blarg, Feb 04 '13 at 16:33
Darn. Took too long typing and Travis updated his response again and beat me to it ;-) — Leigh, Feb 04 '13 at 16:59
I haven't tried this but another thing you might be able to do is url = "$itemLabel$data.cfm" — genericHCU, Feb 04 '13 at 18:06
While I agree a single page (with parameters) is better, that is a slick idea :) — Leigh, Feb 04 '13 at 20:30
I went with url = "$itemLabel$data.cfm" it suits my purpose better. — blarg, Feb 05 '13 at 10:04
@JackDamery I updated the answer since you confirmed the suggestion in the comments but PLEASE read the disclaimer. — genericHCU, Feb 05 '13 at 10:45
@JackDamery - Is there a specific reason you *must* use a different script for each month? — Leigh, Feb 05 '13 at 15:23

ColdFusion : How to link each part of a pie chart to a specific URL?

1 Answers1