Ask a Jedi: Having CFCHART Links in a new window

This post is more than 2 years old.

Dez asks:

I have a chart that I want to link to another application in order to drill down further. Do you know how to setup the links within a chart to open into a new window.

Turns out this is rather trivial, and even explained in the docs. CFCHART takes a URL attribute. You can supply a URL to hit along with 3 custom variables: $ITEMLABEL$, $SERIESLABEL$, and $VALUE$. When clicked, the code will translate these three variables based on where you click. What you may not realize is that you can easily use a JavaScript URL:

<cfchart url="javascript:newWin('$ITEMLABEL$','$SERIESLABEL$','$VALUE$')">

In this example, each click will result in a call to newWin, passing the values along:

<script> function newWin(itemlabel,serieslabel,value) { alert(itemlabel + ' ' + serieslabel + ' ' + value); } </script>

In my sample above I just alerted the values, but you could easily open a new window. Or use one of the new ColdFusion 8 Ajax features to load detailed information inside a cfdiv.

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 Andrew posted on 3/12/2008 at 2:28 AM

I've done this a lot in one of my dashboard apps where users would drill from a chart to more detailed data. Here's the JavaScript function is used:

<script language="javascript1.1" type="text/javascript">

function drillDown(var) {

// Build the url for the detail pop-up page

var baseUrl = "MyCFM_Page.cfm";

var url = baseUrl + "?URL_Parameter=" + (var);

// Navigate to the URL

window.location = url;

url.focus();

}

</script>

Here's how I called the JavaScript function from my chart:

<cfchart format="flash" chartheight="400" chartwidth="750"

yaxistitle="AVG SCORE" show3d="no" showlegend="yes"

// Pass the ITEMLABEL to the JavaScript function

url="JavaScript:drillDown ('$ITEMLABEL$')"

style="XML/ctech.xml" scalefrom="0" scaleto="6">

I got the idea from the CFWACK (6 & 7) and it worked well for me. The "style" attribute points to an xml file that let's me set custom styles for the chart (a coworker of mine created the template that we all used).

I'm sure there's probably a better way of doing this but it worked well for me and the users were ecstatic about the functionality.

Hope this helps.

Comment 2 by Michael R. Azar posted on 5/12/2009 at 7:01 PM

this is great. Since i am using serieslabel and itemlabel already, i was wondering if there is there a way to use query field values as url var's? such as...

<cfchart url="/index.cfm?il=$ITEMLABEL$&flid=$QUERY.groupFLID$">
<cfchartseries type="line" query="q1" serieslabel="#q1.descr#" itemColumn="day" valueColumn="calls"/>
</cfchart>

Comment 3 by Raymond Camden posted on 5/12/2009 at 7:03 PM

The short answer is no, but you can work around it.

http://www.coldfusionjedi.c...

Comment 4 by Michael R. Azar posted on 5/12/2009 at 8:17 PM

That works great! i have never used toScript() before, but i know it will come in handy,thanks a lot!

Comment 5 by John Longo posted on 7/10/2009 at 3:00 AM

I trying to do something similar with what I think is a simple script. I want to open a new window with more detailed information about the graph.

My Code is:
<cfchart seriesplacement="cluster" yaxistitle="Value ($M)" xaxistitle="Funding Client Clustered by Year" showlegend="yes" chartheight="300" chartwidth="700" url="javascript:window.open('MyNewWindow.cfm?Item=$ITEMLABEL$');">

The new window opens fine, but the original window goes blank and either shows the text: '[object]' (ie) or '[object Window]' (firefox)

I want the referring page to stay put, any ideas where I went wrong?

Thanks

Comment 6 by Steve Caldwell posted on 7/21/2009 at 8:35 PM

@John:

You have to write your window.open in a function and then call it as shown in the example. It won't work if you try to call it direct.

Example:

<script>
function popup(itemlabel) {
window.open('MyNewWindow.cfm?Item=' + ITEMLABEL');
}
</script>

And in your chart:

<cfchart ... url="javascript:popup('$ITEMLABEL$')">

Hope that helps

Steve

Comment 7 by Vargas posted on 5/26/2010 at 11:29 PM

Is there a way to bind a cfchart to the itemvalue of another cfchart

Comment 8 by Raymond Camden posted on 5/27/2010 at 3:18 AM

You can run JavaScript code when you click an item, so yes. Search my blog for cfchart - one of the entries demonstrates this.

Comment 9 by conanbarb posted on 5/10/2012 at 1:56 AM

The javascript call fails if the $ITEMLABEL$ variable has an apostrophe in it. Is there a way around this?

Comment 10 by Raymond Camden posted on 5/10/2012 at 2:05 AM

Well, you could try:

<cfchart url='javascript:newWin("$ITEMLABEL$","$SERIESLABEL$","$VALUE$")'>

I basically reversed them. Outside of that I do not know.

Comment 11 by conanbarb posted on 5/10/2012 at 2:17 AM

Thanks for the reply. Unfortunately reversing the single quotes behaved the same way. I've also tried jsStringFormat, but that didn't work either. I'll keep dinking with it, but as a last resort, I can probably just strip out the apostrophe in the resultset so it doesn't even get passed. Not ideal, but at least it's something

Comment 12 by CFChris posted on 2/27/2014 at 12:52 AM

Hi Ray,

I was wondering if the url attribute works with cfchart when format="html"? I have tried on 3 different browsers and nothing seems to work.

Thanks,

Comment 13 by Raymond Camden posted on 2/27/2014 at 12:57 AM

The HTML charts are *totally* new. I think I may have blogged about this though - just try searching for cfchart.