CFCHART  
Description
Generates and displays a chart.
 
Category
Data output tags, Extensibility tags
 
Syntax
<cfchart 
   format = "flash, jpg, png" 
   chartHeight = "integer number of pixels" 
   chartWidth = "integer number of pixels" 
   scaleFrom = "integer minimum value" 
   scaleTo = "integer maximum value" 
   showXGridlines = "yes" or "no" 
   showYGridlines = "yes" or "no" 
   gridlines = "integer number of lines" 
   seriesPlacement = "default, cluster, stacked, percent" 
   foregroundColor = "Hex value or Web color" 
   dataBackgroundColor = "Hex value or Web color" 
   showBorder = "yes" or "no" 
   font = "font name" 
   fontSize = "integer font size" 
   fontBold = "yes" or "no" 
   fontItalic = "yes" or "no" 
   labelFormat = "number, currency, percent, date" 
   xAxisTitle = "title text" 
   yAxisTitle = "title text" 
   xAxisType = "scale or category"
   yAxisType = "scale or category"
   sortXAxis = "yes/no" 
   show3D = "yes" or "no" 
   xOffset = "number between -1 and 1" 
   yOffset = "number between -1 and 1" 
   rotated = "yes/no" 
   showLegend = "yes/no" 
   tipStyle = "MouseDown, MouseOver, none"
   tipBGColor = "hex value or web color" 
   showMarkers = "yes" or "no" 
   markerSize = "integer number of pixels" 
   pieSliceStyle = "solid, sliced" 
   url = "onClick destination page" 
   name = "String"
   </cfchart>
 
See also
cfchartdata, cfchartseries
 
History
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.
 
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 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:
  • On Windows: to permit Flash charts (type = "flash") to render double-byte character set, you must select this value
  • On UNIX: for all type values, to render a double-byte character set, you must select this value.
  • If this value is selected, the fontbold andfontitalic attributes have no effect

The color attributes accept the following W3C HTML 4 named color value or hex values:

Color name RGB value 

Black

#000000

Green

##008000

Silver

##C0C0C0

Lime

##00FF00

Gray

##808080

Olive

##808000

White

##FFFFFF

Yellow

##FFFF00

Maroon

##800000

Navy

##000080

Red

##FF0000

Blue

##0000FF

Purple

##800080

Teal

##008080

Fuchsia

##FF00FF

Aqua

##00FFFF

For all other color values, you must enter the hex value.

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

Flash does not conform fully to UNIX X11 naming conventions.

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.

FORMAT  
   
 
Default value: "flash"

File format in which to save graph.

  • flash
  • jpg
  • png
CHARTHEIGHT  
   
 
Default value: "240"

Chart height; integer number of pixels

CHARTWIDTH  
   
 
Default value: "320"

Chart width; integer number of pixels

SCALEFROM  
   
 
Default value: "Determined by data"

Y-axis minimum value; integer.

SCALETO  
   
 
Default value: "Determined by data"

Y-axis maximum value; integer

SHOWXGRIDLINES  
   
 
Default value: "no"
  • yes: display X-axis gridlines
  • no: hide X-axis gridlines
SHOWYGRIDLINES  
   
 
Default value: "yes"
  • yes: display Y-axis gridlines
  • no: hide Y-axis gridlines
GRIDLINES  
   
 
Default value: "10, including top and bottom"

Number of grid lines to display on value axis, including axis; positive integer.

SERIESPLACEMENT  
   
 
Default value: "default "

Applies to charts that have more than one data series. Relative positions of series.

  • default: ColdFusion determines relative positions, based on graph types
  • cluster
  • stacked
  • percent
FOREGROUNDCOLOR  
   
 
Default value: "black"

Color of text, gridlines, and labels.

Hex value or supported named color; see name list in the Usage section.

For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.

DATABACKGROUNDCOLOR  
   
 
Default value: "white"

Color of area around chart data.

