Adobe ColdFusion 8

Creating charts: examples

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.

  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.

  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.