User Guide

Table Of Contents
752 Chapter 31: Creating Charts and Graphs
Reviewing the code
The following table describes the code in the preceding example.
Creating a pie chart
The example in the following procedure adds a pie chart to the page.
To create a pie chart:
1.
Open the chartdata.cfm file in your editor.
2.
Edit the DeptSalaries query and the cfloop code so that it appears as follows:
<!--- A query to get statistical data for each department. --->
<cfquery dbtype = "query" name = "DeptSalaries">
SELECT
Dept_Name,
SUM(Salary) AS SumByDept,
AVG(Salary) AS AvgByDept
FROM GetSalaries
GROUP BY Dept_Name
</cfquery>
<!--- Reformat the generated numbers to show only thousands. --->
<cfloop index="i" from="1" to="#DeptSalaries.RecordCount#">
<cfset DeptSalaries.SumByDept[i]=Round(DeptSalaries.SumByDept[i]/
1000)*1000>
<cfset DeptSalaries.AvgByDept[i]=Round(DeptSalaries.AvgByDept[i]/
1000)*1000>
</cfloop>
3.
Add the following cfchart tag:
<!--- Pie chart, from DeptSalaries Query of Queries. --->
<cfchart
tipStyle="mousedown"
font="Times"
Code Description
scaleFrom=40000
Set the minimum value of the vertical axis to 40000.
scaleTo=100000
Set the maximum value of the vertical axis to 100000. The
minimum value is the default,
0.
font="arial"
Displays text using the Arial font.
fontSize=16
Makes the point size of the labels 16 points.
gridLines = 4
Displays four grid lines between the top and bottom of the chart.
show3D = "yes"
Shows the chart in 3D.
foregroundcolor="##000066"
Sets the color of the text, gridlines, and labels.
databackgroundcolor="##FFFFCC"
Sets the color of the background behind the bars.
seriescolor="##33CC99"
Sets the color of the bars.
paintstyle="shade"
Sets the paint display style.