User Guide

Table Of Contents
740 Chapter 31: Creating Charts and Graphs
You can also rewrite this example to use the cfoutput and cfchartdata tags within the
cfchartseries tag, instead of using the loop, to round the salary data, as the following code
shows:
<cfchartseries
type="bar"
seriesColor="olive"
paintStyle="plain">
<cfoutput query="deptSalaries">
<cfchartdata item="#dept_name#" value=#Round(AvgByDept/1000)*1000#>
</cfoutput>
</cfchartseries>
Combining a query and data points
To chart data from both query and individual data values, you specify the query name and related
attributes in the
cfchartseries tag, and provide additional data points using the cfchartdata
tag.
ColdFusion displays the chart data specified by a
cfchartdata tag before the data from a query;
for example, to the left on a bar chart. You can use the
sortXAxis attribute of the cfchart tag to
sort data alphabetically along the x-axis.
<cfloop index="i" from="1"
to="#DeptSalaries.RecordCount#">
<cfset DeptSalaries.AvgByDept[i]=
Round(DeptSalaries.AvgByDept[i]
/1000)*1000>
</cfloop>
Loop through all the rows in the DeptSalaries query
and round the salary data to the nearest thousand.
This loop uses the RecordCount query variable to
get the number of rows, and directly changes the
contents of the query object.
<cfchart
xAxisTitle="Department"
yAxisTitle="Salary Average"
font="Arial"
gridlines=6
showXGridlines="yes"
showYGridlines="yes"
showborder="yes"
show3d="yes" >
<cfchartseries
type="bar"
query="DeptSalaries"
valueColumn="AvgByDept"
itemColumn="Dept_Name"
seriesColor="olive"
paintStyle="plain"/>
</cfchart>
Create a bar chart using the data from the
AvgByDept column of the DeptSalaries query.
Label the bars with the department names.
Code Description