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 cfcharttag so that it appears as follows:

   <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.

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 cfloopcode so that it appears as follows:

   <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 cfcharttag:

   <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:

Creating an area chart

The example in the following procedure adds an area chart to the salaries analysis page. The chart shows 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.

1. Open the chartdata.cfm file in your editor.

2. Edit the GetSalaries query so that it appears as follows:

   <cfquery name="GetSalaries" datasource="cfdocexamples"> 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 htmltag:

   <!--- 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 bodytag block:

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

    

5. Save the page.
6. View the chartdata.cfm page in your browser.

Reviewing the code

The following table describes the code and its function:

Setting curve chart characteristics

Curves charts use the attributes already discussed. However, curve charts require a large amount of processing to render. For fastest performance, create them offline, write them to a file or variable, and then reference them in your application pages. For information on creating offline charts, see Writing a chart to a variable.