User Guide Cancel

Creating charts: examples

Search
ColdFusion

ColdFusion

Open app
  1. ColdFusion Developers Guide
  2. Develop ColdFusion applications
    1. Introducing ColdFusion
      1. Introducing ColdFusion
      2. About ColdFusion
      3. About Internet applications and web application servers
      4. About JEE and the ColdFusion architecture
    2. Changes in ColdFusion
      1. Changes in ColdFusion
      2. Replacement of JRun with Tomcat
      3. Security enhancements
      4. ColdFusion WebSocket
      5. Enhanced Java integration
      6. ColdFusion ORM search for indexing and search
      7. Solr enhancements
      8. Scheduler enhancements
      9. Integration with Microsoft Exchange Server 2010
      10. RESTful Web Services in ColdFusion
      11. Lazy loading across client and server in ColdFusion
      12. Web service enhancements
      13. Displaying geolocation
      14. Client-side charting
      15. Caching enhancements
      16. Server update using ColdFusion Administrator
      17. Secure Profile for ColdFusion Administrator
    3. Introduction to application development
      1. Introduction to application development using ColdFusion
      2. Using the Developing ColdFusion Applications guide
      3. About Adobe ColdFusion documentation for Developers
    4. The CFML programming language
      1. The CFML programming language
      2. Elements of CFML
      3. ColdFusion variables
      4. Expressions and number signs
      5. Arrays and structures
      6. Extend ColdFusion pages with CFML scripting
      7. Regular expressions in functions
      8. ColdFusion language enhancements
      9. Built-in functions as first class citizen
      10. Data types- Developing guide
    5. Building blocks of ColdFusion applications
      1. Building blocks of ColdFusion applications
      2. Create ColdFusion elements
      3. Write and call user-defined functions
      4. Build and use ColdFusion Components
      5. Create and use custom CFML tags
      6. Build custom CFXAPI tags
      7. Use the member functions
      8. Object Oriented Programming in ColdFusion
    6. Develop CFML applications
      1. Develop CFML applications
      2. Design and optimize a ColdFusion application
      3. Handle errors
      4. Use persistent data and locking
      5. Use ColdFusion threads
      6. Secure applications
      7. Client-side CFML (for mobile development)
      8. Use the ColdFusion debugger
      9. Debugging and Troubleshooting Applications
      10. Develop globalized applications
      11. REST enhancements in ColdFusion
      12. Authentication through OAuth
      13. Social enhancements
    7. Develop mobile applications
      1. Mobile application development
      2. Build mobile applications
      3. Debug mobile applications
      4. Inspect mobile applications
      5. Package mobile applications
      6. Troubleshoot mobile applications
      7. Device detection
      8. Client-side CFML
      9. Mobile Templates
      10. Code samples to build a mobile application
    8. Access and use data
      1. Access and use data
      2. Introduction to Databases and SQL
      3. Access and retrieve data
      4. Update database
      5. Use Query of Queries
      6. Manage LDAP directories
      7. Solr search support
    9. ColdFusion ORM
      1. ColdFusion ORM
      2. Introducing ColdFusion ORM
      3. ORM architecture
      4. Configure ORM
      5. Define ORM mapping
      6. Work with objects
      7. ORM session management
      8. Transaction and concurrency
      9. Use HQL queries
      10. Autogenerate database schema
      11. Support for multiple data sources for ORM
      12. ColdFusion ORM search
    10. ColdFusion and HTML5
      1. ColdFusion and HTML 5
      2. Use ColdFusion Web Sockets
      3. Media Player enhancements
      4. Client-side charting
      5. Display geolocation data
    11. Flex and AIR integration in ColdFusion
      1. Flex and AIR integration in ColdFusion
      2. Use the Flash Remoting Service
      3. Use Flash Remoting Update
      4. Offline AIR application support
      5. Proxy ActionScript classes for ColdFusion services
      6. Use LiveCycle Data Services ES assembler
      7. Use server-side ActionScript
    12. Request and present information
      1. Request and present information
      2. Retrieve and format data
      3. Build dynamic forms with cfform tags
      4. Validate data
      5. Create forms in Flash
      6. Create skinnable XML forms
      7. Use Ajax data and development features
      8. Use Ajax User Interface components and features
    13. Office file interoperability
      1. Office file interoperability
      2. Using cfdocument
      3. Using cfpresentation
      4. Using cfspreadsheet
      5. Supported Office conversion formats
      6. SharePoint integration
    14. ColdFusion portlets
      1. ColdFusion portlets
      2. Run a ColdFusion portlet on a JBoss portal server
      3. Run a ColdFusion portlet on a WebSphere portal server
      4. Common methods used in portlet.cfc
      5. ColdFusion portlet components
      6. Support for JSR-286
    15. Work with documents, charts, and reports
      1. Work with documents, charts, and reports
      2. Manipulate PDF forms in ColdFusion
      3. Assemble PDF documents
      4. Create and manipulate ColdFusion images
      5. Create charts and graphs
        1. About charts
        2. Creating a basic chart
        3. Charting data
        4. Controlling chart appearance
        5. Creating charts: examples
        6. Administering charts
        7. Writing a chart to a variable
        8. Linking charts to URLs
        9. Charting enhancements
      6. Create reports and documents for printing
      7. Create reports with Report Builder
        1. About Report Builder
        2. Common reporting tasks and techniques
        3. Creating a simple report
        4. Getting started
      8. Create slide presentations
    16. Use web elements and external objects
      1. Use web elements and external objects
      2. Use XML and WDDX
      3. Use web services
      4. Use ColdFusion web services
      5. Integrate JEE and Java elements in CFML applications
      6. Use Microsoft .NET assemblies
      7. Integrate COM and CORBA objects in CFML applications
    17. Use external resources
      1. Send and receive e-mail
      2. Interact with Microsoft Exchange servers
      3. Interact with remote servers
      4. Manage files on the server
      5. Use event gateways
      6. Create custom event gateways
      7. Use the ColdFusion extensions for Eclipse
      8. Use the data services messaging event gateway
      9. Use the data management event gateway
      10. Use the FMS event gateway
      11. Use the instant messaging event gateways
      12. Use the SMS event gateway


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.

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

Code

Description

 

SUM(Salary) AS SumByDept,

 

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

 

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

 

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

 

tipStyle="mousedown"
font="Times"
fontsize=14
fontBold="yes"
backgroundColor = "##CCFFFF"
show3D="yes"
>

 

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

 

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.

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:

Code

Description

 

Employee.StartDate,

 

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

 

<cfset GetSalaries.StartDate[i]=NumberFormat(DatePart("yyyy", GetSalaries.StartDate[i]) ,9999)>
</cfloop>

 

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

 

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.

 

<cfset HireSalaries.AvgByStart[i]=Round(HireSalaries.AvgByStart[i]/1000)*1000>
</cfloop>

 

Round the salaries to the nearest thousand.

 

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

 

Create an area chart using the HireSalaries query. Chart the average salaries against the start date.Limit the chart width to 400 pixels, show the chart in three dimensions, and set the background color to white.

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.

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy