Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Controlling chart appearance > Setting pie chart characteristics PreviousNext

Setting pie chart characteristics

You can specify the following additional characteristics for pie charts:

Chart characteristic

Attributes used

Description

Slice style

(cfchart tag)

pieSliceStyle

Display pie chart as solid or sliced. Default is sliced.

Data point colors

(cfchartseries tag)

colorList

A comma-separated list of colors to use for each pie slice.

You can specify 16 color names or use any valid HTML color format. If you use the numeric format, you must use double pound signs, for example, blue or ##FF33CC. For the complete list of colors, see Configuring and Administering ColdFusion MX.

If you specify fewer colors than data points, the colors repeat. If you specify more colors than data points, the extra colors are not used.

The example in the following procedure adds a pie chart to the page.

To create a pie chart:

  1. Open chartdata.cfm 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.
  5. Return to your browser and enter the following URL to view chartdata.cfm:

    http://127.0.0.1/myapps/chartdata.cfm

    The following figure appears:


    This is a picture of the feature being described.

Reviewing the code

The following table describes the highlighted 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 3-D.

 
<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 DeptSalares 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 pound signs prevent ColdFusion from trying to interpret the color data as variable names.
Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Controlling chart appearance > Setting pie chart characteristics PreviousNext

ColdFusion 9 | ColdFusion 8 | ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX | Forums | Developer Center | Bug Reporting

Version 6.1

Comments are no longer accepted for ColdFusion MX 6.1. ColdFusion 8 is the current version.