
998
DEVELOPING
COLDFUSION 9 APPLICATIONS
Working with Documents, Charts, and Reports
Las
t
upda
te
d 8/5/2010
<!--- Bar chart, from Query of Queries --->
<cfchart
scaleFrom=40000
scaleTo=100000
font="arial"
fontSize=16
gridLines=4
show3D="yes"
foregroundcolor="##000066"
databackgroundcolor="##FFFFCC"
chartwidth="450"
>
<cfchartseries
type="bar"
query="DeptSalaries"
valueColumn="AvgByDept"
itemColumn="Dept_Name"
seriescolor="##33CC99"
paintstyle="shade"
/>
</cfchart>
3
Save the file as chartdatastyle1.cfm.
4
View the chartdatastyle1.cfm page in your browser.
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.
1
Open the chartdata.cfm file in your editor.
2
Edit the DeptSalaries query and the
cfloop
code so that it appears as follows:
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.