CFML Reference
ColdFusion Tags

cfgraph type = "bar" or type = "horizontalBar"

Description

Use this form of the cfgraph tag to generate bar and horizontal bar graphs.

Syntax

<cfgraph type = "bar" or "horizontalBar"
  query = "query name"
  valueColumn = "query column"
  itemColumn = "query column"

  URL = "URL string"
  URLColumn = "query column"

  showValueLabel = "yes", "no", or "rollover"
  valueLabelFont = "Arial", "Courier", or "Times"
  valueLabelSize = number of points
  valueLocation = "onBar" or "overBar"
  scaleFrom = integer minimum value
  scaleTo = integer maximum value

  showItemLabel = "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"
  barSpacing = integer number of pixels 
  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
  colorList = "Web color list"
  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 that contains 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 Bar charts and the vertical axis of the HorizontalBar charts.

Data drill-down attributes

You can use the following attributes to make your chart active by linking to a URL when the user clicks on a bar.

Attribute	Description
URL	Optional. A URL to load when the user clicks a data point on the chart. You can use this column to specify a static string is part of all links on the chart, such as http://www.mycompany.com/myapp/salary_info/chart_details/ Data from the URLColumn attribute is appended to this attribute's value to create the URL link. This attribute has an effect only if the graph is in the Flash file format.
URLColumn	Optional. Query column that contains URL information to load when the user clicks the corresponding data point. The data from this attribute is appended to any URL attribute value to create the URL. This attribute has an effect only if the graph is in Flash file format.

Bar chart value display attributes

These attributes determine how data point values are displayed on the graph and the values on the vertical axes.

Attribute	Description
showValueLabel	Optional. Specifies whether values are displayed for the data points. Values are: yes (default) no rollover (works only with Flash file format)
valueLabelFont	Optional. The font used to display data values. Values are: Arial (default) Courier Times
valueLabelSize	Optional. The size of the value text, in points. Default is 12.
valueLocation	Optional. Where value labels are placed. Values are: onBar (default) overBar
scaleFrom	Optional. The minimum value of the graph value axis (the vertical axis for Bar charts, the horizontal axis for HorizontalBar charts). Default is 0.
scaleTo	Optional. The maximum value of the graph value axis. Default is the maximum data value.

Bar chart item label attributes

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

Attribute	Description
showItemLabel	Optional. Specifies whether to put item labels on the horizontal axis of bar charts and the vertical axis of HorizontalBar charts. the chart. Valid 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. Valid values are: horizontal (default for HorizontalBar) vertical (default for Bar)

Bar chart title attributes

These attributes determine how the title and legend appear.

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. Values are: Arial (default) Courier Times

Bar chart 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
barSpacing	Optional. Spacing between bars in the chart, in pixels. Default is 0 (zero).
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.
colorList	Optional. Comma-delimited list of colors to use for each data point. If there are more data points than colors in the list, the server cycles through the list. The value may be in any valid HTML color format. Default is to use an internal list of colors.
gridLines	Optional. An integer that specifies 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 analyzes the salary data in the CompanyInfo database and generates a bar chart showing average salary by department. The body of the cfgraph tag includes one cfgraphdata tag to include data that is not available from the query. The graph displays as a gif file, with custom colors for the columns, and a 3-dimensional appearance. The maximum vertical axis value is 120000.

<!--- Get the raw data from the database. --->

<cfquery name = "GetSalaries" datasource = "CompanyInfo">
  SELECT Departments.Department_Name, 
    Employees.Department_ID, 
    Employees.Salary
  FROM Departments, Employees
  WHERE Departments.Department_ID = Employees.Department_ID
</cfquery>

<!--- Use a query of queries to generate a new query with --->
<!--- statistical data for each department. --->
<!--- AVG and SUM calculate statistics. --->
<!--- GROUP BY generates results for each department. --->
<cfquery dbtype = "query" name = "DataTable">
  SELECT 
    Department_Name,
    AVG(Salary) AS AvgSal,
    SUM(Salary) AS MinSal
  FROM GetSalaries
  GROUP BY Department_Name
</cfquery>


<!--- Reformat the generated numbers to show only thousands --->
<cfloop index = "i" from = "1" to = "#DataTable.RecordCount#">
  <cfset DataTable.SumSal[i] = Round(DataTable.SumSal[i]/1000)*1000>
  <cfset DataTable.AvgSal[i] = Round(DataTable.AvgSal[i]/1000)*1000>
</cfloop>

<html>
<head>
  <title>Employee Salary Analysis</title>
</head>
<body>

<h1>Employee Salary Analysis</h1> 

<!--- Bar graph, from Query of Queries --->
<cfgraph type = "bar" 
  query = "DataTable" 
  valueColumn = "AvgSal" 
  itemColumn = "Department_Name" 
  title = "Average Salary by Deparment" 
  scaleTo = 120000 
  fileFormat = "gif" 
  depth = 5 
  colorList = "red,green,blue,yellow,orange">
  <cfgraphdata label = "Facilities" value = 35000>
</cfgraph>
<br><br>

</body>
</html>

Copyright © 2001, Macromedia Inc. All rights reserved.