ColdFusion MX 7 -- Creating a basic chart -- Version 7

Creating a chart with ColdFusion tags

To create a chart with ColdFusion tags, 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 one or more `cfchartdata` tags that specify individual data points. Specifies the chart type, colors for the chart, and other optional attributes.
`cfchartdata`	Optionally specifies an individual data point to the `cfchartseries` tag.

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 one or more cfchartdata tags that specify individual data points. Specifies the chart type, colors for the chart, and other optional attributes.

cfchartdata

Optionally specifies an individual data point to the cfchartseries tag.

The following example shows an outline of the basic code that you use to create a chart:

<cfchart> <cfchartseries type="type"> <cfchartdata item="something" value="number"> </cfchartseries> </chart>

The following example displays a simple pie chart that illustrates four values:

The following figure shows the resulting chart:

Pie chart resulting from preceding code example

Creating a chart with the Report Builder wizard

The ColdFusion Report Builder includes a wizard that lets you create charts easily. The wizard lets you specify all of the chart characteristics that you can specify using the cfchart, cfchartseries, and cfchartdata tags. For information about using the Report Builder chart wizard, see Creating Reports for Printing.

Comments

No screen name said on Jul 28, 2005 at 10:14 AM :

The actual pie chart from the sample code above shows the value labels on the outside perimeter of the pie chart instead of on top of the pie slices as depicted. Why am I seeing something different? Is there any way to control this behavior?

Source used:
<cfchart>
<cfchartseries type="pie">
<cfchartdata item="New car sales" value="50000">
<cfchartdata item="Used car sales" value="25000">
<cfchartdata item="Leasing" value="30000">
<cfchartdata item="Service" value="40000">
</cfchartseries>
</cfchart>

No screen name said on Jul 28, 2005 at 12:13 PM :

Regarding the comment above, I was able to place data labels on pie slices by changing default_pie.xml as follows:

<dataLabels style="Value" placement="Inside"/>

Telix said on Feb 21, 2006 at 4:33 AM :

Typo

<cfchart>
<cfchartseries type="type">
<cfchartdata item="something" value="number">
</cfchartseries>
</chart>

incorrect tag </chart>; should be </cfchart>