cfchart

Generates and displays a chart.

  <cfchart>

 cfchart();

  1. CFDocs
  2. Tags
  3. ColdFusion 6 New Functions and Tags
  4. cfchart
  5. CF6+
  6. Lucee
  7. 0 Issue
  8. Edit
See Also:   cfchartseries   cfchartdata

Attribute Reference

format string
Default: html

File format in which to save graph.
format=flash has been deprecated in CF 2016+
For Lucee the default value is png and the format html is not supported.
Values:
  • html
  • flash
  • jpg
  • png

chartheight numeric
Default: 240

Chart height; integer number of pixels

chartwidth numeric
Default: 320

Chart width; integer number of pixels

scalefrom numeric

Y-axis minimum value; integer

scaleto numeric

Y-axis max value; integer

showxgridlines boolean
Default: false

yes: display X-axis gridlines
Values:
  • true
  • false

showygridlines boolean
Default: true

yes: display Y-axis gridlines
Values:
  • true
  • false

gridlines numeric
Default: 10

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

seriesplacement string
Default: default

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

foregroundcolor string
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 string

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 boolean
Default: false

Whether to display a border around the chart
Values:
  • true
  • false

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

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

fontsize numeric

Size of text in column.

fontitalic boolean
Default: false

Yes: displays grid control text in italics
Values:
  • true
  • false

fontbold boolean
Default: false

Yes: displays grid control text in bold
Values:
  • true
  • false

labelformat string
Default: number

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

xaxistitle string

text; X-axis title

yaxistitle string

text; X-axis title

xaxistype string
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 string
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 boolean
Default: false

Display column labels in alphabetic order along X-axis.
Ignored if the xAxisType attribute is scale.
Values:
  • true
  • false

show3d boolean
Default: true

Display chart with three-dimensional appearance.
Values:
  • true
  • false

xoffset numeric
Default: 0.1

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

yoffset numeric
Default: 0.1

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

showlegend boolean
Default: true

CF 8+ if chart contains more than one data series, display legend
Values:
  • true
  • false

tipstyle string
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 string
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 boolean
Default: true

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

markersize numeric

Size of data point marker. in pixels. Integer.

pieslicestyle string
Default: sliced

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

URL string

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 string

Page variable name. String. Generates 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 string

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

title string

CF 7+ Title of the chart.

base64 boolean
Default: false

CF 2018+ Can only be used for client side charts.
Values:
  • true
  • false

Examples
Sample code using the cfchart tag

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>

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)#");
	}
}

Signup for cfbreak to stay updated on the latest news from the ColdFusion / CFML community. One email, every friday.

Fork me on GitHub