Simple CFCHART/jQuery Demo

This post is more than 2 years old.

I had some time to kill today and I decide to mix cfchart up with some jQuery love. You can see the demo of this here. When the chart loads, click on the bars, and you will see a detail load beneath the graph.

The code behind this is fairly trivial. I've got a file I include to generate my chart data. Normally this would be a proper database query. The main template's code consists of:

<cfinclude template="data.cfm">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function loadData(l) { $("#detail").load('detail.cfm?name='+escape(l)).hide().fadeIn('slow') } </script>

<cfchart chartWidth="500" chartHeight="250" format="flash" url="javascript:loadData('$ITEMLABEL$')"> <cfchartseries type="bar" query="data" itemcolumn="name" valuecolumn="sales" /> </cfchart>

<div id="detail" style="width:500"></div>

The cfchart makes use of the url attribute to specify what should happen when you click. In this case, I'm simply calling a function, loadData(). This then uses jQuery to make a remote call to detail.cfm. Note that I pass the name. Normally you would pass a primary key, but we don't have (easy) access to that (see this entry for more info) value so we have to work with the name instead. That's it. All detail.cfm does is look up the detail information:

<cfinclude template="data.cfm">

<cfparam name="url.name" default="">

<!--- get detail based on label ---> <cfquery name="detail" dbtype="query"> select * from data where name = <cfqueryparam cfsqltype="cf_sql_varchar" value="#url.name#"> </cfquery>

<cfif detail.recordCount is 1>

&lt;cfoutput&gt;
&lt;h2&gt;#url.name#&lt;/h2&gt;
&lt;p&gt;
Founded: #detail.yearfounded#&lt;br/&gt;
Sales: #dollarFormat(detail.sales)#&lt;br/&gt;
#paragraphFormat(detail.bio)#
&lt;/cfoutput&gt;

</cfif>

Not terribly useful I guess, but fun.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. 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

Archived Comments

Comment 1 by Todd Rafferty posted on 5/15/2009 at 8:25 PM

So strange. Demo wasn't working for me at all until I enabled Firebug. o_O

Comment 2 by Todd Rafferty posted on 5/15/2009 at 8:27 PM

Yeah, if I disable firebug... it stops working again. o_O

Comment 3 by Raymond Camden posted on 5/15/2009 at 8:27 PM

Weird. I specifically removed the console.log message for folks who don't have Firebug.

Oh shoot. Caching. I'm clearing the cache now.

Comment 4 by Raymond Camden posted on 5/15/2009 at 8:28 PM

Should be ok now. Thanks for the warning!

Comment 5 by Josh Amburn posted on 5/15/2009 at 8:29 PM

Ray, I'm not sure why your in the coding business. Nukes and Burgers would be a great burger joint!

"nuke burger"

Comment 6 by connor2k posted on 5/15/2009 at 11:14 PM

It doesn't seem to work for me in Firefox either.

Comment 7 by Todd Rafferty posted on 5/15/2009 at 11:17 PM

Works fine for me in FF 3.0.10 with or without Firebug turned on.

Comment 8 by connor2k posted on 5/15/2009 at 11:19 PM

That's the same version I am using. Weird. Maybe I need a reboot.