Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Controlling chart appearance > Creating an area chart PreviousNext

Creating an area chart

The example in the following procedure adds an area chart showing the average salary by start date to the salaries analysis page. It shows the use of a second query of queries to generate a new analysis of the raw data from the GetSalaries query. It also shows the use of additional cfchart attributes.

To create an area chart:

  1. Open chartdata.cfm your editor.
  2. Edit the GetSalaries query so that it appears as follows:
    <!-- Get the raw data from the database. -->
<cfquery name="GetSalaries" datasource="CompanyInfo">
   SELECT Departmt.Dept_Name, 
      Employee.StartDate,
      Employee.Salary
   FROM Departmt, Employee
   WHERE Departmt.Dept_ID = Employee.Dept_ID
</cfquery>
  3. Add the following code before the html tag:
    <!--- Convert start date to start year. --->
<!--- You must explicitly convert the date to a number for the query to work 
--->
<cfloop index="i" from="1" to="#GetSalaries.RecordCount#">
<cfset GetSalaries.StartDate[i]=NumberFormat(DatePart("yyyy", 
GetSalaries.StartDate[i]) ,9999)>
</cfloop>

<!--- Query of Queries for average salary by start year --->
<cfquery dbtype = "query" name = "HireSalaries">
   SELECT 
      StartDate,
      AVG(Salary) AS AvgByStart
   FROM GetSalaries
   GROUP BY StartDate
</cfquery>

<!--- Round average salaries to thousands ---> 
<cfloop index="i" from="1" to="#HireSalaries.RecordCount#">
   <cfset HireSalaries.AvgByStart[i]=Round(HireSalaries.AvgByStart[i]/
1000)*1000>
</cfloop>
  4. Add the following cfchart tag before the end of the body tag block:
    <!--- Area-style Line chart, from HireSalaries Query of Queries --->
<cfchart 
      chartWidth=400
      BackgroundColor="##FFFF00"
      show3D="yes"
   >
   <cfchartseries
      type="area" 
      query="HireSalaries" 
      valueColumn="AvgByStart" 
      itemColumn="StartDate"
    />
</cfchart>
<br>
  5. Save the page.
  6. Return to your browser and enter the following URL to view chartdata.cfm:

    http://127.0.0.1/myapps/chartdata.cfm

Reviewing the code

The following table describes the highlighted code and its function:

Code

Description

 
Employee.StartDate,

Add the employee start date to the data in the GetSalaries query.

 
<cfloop index="i" from="1"
    to="#GetSalaries.RecordCount#">
  <cfset GetSalaries.StartDate[i]=
  NumberFormat(DatePart("yyyy",
  GetSalaries.StartDate[i]) ,9999)>
</cfloop>

Use a cfloop tag to extract the year of hire from each employee's hire data, and convert the result to a four-digit number.

 
<cfquery dbtype = "query" name =
"HireSalaries">
  SELECT 
       StartDate,
    AVG(Salary) AS AvgByStart
  FROM GetSalaries
  GROUP BY StartDate
</cfquery>

Create a second query from the GetSalaries query. This query contains the average salary for each start year. 

<cfloop index="i" from="1"
   to="#HireSalaries.RecordCount#">
  <cfset HireSalaries.AvgByStart[i] 
  =Round(HireSalaries.AvgByStart[i]
  /1000)*1000>
</cfloop>

Round the salaries to the nearest thousand.

 
<cfchart 
      chartWidth=400
      BackgroundColor="##FFFF00"
      show3D="yes" >
   <cfchartseries
      type="area" 
      query="HireSalaries" 
      valueColumn="AvgByStart" 
      itemColumn="StartDate"
    />
</cfchart>

Create a line chart using the HireSalaries query. Chart the average salaries against the start date.

Limit the chart width to 400 pixels, show the chart in 3-D, and set the background color to white.

Contents > Developing ColdFusion MX Applications > Charting and Graphing Data > Controlling chart appearance > Creating an area chart 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.