View comments | RSS feed

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 
   colorlist = "list"
   itemColumn="queryColumn"
   markerStyle="style"
   paintStyle="plain" or "raise" or "shade" or "light"
   query="queryName"
   seriesColor="hexadecimal value or web color" 
   seriesLabel="Label Text"
   type="type"
   valueColumn="queryColumn"
   dataLabelStyle="style">
</cfchartseries>

See also

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

History

ColdFusion MX 7:

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

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.

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.

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

type

Required

 

Sets the chart display style:

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

valueColumn

Required if query attribute is specified

 

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

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 columnLabel value for the percentage of total graph; for example, Sales 55,000 20% of 277,000.

Usage

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

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>

ColdFusion 9 | ColdFusion 8 | ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX | Forums | Developer Center | KnowledgeBase | Bug Reporting

Version 7

Comments


MikerRoo said on Mar 4, 2005 at 8:30 PM :
The dataLabelStyle does NOT seem to default to "none" -- at least for pie charts.

Must explicitly set to "none".
ASandstrom said on Apr 12, 2005 at 1:56 PM :
There are a number of chart characteristics that one can set using WebCharts3D. (As indicated in the CF7 documentation, not every style possibiliity is enabled in the cfchart / cfchartseries tags.)

To create a custom style using WebCharts3D, follow the instruction on this page:
http://livedocs.macromedia.com/coldfusion/7/htmldocs/00001431.htm

You will probably find that you can make your charts look like you want using this technique.
Ricky Torres said on Sep 30, 2005 at 8:28 AM :
The graph seem to skip labels when a certain number of items are displayed. I would expect at least to see some indication of a label or truncated text but not ignoring them.

Also, It would be nice if I could have the graph display the labels in different angles ie. vertical or 45d on the x axis.
Ricky Torres said on Sep 30, 2005 at 9:15 AM :
Found this can be fixed by changing the configuration style file default.xml tag <xAxis><labelStyle isHideOverlapped="false" orientation="Vertical"/>
Oblio said on Jan 30, 2007 at 7:55 AM :
These tags generate XML to be fed to WebCharts3D. Care needs to be taken that some XML characters get encoded in order to be displayed correctly. For example, this [serieslabel="< one"] will cause this error: [Expected > or / instead of <(0x3C)]. Instead of <, consider using &lt; it will be rendered correctly. A > can be used safely.
phil1021 said on May 24, 2007 at 1:18 PM :
Reference the cfchartseries attribute datalabelstyle. In the CFML reference:

http://livedocs.adobe.com/coldfusion/7/htmldocs/00000228.htm

the description for this attribute is not correct. The description starts out by stating: "Specifies the way in which the color is applied to the item in the series:"

The datalabelstyle attribute actually determine what information is displayed next to a bar or pie slice on the chart. The values available for this attribute (none, value, rowLabel, columnLabel, and pattern) determine what information is displayed. This attribute has nothing to do with the color of the series.
kodemonki said on Sep 20, 2007 at 5:44 AM :
Regarding the colorlist attribute: "Applies if the cfchartseries type attribute is pie, pyramid, area, horizontalbar, cone, cylinder, or step."

This can also be used for regular "bar" chart types.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/coldfusion/7/htmldocs/00000228.htm