Using with Database and scripts > FusionCharts, ColdFusion and dataXML method
 

Here, we'll see how to use FusionCharts with ColdFusion using dataXML method.

As we had earlier seen the dataXML method needs just one page:

  • Chart.cfm - This page contains the chart say "Top 5 Employees" object alongwith XML data document any other HTML objects

The code for Chart.cfm can be listed as under:

<html>
<head>
<title>FusionCharts Lite Chart</title>
<link rel="stylesheet" href="Style.css">

<!--- Get a list of years to display in top drop down selection--->
<cfquery name="DataYears" datasource="q01nw">
   SELECT DISTINCT YEAR(OrderDate) As Year FROM Orders ORDER BY 1
</cfquery>
<cfloop query="DataYears">
   <cfset lastYear = DataYears.Year>
</cfloop>

<!--- If no form has been submitted yet, default year to first year from the query above --->
<cfparam name="Form.year" default="#lastYear#">
<cfset curYear = Val(Form.year)>
<!-- Get data for top 5 employees for this year -->
<cfquery name="EmpSales" datasource="q01nw">
   SELECT TOP 5 E.LastName, SUM(S.SubTotal) As Total
   FROM Employees E, [Order Subtotals] S, Orders O
   WHERE E.EmployeeID = O.EmployeeID AND O.OrderID = S.OrderID AND YEAR(O.OrderDate)=#curYear#
   GROUP BY E.LastName ORDER BY E.LastName
</cfquery>
<!-- Generate XML data for the Chart -->
<cfset Chart03XML = "<graph shownames='0' showvalues='0' yAxisName='Sales' numberPrefix='$'>">
<cfset thisColor = 1>
<cfloop query="EmpSales">
   <cfset Chart03XML = Chart03XML & "<set name='#EmpSales.LastName#' color='#Colors[thisColor]#'    value='#Round(EmpSales.Total)#' hoverText='#EmpSales.LastName#'/>">
   <cfset thisColor = thisColor + 1>
</cfloop>
<cfset Chart03XML = Chart03XML & "</graph>">
... HTML Code...
<!-- FusionCharts -->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="565" HEIGHT="420" id="FC2Pie3D" ALIGN="">
<PARAM NAME="FlashVars" value="&dataXML=<cfoutput>#Chart03XML#</cfoutput>">
<PARAM NAME=movie VALUE="../Charts/FC2Pie3D.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../Charts/FC2Pie3D.swf" FlashVars="&dataXML=<cfoutput>#Chart03XML#</cfoutput>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC2Pie3D" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
... HTML Code...

In this page, there is an array Colors defined, whose code can be listed as under:
<cfset Colors = ArrayNew(1)>
<cfset Colors[1] = "9A6606">
<cfset Colors[2] = "639A63">
<cfset Colors[3] = "7B7DB2">
<cfset Colors[4] = "FA9934">
<cfset Colors[5] = "CCCE04">
<cfset Colors[6] = "9C02FC">
<cfset Colors[7] = "9D999B">
<cfset Colors[8] = "9CFECC">
<cfset Colors[9] = "FFD1A3">
<cfset Colors[10] = "E8E88D">