cfchart

Generates and displays a chart.

 <cfchart>

 cfchart();

Attribute Reference for the cfchart tag

format

Required: No
Default: NO
File format in which to save graph. format=flash has been deprecated in CF 2016+ Values:
  • flash
  • jpg
  • png

chartheight

Required: No
Default: 240
Chart height; integer number of pixels

chartwidth

Required: No
Default: 320
Chart width; integer number of pixels

scalefrom

Required: No
Y-axis minimum value; integer

scaleto

Required: No
Y-axis max value; integer

showxgridlines

Required: No
Default: NO
yes: display X-axis gridlines

showygridlines

Required: No
Default: YES
yes: display Y-axis gridlines

gridlines

Required: No
Default: 10
Number of grid lines to display on value axis, including
axis; positive integer.

seriesplacement

Required: No
Default: default
Applies to charts that have more than one data series.
Relative positions of series. Values:
  • default
  • cluster
  • stacked
  • percent

foregroundcolor

Required: No
Default: black
color for control. For a hex value, use the form:
textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash
signs or none. Values:
  • black
  • red
  • blue
  • magenta
  • cyan
  • orange
  • darkgray
  • pink
  • white
  • lightgray
  • yellow

backgroundcolor

Required: No
Color of the area between the data background and the chart
border, around labels and around the legend. Hexadecimal
value or supported named color. For a hex value, use the form:
textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash
signs or none. Values:
  • black
  • red
  • blue
  • magenta
  • cyan
  • orange
  • darkgray
  • pink
  • white
  • lightgray
  • yellow

showborder

Required: No
Default: NO
Whether to display a border around the chart

databackgroundcolor

Required: No
Default: white
color for control. For a hex value, use the form:
textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash
signs or none. Values:
  • black
  • red
  • blue
  • magenta
  • cyan
  • orange
  • darkgray
  • pink
  • white
  • lightgray
  • yellow

font

Required: No
Default: arial
Font of data in column. Values:
  • arial
  • times
  • courier
  • arialunicodeMS

fontsize

Required: No
Size of text in column.

fontitalic

Required: No
Default: NO
Yes: displays grid control text in italics

fontbold

Required: No
Default: NO
Yes: displays grid control text in bold

labelformat

Required: No
Default: number
Format for Y-axis labels. Values:
  • number
  • currency
  • percent
  • date

xaxistitle

Required: No
text; X-axis title

yaxistitle

Required: No
text; X-axis title

xaxistype

Required: No
Default: category
CF 6.1+ 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. Values:
  • category
  • scale

yaxistype

Required: No
Default: category
CF 6.1+ Currently has no effect, as Y axis is always used for data
values. Valid values are category and scale Values:
  • category
  • scale

sortxaxis

Required: No
Default: NO
Display column labels in alphabetic order along X-axis.
Ignored if the xAxisType attribute is scale.

show3d

Required: No
Default: YES
Display chart with three-dimensional appearance.

xoffset

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

yoffset

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

showlegend

Required: No
Default: YES
CF 8+ if chart contains more than one data series, display legend

tipstyle

Required: No
Default: mouseOver
Determines the action that opens a popup window to display
information about the current chart element.
* mouseDown: display if the user positions the cursor at the element
and clicks the mouse. Applies only to Flash format graph files.
* mouseOver: displays if the user positions the cursor at the element
* none: suppresses display Values:
  • mouseDown
  • mouseOver
  • none

tipbgcolor

Required: No
Default: white
color for control. For a hex value, use the form:
textColor = "##xxxxxx", where x = 0-9 or A-F; use two hash
signs or none. Values:
  • black
  • red
  • blue
  • magenta
  • cyan
  • orange
  • darkgray
  • pink
  • white
  • lightgray
  • yellow

showmarkers

Required: No
Default: YES
Applies to chartseries type attribute values line, curve
and scatter.
yes: display markers at data points

markersize

Required: No
Size of data point marker. in pixels. Integer.

pieslicestyle

Required: No
Default: sliced
Applies to chartseries type attribute value pie. Values:
  • solid
  • sliced

URL

Required: No
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$: the value of the selected row. If none, the value is an empty string.
* $ITEMLABEL$: the label of the selected item. If none, the value is an empty string.
* $SERIESLABEL$: the label of the selected series. If none, the value is an empty string. Values:
  • $VALUE$
  • $ITEMLABEL$
  • $SERIESLABEL$

name

Required: No
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.

style

Required: No
CF 7+ XML file or string to use to specify the style of the chart. Values:
  • beige
  • blue
  • default
  • red
  • silver
  • yellow

title

Required: No
CF 7+ Title of the chart.

Examples sample code using the cfchart tag


CFML Markup

A Simple PIE chart with hard coded data.

<cfchart format="html" title="Sales Report">
	<cfchartseries type="pie">
		<cfchartdata item="2012" value="#RandRange(300000,900000)#">
		<cfchartdata item="2013" value="#RandRange(300000,900000)#">
		<cfchartdata item="2014" value="#RandRange(300000,900000)#">
		<cfchartdata item="2015" value="#RandRange(300000,900000)#">
	</cfchartseries>
</cfchart>

Script Syntax (CF11+)

cfchart(format = "html", title = "Sales Report") {
	cfchartseries(type = "pie") {
		cfchartdata(item = "2012", value = "#RandRange(300000, 900000)#");
		cfchartdata(item = "2013", value = "#RandRange(300000, 900000)#");
		cfchartdata(item = "2014", value = "#RandRange(300000, 900000)#");
		cfchartdata(item = "2015", value = "#RandRange(300000, 900000)#");
	}
}

Fork me on GitHub