cfchart

Generates and displays a chart.

 <cfchart>

 cfchart();

cfchart Attribute Reference

format
Default: NO

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

chartheight
Default: 240

Chart height; integer number of pixels

chartwidth
Default: 320

Chart width; integer number of pixels

scalefrom

Y-axis minimum value; integer

scaleto

Y-axis max value; integer

showxgridlines
Default: NO

yes: display X-axis gridlines

showygridlines
Default: YES

yes: display Y-axis gridlines

gridlines
Default: 10

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

seriesplacement
Default: default

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

foregroundcolor
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

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
Default: NO

Whether to display a border around the chart

databackgroundcolor
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
Default: arial

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

fontsize

Size of text in column.

fontitalic
Default: NO

Yes: displays grid control text in italics

fontbold
Default: NO

Yes: displays grid control text in bold

labelformat
Default: number

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

xaxistitle

text; X-axis title

yaxistitle

text; X-axis title

xaxistype
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
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
Default: NO

Display column labels in alphabetic order along X-axis.
Ignored if the xAxisType attribute is scale.

show3d
Default: YES

Display chart with three-dimensional appearance.

xoffset
Default: 0.1

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

yoffset
Default: 0.1

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

showlegend
Default: YES

CF 8+ if chart contains more than one data series, display legend

tipstyle
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
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
Default: YES

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

markersize

Size of data point marker. in pixels. Integer.

pieslicestyle
Default: sliced

Applies to chartseries type attribute value pie. Values:
  • solid
  • 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$: 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

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

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

title

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