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

As with all other languages, FusionCharts can be used with ColdFusion too using both dataURL and dataXML method.

As we had earlier seen the dataURL method, it requires two pages:

  • Chart Container Page - This page contains the chart object alongwith any other HTML objects e.g., TopCountries.cfm
  • Data Provider Page - This page provides the XML data required by the chart. This page is invoked by FusionCharts contained in Chart.cf. e.g., TopCountriesData.cfm

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

<cfset curYear = Val(URL.Year)>
<cfquery name="TopCountries" datasource="q01nw">
   SELECT TOP 10 Country, SUM(ExtendedPrice) As Total, COUNT(DISTINCT OrderID) As orderNumber
   FROM Invoices
   WHERE YEAR(OrderDate)=#curYear#
   GROUP BY Country ORDER BY SUM(ExtendedPrice) DESC
</cfquery>

<graph shownames='1' showvalues='0' decimalPrecision='0' numberPrefix='$'>
<cfset thisColor = 1>
<cfoutput query="TopCountries">
<set name='#TopCountries.Country#' value='#Round(TopCountries.Total)#' color='#Colors[thisColor]#'/>
<cfset thisColor = thisColor + 1>
</cfoutput>
</graph>

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">
And, TopCountries.cfm contains the following code:
<html>
<head>
<title>FusionCharts Lite Chart</title>
<link rel="stylesheet" href="Style.css">
<cfset curYear = Val(URL.Year)>
<cfquery name="TopCountries" datasource="q01nw">
   SELECT TOP 10 Country, SUM(ExtendedPrice) As Total
   FROM Invoices
   WHERE YEAR(OrderDate)=#curYear#
   GROUP BY Country ORDER BY SUM(ExtendedPrice) DESC
</cfquery>
... Drop Down for year selecting ...
... HTML Code ...

<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="FC2Column" ALIGN="">
<PARAM NAME=movie VALUE="../Charts/FC2Column.swf?dataURL=TopCountriesData.cfm*Year=<cfoutput>#URL.Year#</cfoutput>">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="../Charts/FC2MSColumn.swf?dataURL=TopCountriesData.cfm*Year=<cfoutput>#URL.Year#</cfoutput>" quality=high bgcolor=#FFFFFF WIDTH="565" HEIGHT="420" NAME="FC2Column" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
... HTML Code ...