Developing ColdFusion MX Applications with CFML
Charting and Graphing Data

Creating a chart

The ability to display data in a chart or graph can make data interpretation much easier. Rather than present a simple table of numeric data, you can display a bar, pie, line, or other applicable type of chart using colors, captions, and a two-dimensional or three-dimensional representation of your data.

The cfchart tag, along with the tags cfchartseries and cfchartdata, provide many different chart types. The attributes to these tags let you customize your chart appearance.

Chart types

You can create 11 types of charts in ColdFusion in two and three dimensions. The following figure shows a sample of each type of chart in two dimensions.

Note:   Horizontal bar charts are bar charts rotated 90 degrees. In two dimensions, bar and cylinder charts appear the same, as do cone and pyramid charts.

Creating a basic chart

To create a chart, you use the cfchart tag along with at least one cfchartseries tag. You can optionally include one or more cfchartdata tags within a cfchartseries tag. The following table describes these tags:

Tag	Description
cfchart	Specifies the container in which the chart appears. This container defines the height, width, background color, labels, fonts, and other characteristics of the chart. You must include at least one cfchartseries tag within the cfchart tag.
cfchartseries	Specifies a database query that supplies the data to the chart and/or one or more cfchartdata tags specifying individual data points. Specifies the chart type, colors for the chart, and other optional attributes.
cfchartdata	Optionally specifies individual data point to the cfchartseries tag.

The following shows the basic code you use to create a chart:

<cfchart

  <!--- optional attributes to cfchart --->
  >

  <!--- one or more cfchartseries tags --->
  <cfchartseries
    type="type"
    <!--- optional attributes to cfchartseries --->
    />

  <cfchartseries
    type="type"
    <!--- optional attributes to cfchartseries --->
    >
      <!--- zero or more cfchartdata tags --->
      <cfchartdata
        value="number"
        <!--- optional attributes to cfchartdata --->
        >
  </cfchartseries>

</chart>

Often, you use these tags to chart the data stored in a ColdFusion query. If you have a query that contains average salary information by department, the following code displays a bar chart that shows the data in the query:

<cfchart

    xAxisTitle="Department"
    yAxisTitle="Salary Average"
  >
  <cfchartseries 
    type="bar" 
    query="DataTable" 
    valueColumn="AvgByDept" 
    itemColumn="Dept_Name"
    />
</cfchart>

In this example, the data from the query column AvgByDept supplies the data for the y-axis, and the query column Dept_Name provides the data for the x-axis.

The resulting chart looks like the following:

Copyright © 2002, Macromedia Inc. All rights reserved.

Comments