Hex value or supported named color; see name list in the Usage section.

For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.

SHOWBORDER  
   
 
Default value: "no"
  • yes
  • no
FONT  
   
 
Default value: "arial "

Name of text font

  • arial
  • times
  • courier
  • arialunicodeMS. This option is required, if you are using a double-byte character set on UNIX, or using a double-byte character set on Windows with a file type of Flash.
FONTSIZE  
   
 
Default value: "11"

Font size; integer

FONTBOLD  
   
 
Default value: "no"
  • yes
  • no
FONTITALIC  
   
 
Default value: "no"
  • Yes
  • No
LABELFORMAT  
   
 
Default value: "number"

Format for Y-axis labels.

  • number
  • currency
  • percent
  • date
XAXISTITLE  
   
 

text; X-axis title

YAXISTITLE  
   
 

text; Y-axis title

XAXISTYPE  
   
 
Default value: "category"
  • category The axis indicates the data category. Data is sorted according to the sortXAxis attribute.
  • scale The axis is numeric. All cfchartdata item attribute values must numeric. The X axis is automatically sorted numerically.
YAXISTYPE  
   
 
Default value: "category"

Currently has no effect, as Y axis is always used for data values. Valid values are category and scale

SORTXAXIS  
   
 
Default value: " no"
  • yes: display column labels in alphabetic order along X-axis
  • no

Ignored if xAxisType attribute is scale.

SHOW3D  
   
 
Default value: "no"
  • yes: display chart with three-dimensional appearance
  • no
XOFFSET  
   
 
Default value: "0.1"

Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally.

  • A number in the range -1 - 1, where "-1" specifies 90 degrees left and "1" specifies 90 degrees right
YOFFSET  
   
 
Default value: "0.1 "

Applies if show3D="yes". Number of units by which to display the chart as angled, vertically.

  • A number in the range -1 - 1, where "-1" specifies 90 degrees down, and "1" specifies 90 degrees up
ROTATED  
   
 
Default value: "no"
  • yes: rotate chart 90 degrees. For a horizontal bar chart, use this option.
  • no
SHOWLEGEND  
   
 
Default value: "yes"
  • yes: if chart contains more than one data series, display legend
  • no
TIPSTYLE  
   
 
Default value: "mouseOver"

Determines the action that opens a popup window to display information about the current chart element.

  • mouseDown: displays if the user positions the cursor at the element and clicks the mouse down. Applies only to Flash format graph file. (For other formats, this option functions the same as mouseOver.)
  • mouseOver: displays if the user positions the cursor at the element
  • none: suppresses display
TIPBGCOLOR  
   
 
Default value: "white"

Applies only to Flash format graph file.

Hex value or supported named color; see name list in the Usage section.

For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.

SHOWMARKERS  
   
 
Default value: "yes "

Applies to chartseries type attribute values line, curve and scatter.

  • yes: display markers at data points
  • no
MARKERSIZE  
   
 
Default value: "(Automatic)"

Size of data point marker. in pixels. Integer.

PIESLICESTYLE  
   
 
Default value: "sliced"

Applies to chartseries type attribute value pie.

  • solid: displays pie as if unsliced
  • sliced: displays pie as if sliced
URL  
   
 

URL to open if the user clicks item in a data series; the onClick destination page.

You can specify variables within the URL string; ColdFusion passes current values of the variables.

  • $VALUE$: value of selected row. If none, value is empty string.
  • $ITEMLABEL$: label of selected item. If none, value is empty string.
  • $SERIESLABEL$: label of selected series. If none, value is empty string.

For example:

"somepage.cfm?item=$ITEMLABEL$&series=$
SERIESLABEL$&value=$VALUE$"
  • "javascript:...": executes a client-side script
NAME  
   
 

Page variable name. String. Generates the the graph as binary data and assigns it to the specified variable. Suppresses chart display. You can use the name value in the cffile tag to write the chart to a file.