cfgraph type = "line"

Use this form of the cfgraph tag to generate line graphs and area graphs. An area graph is a line graph with the fill attribute set to "Yes".

Syntax

<cfgraph type = "line"
  query = "query name"
  valueColumn = "query column"
  itemColumn = "query column"

  scaleFrom = integer minimum value
  scaleTo = integer maximum value

  showItemLabels = "yes" or "no"
  itemLabelFont = "Arial", "Courier", or "Times"
  itemLabelSize = number of points
  itemLabelOrientation = "horizontal" or "vertical"

  title = "title text"
  titleFont = "Arial", "Courier", or "Times"

  fileFormat = "Flash", "gif" or "jpg"
  lineColor = "Web color"
  lineWidth = integer number of pixels
  fill = "yes" or "no"
  graphHeight = integer number of pixels
  graphWidth = integer number of pixels
  backgroundColor = "Web color"
  borderColor = "Web color"
  borderWidth = integer number of pixels
  depth = integer number of pixels
  gridLines = integer number of lines>
...
</cfgraph>

Basic attributes

These attributes provide basic information about the graph.

Attribute

Description

type
Required. Type of chart to display. Must be one of the following:

Bar

HorizontalBar

Line

Pie

query
Name of the query containing the data to graph. Required if you do not use cfgraphdata tags in the cfgraph tag body to specify the data values.

valueColumn
Query column that contains the data values.
Required if you do not use cfgraphdata tags in the cfgraph tag body to specify the data values.

itemColumn
Optional. Query column that contains the item label for the corresponding data point. Item labels appear on the horizontal axis of the chart.

Attribute	Description
type	Required. Type of chart to display. Must be one of the following: Bar HorizontalBar Line Pie
query	Name of the query containing the data to graph. Required if you do not use `cfgraphdata` tags in the `cfgraph` tag body to specify the data values.
valueColumn	Query column that contains the data values. Required if you do not use `cfgraphdata` tags in the `cfgraph` tag body to specify the data values.
itemColumn	Optional. Query column that contains the item label for the corresponding data point. Item labels appear on the horizontal axis of the chart.

Line graph value display attributes

These attributes determine the values on the vertical axis.

Attribute

Description

scaleFrom
Optional. The minimum value of the graph vertical axis.
Default is 0.

scaleTo
Optional. The maximum value of the graph vertical axis.
Default is the maximum data value.

Attribute	Description
scaleFrom	Optional. The minimum value of the graph vertical axis. Default is 0.
scaleTo	Optional. The maximum value of the graph vertical axis. Default is the maximum data value.

Line graph item label attributes

These attributes determine how the item label information that describes each data point appears on the horizontal axis of the graph.

Attribute

Description

showItemLabels
Optional. Specifies whether to put item labels on the horizontal axis of the chart. Values are:

yes (default)

no

itemLabelFont
Optional. The font used for the item labels. Valid values are:

Arial (default)

Courier

Times

itemLabelSize
The size of the item labels in points
Default is 12.

itemLabelOrientation
Optional. Orientation of item labels. This option has an effect only if the data includes a label column. Values are:

horizontal (default)

vertical

Attribute	Description
showItemLabels	Optional. Specifies whether to put item labels on the horizontal axis of the chart. Values are: yes (default) no
itemLabelFont	Optional. The font used for the item labels. Valid values are: Arial (default) Courier Times
itemLabelSize	The size of the item labels in points Default is 12.
itemLabelOrientation	Optional. Orientation of item labels. This option has an effect only if the data includes a label column. Values are: horizontal (default) vertical

Line graph title attributes

These attributes determine how the title appears on the graph.

Attribute

Description

title
Optional. Title to display centered above the chart, or below the chart if the legend is above the chart. If unspecified, no title displays.

titleFont
Optional. The font used to display the title. Valid values are:

Arial (default)

Courier

Times

Attribute	Description
title	Optional. Title to display centered above the chart, or below the chart if the legend is above the chart. If unspecified, no title displays.
titleFont	Optional. The font used to display the title. Valid values are: Arial (default) Courier Times

Line graph appearance attributes

These attributes determine the general appearance of the graph.

Attribute

Description

fileFormat
Optional. File type to be used for the output displayed in the browser. Must be one of the following:

Flash (default)

gif

jpg

lineColor
Optional. The color used to draw the data line. Can be any of the 256 standard web colors, in any valid HTML color format.
Default is blue.

lineWidth
Optional. Width of the graph line, in pixels.
Default is 1.

fill
Optional. Specifies whether to fill the area below the line with the line color to create an area graph.

yes

no (default)

graphHeight
Optional. Height of the graph, in pixels.
Default is 240.

graphWidth
Optional. Width of the graph, in pixels.
Default is 320.

backgroundColor
Optional. Color of the chart background. Can be any of the 256 standard web colors, in any valid HTML color format.
Default is white.

borderColor
Optional. The color used to draw borders and grid lines. Can be any of the 256 standard web colors, in any valid HTML color format.
Default is black.

borderWidth
Optional. Border thickness, in pixels. Setting this attribute to 0 removes the border.
Default is 1.

depth
Optional. Depth of 3D chart appearance, in pixels.
Default is 0, no 3D appearance.

gridLines
Optional. An integer specifying the number of grid lines to display on the chart between the top and bottom lines.
Default is 0, no grid lines.

Attribute	Description
fileFormat	Optional. File type to be used for the output displayed in the browser. Must be one of the following: Flash (default) gif jpg
lineColor	Optional. The color used to draw the data line. Can be any of the 256 standard web colors, in any valid HTML color format. Default is blue.
lineWidth	Optional. Width of the graph line, in pixels. Default is 1.
fill	Optional. Specifies whether to fill the area below the line with the line color to create an area graph. yes no (default)
graphHeight	Optional. Height of the graph, in pixels. Default is 240.
graphWidth	Optional. Width of the graph, in pixels. Default is 320.
backgroundColor	Optional. Color of the chart background. Can be any of the 256 standard web colors, in any valid HTML color format. Default is white.
borderColor	Optional. The color used to draw borders and grid lines. Can be any of the 256 standard web colors, in any valid HTML color format. Default is black.
borderWidth	Optional. Border thickness, in pixels. Setting this attribute to 0 removes the border. Default is 1.
depth	Optional. Depth of 3D chart appearance, in pixels. Default is 0, no 3D appearance.
gridLines	Optional. An integer specifying the number of grid lines to display on the chart between the top and bottom lines. Default is 0, no grid lines.

Example

The following example sets individual income values for the last four quarters. It creates an area graph to show the information. The graph uses cfgraphdata tags to specify the data points to chart.

<cfset Q1income=7600000>

<cfset Q2income=870000>
<cfset Q3income=930000>
<cfset Q4income=860000>

<cfgraph type="Line" 
  title="Quarterly Income"
  fill="yes">
  <cfgraphdata label="Q1" value=Q1income>
  <cfgraphdata label="Q2" value=Q2income>
  <cfgraphdata label="Q3" value=Q3income>
  <cfgraphdata label="Q3" value=Q3income>
</cfgraph>

CFML Reference
ColdFusion Tags