<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 for Jakarta EE (Lucee 7+)


		<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
    base64=boolean
><!--- body --->[</cfchart>]

Attribute	Description
backgroundColor _{string, optional}	edit 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}	edit Chart height; integer number of pixels
chartWidth _{number, optional}	edit Chart width; integer number of pixels
dataBackgroundColor _{string, optional}	edit 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}	edit Font of data in column.
fontBold _{boolean, optional}	edit Yes: displays grid control text in bold
fontItalic _{boolean, optional}	edit Yes: displays grid control text in italics
fontSize _{number, optional}	edit Size of text in column.
foregroundColor _{string, optional}	edit 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}	edit File format in which to save graph. gif jpg png
labelFormat _{string, optional}	edit Format for Y-axis labels.
categoryLabelPositions _{string, optional}	edit 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}	edit Size of data point marker in pixels. Integer.
name _{string, optional}	edit 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}	edit Applies to chartseries type attribute value pie.
scaleFrom _{number, optional}	edit Y-axis minimum value; integer
scaleTo _{number, optional}	edit Y-axis max value; integer
show3D _{boolean, optional}	edit Display chart with three-dimensional appearance.
showBorder _{any, optional}	edit Whether to display a border around the chart
showLegend _{boolean, optional}	edit yes: if chart contains more than one data series, display legend
showMarkers _{boolean, optional}	edit Applies to chartseries type attribute values line, curve and scatter. yes: display markers at data points
showXGridlines _{boolean, optional}	edit yes: display X-axis gridlines
showXLabel _{boolean, optional}	edit yes: shows the x-axis labels
showTooltip _{boolean, optional}	edit show the tooltip or not
source _{string, optional}	edit 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}	edit yes: display Y-axis gridlines
sortXAxis _{boolean, optional}	edit Display column labels in alphabetic order along X-axis. Ignored if the xAxisType attribute is scale.
title _{string, optional}	edit Title of the chart.
url _{string, optional}	edit 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}	edit text; X-axis title
xOffset _{number, optional}	edit Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally
yAxisTitle _{string, optional}	edit text; X-axis title
yOffset _{number, optional}	edit Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally.
base64 _{boolean, optional}	edit Render chart inline using a base64 data url.

Unimplemented Attribute(s)

Attribute	Description
gridlines _{number, optional}	edit Number of grid lines to display on value axis, including axis; positive integer. * unimplemented *
seriesPlacement _{string, optional}	edit Applies to charts that have more than one data series. Relative positions of series. * unimplemented *
style _{string, optional}	edit XML file or string to use to specify the style of the chart. * unimplemented *
tipbgcolor _{string, optional}	edit 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}	edit 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}	edit 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}	edit Currently has no effect, as Y axis is always used for data values. Valid values are category and scale * unimplemented *

Examples

edit

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