<cfchart>

Generates and displays a chart.

https://github.com/lucee/extension-chart

This tag may have a body.

This tag is also supported within <cfscript>

Requires Extension: Chart Extension

<cfchart backgroundcolor=string chartheight=number chartwidth=number databackgroundcolor=string font=string fontbold=boolean fontitalic=boolean fontsize=number foregroundcolor=string format=string gridlines=number labelformat=string categorylabelpositions=string markersize=number name=string pieslicestyle=string scalefrom=number scaleto=number seriesplacement=string show3d=boolean showborder=any showlegend=boolean showmarkers=boolean showxgridlines=boolean showxlabel=boolean showtooltip=boolean source=string showygridlines=boolean sortxaxis=boolean style=string title=string tipbgcolor=string tipstyle=string url=string xaxistitle=string xaxistype=string xoffset=number yaxistitle=string yaxistype=string yoffset=number ><!--- body --->[</cfchart>]
Attribute Description
backgroundcolor
string, optional

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.
chartheight
number, optional

Chart height; integer number of pixels
chartwidth
number, optional

Chart width; integer number of pixels
databackgroundcolor
string, optional

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.
font
string, optional

Font of data in column.
fontbold
boolean, optional

Yes: displays grid control text in bold
fontitalic
boolean, optional

Yes: displays grid control text in italics
fontsize
number, optional

Size of text in column.
foregroundcolor
string, optional

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.
format
string, optional

File format in which to save graph.

  • gif
  • jpg
  • png
labelformat
string, optional

Format for Y-axis labels.
categorylabelpositions
string, optional

Label position relative to axis: standard, up_45, up_90, down_45, down_90 or horizontal (standard) and vertical (down_90). Default is horizontal.
markersize
number, optional

Size of data point marker. in pixels. Integer.
name
string, optional

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.
pieslicestyle
string, optional

Applies to chartseries type attribute value pie.
scalefrom
number, optional

Y-axis minimum value; integer
scaleto
number, optional

Y-axis max value; integer
show3d
boolean, optional

Display chart with three-dimensional appearance.
showborder
any, optional

Whether to display a border around the chart
showlegend
boolean, optional

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

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

yes: display X-axis gridlines
showxlabel
boolean, optional

yes: shows the x-axis labels
showtooltip
boolean, optional

show the tooltip or not
source
string, optional

variable name of the source path, if set the path to the source file is returned and no image tag is written to response stream.
showygridlines
boolean, optional

yes: display Y-axis gridlines
sortxaxis
boolean, optional

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

Title of the chart.
url
string, optional

URL to open if the user clicks item in a data series; the onClick destination page.
xaxistitle
string, optional

text; X-axis title
xoffset
number, optional

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

text; X-axis title
yoffset
number, optional

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

Unimplemented Attribute(s)

Attribute Description
gridlines
number, optional

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

* unimplemented *
seriesplacement
string, optional

Applies to charts that have more than one data series. Relative positions of series.

* unimplemented *
style
string, optional

XML file or string to use to specify the style of the chart.

* unimplemented *
tipbgcolor
string, optional

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.

* unimplemented *
tipstyle
string, optional

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 (Flash not supported).
  • mouseOver: displays if the user positions the cursor at the element
  • none: suppresses display
* unimplemented *
xaxistype
string, optional
  • category 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.
* unimplemented *
yaxistype
string, optional

Currently has no effect, as Y axis is always used for data values. Valid values are category and scale

* unimplemented *

Examples

Example for cfchart

<cfchart format="jpg" title="Sales Report" backgroundcolor="cyan" showborder="true">
  <cfchartseries type="pie">
    <cfchartdata item="2012" value="2000">
    <cfchartdata item="2013" value="4000">
    <cfchartdata item="2014" value="5000">
    <cfchartdata item="2015" value="7000">
  </cfchartseries>
</cfchart>

See also