cfchart

Description

Generates and displays a chart.

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" 
  borderBackgroundColor = "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" 
  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, Off" 
  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>

History

New in ColdFusion MX: This tag is new.

Attributes

Attribute Req/Opt Default Description

format

flash
File format in which to save graph.

flash

jpg

png

chartHeight

240
Chart height; integer number of pixels

chartWidth

320
Chart width; integer number of pixels

scaleFrom

Determined by data
Y-axis minimum value; integer.

scaleTo

Determined by data
Y-axis maximum value; integer

showXGridlines

no

yes: display X-axis gridlines

no: hide X-axis gridlines

showYGridlines

yes

yes: display Y-axis gridlines

no: hide Y-axis gridlines

gridlines

3 (top, bottom, and zero)
Number of grid lines to display on value axis, including axis; positive integer.
0: hide gridlines

seriesPlacement

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

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

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.

borderBackgroundColor

white
Color of area between data background and border, around labels and around legend.
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

no

yes

no

font

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

11
Font size; integer

fontBold

no

yes

no

fontItalic

no

Yes

No

labelFormat

number
Format for Y-axis labels.

number

currency

percent

date

xAxisTitle

text; X-axis title

yAxisTitle

text; Y-axis title

sortXAxis

no

yes: display column labels in alphabetic order along X-axis

no

show3D

no

yes: display chart with three-dimensional appearance

no

xOffset

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

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

no

yes: rotate chart 90 degrees. For a horizontal bar chart, use this option.

no

showLegend

yes

yes: if chart contains more than one data series, display legend

no

tipStyle

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

off: suppresses display

tipbgcolor

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

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

yes: display markers at data points

no

markerSize

(Automatic)
Size of data point marker. in pixels. Integer.

pieSliceStyle

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. Outputs ISO-8859-1 encoded binary graph data and sets it as a variable in the page. Suppresses chart display. Used primarily by Flash Gateway users.

Attribute	Default	Description
format	flash	File format in which to save graph. flash jpg png
chartHeight	240	Chart height; integer number of pixels
chartWidth	320	Chart width; integer number of pixels
scaleFrom	Determined by data	Y-axis minimum value; integer.
scaleTo	Determined by data	Y-axis maximum value; integer
showXGridlines	no	yes: display X-axis gridlines no: hide X-axis gridlines
showYGridlines	yes	yes: display Y-axis gridlines no: hide Y-axis gridlines
gridlines	3 (top, bottom, and zero)	Number of grid lines to display on value axis, including axis; positive integer. 0: hide gridlines
seriesPlacement	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	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	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.
borderBackgroundColor	white	Color of area between data background and border, around labels and around legend. 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	no	yes no
font	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	11	Font size; integer
fontBold	no	yes no
fontItalic	no	Yes No
labelFormat	number	Format for Y-axis labels. number currency percent date
xAxisTitle		text; X-axis title
yAxisTitle		text; Y-axis title
sortXAxis	no	yes: display column labels in alphabetic order along X-axis no
show3D	no	yes: display chart with three-dimensional appearance no
xOffset	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	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	no	yes: rotate chart 90 degrees. For a horizontal bar chart, use this option. no
showLegend	yes	yes: if chart contains more than one data series, display legend no
tipStyle	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 off: suppresses display
tipbgcolor	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	yes	Applies to `chartseries` `type` attribute values `line`, `curve` and `scatter`. yes: display markers at data points no
markerSize	(Automatic)	Size of data point marker. in pixels. Integer.
pieSliceStyle	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. Outputs ISO-8859-1 encoded binary graph data and sets it as a variable in the page. Suppresses chart display. Used primarily by Flash Gateway users.

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

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:

http://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.

cfchart

Description

Category

Syntax

See also

History

Attributes

Usage

Comments

CFML Reference
ColdFusion Tags