Generates and displays a chart.

Data Output Tags Extensibility Tags

cfchartdata cfchartseries cfdocument

ColdFusion 8: Added the new attribute showLegend 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 showLegend 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.

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

Note: You can specify this tag’s attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute names as structure keys.

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, select this value.
In UNIX, for all type values, to render a double-byte character set, 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:
Color name
RGB value
Aqua
##00FFFF
Black
#000000
Blue
##0000FF
Fuchsia
##FF00FF
Gray
##808080
Green
##008000
Lime
##00FF00
Maroon
##800000
Navy
##000080
Olive
##808000
Purple
##800080
Red
##FF0000
Silver
##C0C0C0
Teal
##008080
White
##FFFFFF
Yellow
##FFFF00

For all other color values, 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.

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