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.
Archived Comments
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.
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>
The short answer is no, but you can work around it.
http://www.coldfusionjedi.c...
That works great! i have never used toScript() before, but i know it will come in handy,thanks a lot!
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
@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
Is there a way to bind a cfchart to the itemvalue of another cfchart
You can run JavaScript code when you click an item, so yes. Search my blog for cfchart - one of the entries demonstrates this.
The javascript call fails if the $ITEMLABEL$ variable has an apostrophe in it. Is there a way around this?
Well, you could try:
<cfchart url='javascript:newWin("$ITEMLABEL$","$SERIESLABEL$","$VALUE$")'>
I basically reversed them. Outside of that I do not know.
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
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,
The HTML charts are *totally* new. I think I may have blogged about this though - just try searching for cfchart.