Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Interactive Graphing
One of the neatest things about the new graphing engine is that it allows your data points to be interactive. That is, you can click on a data point to "drill down" to a detail view of that particular item. Flash is installed on 97 percent of browsers and is now shipping with Windows XP. The interactive ability to click on data points and pass that item's ID as a URL variable is available only when you display your graphs in Flash format. So, it is rather safe and more powerful to display your graphs in Flash format.
Listing 2 is an example of how to do it using the URL and URLColumn attributes of the CFGRAPH tag. This example creates a self-posting form that selects two columns from the database. One is used to display the information in the graph, and the other is used to pass as a unique ID to the action page. Then the action page will run a new query, gathering detailed information from the database based on the ID that it was passed in the URL.
Listing 2: InteractiveGraph.cfm
<cfset thisPage = cgi.Script_name>
<!---select data about orders------->
<cfquery name="getOrders" datasource="CoreStore">
SELECT GrandTotal, OrderConfirmation
FROM Orders
</cfquery>
<html>
<head>
<title>Dynamic URL Graph</title>
</head>
<body>
<!---specify the URL attribute to pass the orderID so that the
user can see product info for a particular order--->
<cfgraph type="HorizontalBar"
backgroundcolor="tan"
depth=10
query="getOrders"
valueColumn="GrandTotal"
title="Order Totals Placement in 2000"
URL="#thisPage#?OrderID="
URLColumn="OrderConfirmation">
</cfgraph>
<!----self-post for details----->
<cfif isDefined("URL.OrderID")>
<!----get the details of the passed order, which
is a datatype UUID (Universally Unique ID)------>
<cfquery name="getDetails" datasource="CoreStore">
SELECT OP.OrderConfirmation, OP.ProductID, OP.Qty,
P.ProductName, P.Price
FROM ordersproducts OP
INNER JOIN Products P
ON P.ProductID = OP.ProductID
WHERE OrderConfirmation = '#URLDecode(URL.OrderID)#'
</cfquery>
<cfif Len(getDetails.RecordCount) neq 0>
<!---output the detail information----->
<cfoutput>
<table width="80%">
<tr>
<td><b>Product ID</b></td>
<td><b>Product</b></td>
<td><b>Quantity</b></td>
<td><b>Price</b></td>
</tr>
<!---make one row for each product ordered------->
<cfloop from="1" to="#getDetails.RecordCount#" index="i">
<tr>
<td>[#getDetails.ProductID[i]#]<br></td>
<td>#Trim(getDetails.ProductName[i])#<br></td>
<td align="center" valign="top">#getDetails.Qty[i]#<br></td>
<td align="center" valign="top">
#DollarFormat(getDetails.Price[i])#<br></td>
</tr>
</cfloop>
</table>
</cfoutput>
<cfelse>
<br><br>
I'm sorry. I do not have any further information about that order.
<!-----end check for recordset length 0------->
</cfif>
<!----end check for is URL param defined------->
</cfif>
</body>
My new book, Core ColdFusion 5, gives you the nitty-gritty on all the aspects of ColdFusion development that you need to succeed. It contains a wealth of complete applications, including an e-commerce site and a data drill-down application using <CFGRAPH>. Pick up a copy today to find out more.