Adobe ColdFusion 8

cfchartseries

Description

Used with the cfchart tag. This tag defines the chart style in which the data displays: bar, line, pie, and so on.

Category

Data output tags, Extensibility tags

Syntax

<cfchartseries 
    type="type"
    itemColumn="query column"
    valueColumn="query column"
    colorlist = "list"
    dataLabelStyle="style"
    markerStyle="style"
    paintStyle="plain|raise|shade|light"
    query="query name"
    seriesColor="hexadecimal value|web color" 
    seriesLabel="label text">
</cfchartseries>

Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys.

See also

cfchart, cfchartdata; "Creating Charts and Graphs" in the ColdFusion Developer's Guide

History

ColdFusion MX 7:

  • Added the dataLabelStyle attribute.
  • Added the horizontalbar value of the type attribute.

ColdFusion MX 6.1: Changed interpolation behavior: the tag now interpolates data points on line charts with multiple series.

ColdFusion MX: Added this tag.

Attributes

Attribute

Req/Opt

Default

Description

type

Required

 

Sets the chart display style:

  • bar
  • line
  • pyramid
  • area
  • horizontalbar
  • cone
  • curve
  • cylinder
  • step
  • scatter
  • pie

itemColumn

Required if query attribute is specified

 

Name of a column in the query specified in the query attribute; contains the item label for a data point to graph.

valueColumn

Required if query attribute is specified

 

Name of a column in the query specified in the query attribute; contains data values to graph.

colorlist

Optional

 

Sets colors for each data point. Applies if the cfchartseries type attribute is pie, pyramid, area, horizontalbar, cone, cylinder, or step.

Comma-delimited list of hexadecimal values or supported, named web colors; see the name list and information about six- and eight-digit hexadecimal values in the cfchart Usage section.

For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.

dataLabelStyle

Optional

none

Specifies the way in which the color is applied to the item in the series:

  • none: nothing is printed.
  • value: the value of the datapoint.
  • rowLabel: the row's label.
  • columnLabel: the column's label.
  • pattern: combination of column label, value, and aggregate information, such as the columnLabel value for the percentage of total graph, for example, Sales 55,000 20% of 277,000.

markerStyle

Optional

rectangle

Sets the icon that marks a data point for two-dimensional line, curve, and scatter graphs:

  • rectangle
  • triangle
  • diamond
  • circle
  • letter
  • mcross
  • snow
  • rcross

paintStyle

Optional

plain

Sets the paint display style of the data series:

  • plain: solid color.
  • raise: the appearance of a button.
  • shade: gradient fill, darker at the edges.
  • light: a lighter shade of color; gradient fill.

query

Optional

 

Name of the ColdFusion query from which to get data to graph.

seriesColor

Optional

 

Color of the main element (such as the bars) of a chart. For a pie chart, the color of the first slice.

Hexadecimal value or supported named color; see the name list and information about six- and eight-digit hexadecimal values in the Usage section for the cfchart tag.

For a hexadecimal value, use the form "##xxxxxx" or "##xxxxxxxx", where x = 0-9 or A-F; use two number signs or none.

seriesLabel

Optional

 

Text of the data series label

Usage

For a pie chart, ColdFusion sets pie slice colors as follows:

  • If the seriesColor attribute is omitted, ColdFusion automatically determines the colors of the slices.
  • If the seriesColor attribute is specified, ColdFusion automatically determines the colors of the slices after the first one, starting with the specified color for the first slice.

Example

<!--- The following example analyzes the salary data in the cfdocexamples
database and generates a bar chart showing average salary by department. --->

<!--- Get the raw data from the database. --->
<cfquery name="GetSalaries" datasource="cfdocexamples">
    SELECT Departmt.Dept_Name, 
        Employee.Dept_ID, 
        Employee.Salary
    FROM Departmt, Employee
    WHERE Departmt.Dept_ID = Employee.Dept_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 
Dept_Name,
AVG(Salary) AS avgSal,
SUM(Salary) AS sumSal
FROM GetSalaries
GROUP BY Dept_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>

<h1>Employee Salary Analysis</h1> 
<!--- Bar graph, from Query of Queries --->
<cfchart format="flash" 
xaxistitle="Department" 
yaxistitle="Salary Average"> 

<cfchartseries type="bar" 
query="DataTable" 
itemcolumn="Dept_Name" 
valuecolumn="avgSal" />
</cfchart>