Description

Generates and displays a chart.

Category

Data output tags, Extensibility tags

Syntax

<!--- This syntax uses an XML file or string to specify the chart style. --->
<cfchart
    style = "XML string|XML filename"> 
</cfchart>

OR

<!--- This syntax uses the attributes of the cfchart tag to specify the chart style. --->
<cfchart 
    backgroundColor = "hexadecimal value|web color" 
    chartHeight = "integer number of pixels" 
    chartWidth = "integer number of pixels" 
    dataBackgroundColor = "hexadecimal value|web color" 
    font = "font name" 
    fontBold = "yes|no" 
    fontItalic = "yes|no" 
    fontSize = "font size" 
    foregroundColor = "hexadecimal value|web color" 
    format = "flash|jpg|png" 
    gridlines = "integer number of lines" 
    labelFormat = "number|currency|percent|date" 
    markerSize = "integer number of pixels" 
    name = "string"
    pieSliceStyle = "solid|sliced" 
    scaleFrom = "integer minimum value" 
    scaleTo = "integer maximum value" 
    seriesPlacement = "default|cluster| stacked|percent" 
    show3D = "yes|no" 
    showBorder = "yes|no" 
    showLegend = "yes|no" 
    showMarkers = "yes|no" 
    showXGridlines = "yes|no" 
    showYGridlines = "yes|no" 
    sortXAxis = "yes|no" 
    tipBGColor = "hexadecimal value|web color" 
    tipStyle = "MouseDown|MouseOver|none"
    title = "title of chart"
    url = "onClick destination page" 
    xAxisTitle = "title text" 
    xAxisType = "scale|category"
    xOffset = "number between -1 and 1" 
    yAxisTitle = "title text" 
    yAxisType = "scale|category"
    yOffset = "number between -1 and 1">
</cfchart>

See also

cfchartdata, cfchartseries, cfdocument, "Controlling chart appearance" in the ColdFusion Developer's Guide

History

ColdFusion 8:

• Added support for embedding Flash charts within the cfdocument tag.
• Added the new attribute showColumnLegend to the chart style files, which are the XML files located in the charting\styles directory- This attribute displays an entry for each point and is applicable only to charts that contain a single series. By default, the value of showColumnLegend is set to true. To turn off this feature, you can either modify the setting in all the chart style files, or use a custom style file.

ColdFusion MX 7.01: Changed documentation to state that the fontSize attribute can accept a number that is not an integer.

ColdFusion MX 7:

• Added style and title attributes.
• Added support for eight-digit hexadecimal values to specify RGB color and transparency.
• Removed the rotated attribute.

ColdFusion MX 6.1:

• Added the xAxisType and yAxisType attributes.
• Changed interpolation behavior: the tag now interpolates data points on line charts with multiple series.

ColdFusion MX: Added this tag.

Attributes

Usage

The cfchart tag defines a container in which a graph displays: its height, width, background color, labels, and so on. The cfchartseries tag defines the chart style in which data displays: bar, line, pie, and so on. The cfchartdata tag defines a data point.

Data is passed to the cfchartseries tag in the following ways:

• As a query
• As data points, using the cfchartdata tag

For the font attribute value ArialUnicodeMS, the following rules apply:

• In Windows, to permit Flash charts (type = "flash") to render a double-byte character set, you must select this value.
• In UNIX, for all type values, to render a double-byte character set, you must select this value.
• If this value is selected, the fontBold and fontItalic attributes have no effect.

The following table lists W3C HTML 4 named color value or hexadecimal values that the color attribute accepts:

For all other color values, you must enter the hexadecimal value. You can enter a six-digit value, which specifies the RGB value, or an eight-digit value, which specifies the RGB value and the transparency. The first two digits of an eight-digit hexadecimal value specify the degree of transparency, with FF indicating opaque and 00 indicating transparent. Values between 00 and FF are allowed.

For more color names that are supported by popular browsers, go to www.w3.org/TR/css3-color

You can specify whether charts are cached in memory, the number of charts to cache, and the number of chart requests that ColdFusion can process concurrently. To set these options in the ColdFusion Administrator, select Server Settings > Charting.

ColdFusion 8 lets you embed Flash charts in a PDF document using the cfdocument tag, for example:

<cfdocument format="pdf">
...
<!--- Flash chart embedded here. --->
    <cfchart format="flash" xaxistitle="Department" yaxistitie="Salary Average">
        <cfchartseries type="bar" query="DataTable" itemcolumn="Dept_Name"
            valuecolumn="avgSal">
            <cfchardata item="Facilities" value="35000">
        </cfchartseries>
    </cfchart>
</cfdocument>

Example

<!---The following example analyzes the salary data in the cfdocexamples database and
    generates a bar chart showing average salary by department. The body of the 
    cfchartseries tag includes one cfchartdata tag to include data that is not available 
    from the query. --->

<!--- Get the raw data from the database. --->
<cfquery name="GetSalaries" datasource="cfdocexamples">
    SELECT Departmt.Dept_Name, 
        Employee.Dept_ID, 
        Employee.Salary
    FROM Departmt, Employee
    WHERE Departmt.Dept_ID = Employee.Dept_ID
</cfquery>

<!--- Use a query of queries to generate a new query with --->
<!--- statistical data for each department. --->
<!--- AVG and SUM calculate statistics. --->
<!--- GROUP BY generates results for each department. --->
<cfquery dbtype = "query" name = "DataTable">
    SELECT Dept_Name,
    AVG(Salary) AS avgSal,
    SUM(Salary) AS sumSal
    FROM GetSalaries
    GROUP BY Dept_Name
</cfquery>

<!--- Reformat the generated numbers to show only thousands. --->
<cfloop index = "i" from = "1" to = "#DataTable.RecordCount#">
    <cfset DataTable.sumSal[i] = Round(DataTable.sumSal[i]/1000)*1000>
    <cfset DataTable.avgSal[i] = Round(DataTable.avgSal[i]/1000)*1000>
</cfloop>

<h1>Employee Salary Analysis</h1> 
<!--- Bar graph, from Query of Queries --->
<cfchart format="flash" 
    xaxistitle="Department" 
    yaxistitle="Salary Average"> 

<cfchartseries type="bar" 
    query="DataTable" 
    itemcolumn="Dept_Name" 
    valuecolumn="avgSal">

<cfchartdata item="Facilities" value="35000">

</cfchartseries>
</cfchart>