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>

<cfoutput> <h2>#url.name#</h2> <p> Founded: #detail.yearfounded#<br/> Sales: #dollarFormat(detail.sales)#<br/> #paragraphFormat(detail.bio)# </cfoutput>

</cfif>

Not terribly useful I guess, but fun.