Creating charts: examples

This section contains examples of different types of charts.

Creating a bar chart

The example in the following procedure adds a title to the bar chart, specifies that the chart is three dimensional, adds grid lines, sets the minimum and maximum y-axis values, and uses a custom set of colors.

To enhance the bar chart:

  1. Open the chartdata.cfm file in your editor.
  2. Edit the cfchart tag so that it appears as follows: 
    <!--- 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.

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.

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"
		fontsize=14
		fontBold="yes"
		backgroundColor = "##CCFFFF"
		show3D="yes"
		>
		
	<cfchartseries 
		type="pie" 
		query="DeptSalaries" 
		valueColumn="SumByDept" 
		itemColumn="Dept_Name" 
		colorlist="##6666FF,##66FF66,##FF6666,##66CCCC"
		/>
</cfchart>
<br>
  4. Save the file as chartdatapie1.cfm.
  5. View the chartdatapie1.cfm page in your browser:

Reviewing the code

The following table describes the code and its function:

Code Description 
SUM(Salary) AS SumByDept,

In the DeptSalaries query, add a SUM aggregation function to get the sum of all salaries per department.

 
<cfset DeptSalaries.SumByDept[i]=
   Round(DeptSalaries.SumByDept[i]/
   1000)*1000>

In the cfloop tag, round the salary sums to the nearest thousand.

 
<cfchart 
   tipStyle="mousedown" 
   font="Times"
   fontBold="yes"
   backgroundColor = "##CCFFFF"
   show3D="yes"
   >

Show a tip only when a user clicks on the chart, display text in Times bold font, set the background color to light blue, and display the chart in three dimensions.

 
<cfchartseries 
   type="pie" 
   query="DeptSalaries" 
   valueColumn="SumByDept" 
   itemColumn="Dept_Name" 
   colorlist=
      "##6666FF,##66FF66,##FF6666,##66CCCC"
/>

Create a pie chart using the SumByDept salary sum values from the DeptSalaries query.

Use the contents of the Dept_Name column for the item labels displayed in the chart legend.

Get the pie slice colors from a custom list, which uses hexadecimal color numbers. The double number signs prevent ColdFusion from trying to interpret the color data as variable names.

View comments in LiveDocs