CFML Reference
|
|
ColdFusion Tags
|
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"
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>
See also
cfchartdata,
cfchartseries
History
New in ColdFusion MX: This tag is new.
Attributes
Attribute |
Req/Opt |
Default |
Description |
format
|
|
flash
|
File format in which to save graph.
|
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
|
|
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
|
|
fontItalic
|
|
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
|
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.
Comments