<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. The following variables will be substituted [ $SERIESLABEL$, $ITEMLABEL$, $VALUE$ ] If the url does not contain a `?` the following is appended `?series=$SERIESLABEL$&category=$ITEMLABEL$&value=$VALUE$` Otherwise, you will need to specify the query string manually If the url starts with `javascript:` only variable substitution is done (since 1.20.1)
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>

<cfchart>

Unimplemented Attribute(s)

Examples

Example for cfchart

See also