User Guide

754 Chapter 31: Creating Charts and Graphs
To create an area chart:
1. Open the chartdata.cfm file in your editor.
2. Edit the GetSalaries query so that it appears as follows:
<!-- Get the raw data from the database. -->
<cfquery name="GetSalaries" datasource="cfdocexamples">
SELECT Departmt.Dept_Name,
Employee.StartDate,
Employee.Salary
FROM Departmt, Employee
WHERE Departmt.Dept_ID = Employee.Dept_ID
</cfquery>
3. Add the following code before the html tag:
<!--- Convert start date to start year. --->
<!--- You must convert the date to a number for the query to work --->
<cfloop index="i" from="1" to="#GetSalaries.RecordCount#">
<cfset GetSalaries.StartDate[i]=NumberFormat(DatePart("yyyy",
GetSalaries.StartDate[i]) ,9999)>
</cfloop>
<!--- Query of Queries for average salary by start year. --->
<cfquery dbtype = "query" name = "HireSalaries">
SELECT
StartDate,
AVG(Salary) AS AvgByStart
FROM GetSalaries
GROUP BY StartDate
</cfquery>
<!--- Round average salaries to thousands. --->
<cfloop index="i" from="1" to="#HireSalaries.RecordCount#">
<cfset HireSalaries.AvgByStart[i]=Round(HireSalaries.AvgByStart[i]/
1000)*1000>
</cfloop>
4. Add the following cfchart tag before the end of the body tag block:
<!--- Area-style Line chart, from HireSalaries Query of Queries. --->
<cfchart
chartWidth=400
BackgroundColor="##FFFF00"
show3D="yes"
>
<cfchartseries
type="area"
query="HireSalaries"
valueColumn="AvgByStart"
itemColumn="StartDate"
/>
</cfchart>
<br>
5. Save the page.
6. View the chartdata.cfm page in your browser.