View comments | RSS feed

cfchart

Description

Generates and displays a chart.

Category

Data output tags, Extensibility tags

Syntax

<cfchart 
  format = "flash, jpg, png" 
  chartHeight = "integer number of pixels" 
  chartWidth = "integer number of pixels" 
  scaleFrom = "integer minimum value" 
  scaleTo = "integer maximum value" 
  showXGridlines = "yes" or "no" 
  showYGridlines = "yes" or "no" 
  gridlines = "integer number of lines" 
  seriesPlacement = "default, cluster, stacked, percent" 
  foregroundColor = "Hex value or Web color" 
  dataBackgroundColor = "Hex value or Web color" 
  borderBackgroundColor = "Hex value or Web color" 
  showBorder = "yes" or "no" 
  font = "font name" 
  fontSize = "integer font size" 
  fontBold = "yes" or "no" 
  fontItalic = "yes" or "no" 
  labelFormat = "number, currency, percent, date" 
  xAxisTitle = "title text" 
  yAxisTitle = "title text" 
  sortXAxis = "yes/no" 
  show3D = "yes" or "no" 
  xOffset = "number between -1 and 1" 
  yOffset = "number between -1 and 1" 
  rotated = "yes/no" 
  showLegend = "yes/no" 
  tipStyle = "MouseDown, MouseOver, Off" 
  tipBGColor = "hex value or web color" 
  showMarkers = "yes" or "no" 
  markerSize = "integer number of pixels" 
  pieSliceStyle = "solid, sliced" 
  url = "onClick destination page" 
  name = "String"
  </cfchart>

See also

cfchartdata, cfchartseries

History

New in ColdFusion MX: This tag is new.

Attributes

Attribute Req/Opt Default Description
format

flash
File format in which to save graph.
  • flash
  • jpg
  • png
chartHeight

240
Chart height; integer number of pixels
chartWidth

320
Chart width; integer number of pixels
scaleFrom

Determined by data
Y-axis minimum value; integer.
scaleTo

Determined by data
Y-axis maximum value; integer
showXGridlines

no
  • yes: display X-axis gridlines
  • no: hide X-axis gridlines
showYGridlines

yes
  • yes: display Y-axis gridlines
  • no: hide Y-axis gridlines
gridlines

3 (top, bottom, and zero)
Number of grid lines to display on value axis, including axis; positive integer.
0: hide gridlines
seriesPlacement

default
Applies to charts that have more than one data series. Relative positions of series.
  • default: ColdFusion determines relative positions, based on graph types
  • cluster
  • stacked
  • percent
foregroundColor

black
Color of text, gridlines, and labels.
Hex value or supported named color; see name list in the Usage section.
For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.
dataBackgroundColor

white
Color of area around chart data.
Hex value or supported named color; see name list in the Usage section.
For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.
borderBackgroundColor

white
Color of area between data background and border, around labels and around legend.
Hex value or supported named color; see name list in the Usage section.
For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.
showBorder

no
  • yes
  • no
font

arial
Name of text font
  • arial
  • times
  • courier
  • arialunicodeMS. This option is required, if you are using a double-byte character set on UNIX, or using a double-byte character set on Windows with a file type of Flash.
fontSize

11
Font size; integer
fontBold

no
  • yes
  • no
fontItalic

no
  • Yes
  • No
labelFormat

number
Format for Y-axis labels.
  • number
  • currency
  • percent
  • date
xAxisTitle


text; X-axis title
yAxisTitle


text; Y-axis title
sortXAxis

no
  • yes: display column labels in alphabetic order along X-axis
  • no
show3D

no
  • yes: display chart with three-dimensional appearance
  • no
xOffset

0.1
Applies if show3D="yes". Number of units by which to display the chart as angled, horizontally.
  • A number in the range -1 - 1, where "-1" specifies 90 degrees left and "1" specifies 90 degrees right
yOffset

0.1
Applies if show3D="yes". Number of units by which to display the chart as angled, vertically.
  • A number in the range -1 - 1, where "-1" specifies 90 degrees down, and "1" specifies 90 degrees up
rotated

no
  • yes: rotate chart 90 degrees. For a horizontal bar chart, use this option.
  • no
showLegend

yes
  • yes: if chart contains more than one data series, display legend
  • no
tipStyle

mouseOver
Determines the action that opens a popup window to display information about the current chart element.
  • mouseDown: displays if the user positions the cursor at the element and clicks the mouse down. Applies only to Flash format graph file. (For other formats, this option functions the same as mouseOver.)
  • mouseOver: displays if the user positions the cursor at the element
  • off: suppresses display
tipbgcolor

white
Applies only to Flash format graph file.
Hex value or supported named color; see name list in the Usage section.
For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.
showMarkers

yes
Applies to chartseries type attribute values line, curve and scatter.
  • yes: display markers at data points
  • no
markerSize

(Automatic)
Size of data point marker. in pixels. Integer.
pieSliceStyle

sliced
Applies to chartseries type attribute value pie.
  • solid: displays pie as if unsliced
  • sliced: displays pie as if sliced
url


URL to open if the user clicks item in a data series; the onClick destination page.
You can specify variables within the URL string; ColdFusion passes current values of the variables.
  • $VALUE$: value of selected row. If none, value is empty string.
  • $ITEMLABEL$: label of selected item. If none, value is empty string.
  • $SERIESLABEL$: label of selected series. If none, value is empty string.
For example:
"somepage.cfm?item=$ITEMLABEL$&series=$SERIESLABEL$&value=$VALUE$"
  • "javascript:...": executes a client-side script
name


Page variable name. String. Outputs ISO-8859-1 encoded binary graph data and sets it as a variable in the page. Suppresses chart display. Used primarily by Flash Gateway users.

Usage

The cfchart tag defines a "container" in which a graph displays: its height, width, background color, labels, and so on. The cfchartseries tag defines the style in which data displays: bar, line, pie, and so on. The cfchartdata tag defines a data point.

Data is passed to the cfchartseries tag in the following ways:

For the font attribute value "ArialUnicodeMS", the following rules apply:

The color attributes accept the following W3C HTML 4 named color value or hex values:
Color name RGB value
Black
#000000
Green
##008000
Silver
##C0C0C0
Lime
##00FF00
Gray
##808080
Olive
##808000
White
##FFFFFF
Yellow
##FFFF00
Maroon
##800000
Navy
##000080
Red
##FF0000
Blue
##0000FF
Purple
##800080
Teal
##008080
Fuchsia
##FF00FF
Aqua
##00FFFF

For all other color values, you must enter the hex value.

For more color names that are supported by popular browsers, see:

http://www.w3.org/TR/css3-color 

Flash does not conform fully to UNIX X11 naming conventions.

You can specify whether charts are cached in memory, the number of charts to cache, and the number of chart requests that ColdFusion can process concurrently. To set these options: in the ColdFusion Administrator, select Server Settings > Charting.

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

Version 6

Comments are no longer accepted for ColdFusion MX. ColdFusion 8 is the current version.

Comments


McMurdoStation said on Jun 13, 2002 at 1:08 PM :
The documentation refers to an attribute borderBackgroundColor but when you execute with this attribute ColdFusion says that no such attribute exists.
rbils@amkor.com said on Jun 18, 2002 at 10:19 PM :
Setting GRIDLINES="0" does NOT hide the gridlines as stated in the documentation.
rnielsen said on Oct 4, 2002 at 12:52 PM :
Macromedia update: With cfchartseries/Cfchart there is an upper limit of 16 series. With more than 16 series an error is thrown.
ctina said on Jul 19, 2002 at 2:22 PM :
Update from Macromedia, in response to McMurdoStation:

The CFCHART borderBackgroundColor attribute is not present in CF MX. Its listing is a documentation bug; we will remove it. Thanks for your comment.
ctina said on Jul 19, 2002 at 2:34 PM :
Update from Macromedia, in response to rbils@amkor.com, re the cfchart tag, how to hide gridlines:
You are correct, using GRIDLINES="0" does not work; this is a bug. To hide the gridlines of a chart, use this attribute specification: SHOWYGRIDLINES="no"

Christina Lamkin
CF documentation team
Diacritical said on Aug 6, 2002 at 3:15 AM :
There should be a footnote on this page pointing out that you can no longer drill down using data from a query which does not explicitly appear in the graph. This is a huge (negative) change from all previous versions using cfgraph and should be noted. It would have saved me days of work trying to track down syntax that does not exist.
dbanttari said on Aug 22, 2002 at 3:37 PM :
Note that for IIS shared hosting environments, the /jrunscripts/ virtual directory mapping must exist (with Execute rights) for every website that wants to use CFCHART. The mapping typically points to \CFusionMX\runtimeib\wsconfig
rpolickoski said on Aug 25, 2002 at 11:43 PM :
The documentation is very vague about the labelformat attribute. In trying to work with it, I have supplied date objects as values for the y-axis labels, set the labelformat as date and the only value that is returned is 12/31/69.
ddickerson said on Oct 16, 2002 at 1:03 PM :
tipStyle attribute incorrectly lists "off" as being an option. It should be "none". This has been entered as a documentation bug.
chipman said on Oct 31, 2002 at 8:34 PM :
I have discovered a sphere setting under <cfchartseries> tag in dreamweaver mx that doesn't work on the cf mx server. Is this property supported? Also I have the same problem with dates as a label format option in <cfchart> in conjunction with the scaleTo and scaleFrom properties.
Is there a fix for this?
bjoebox said on Dec 16, 2002 at 3:33 PM :
How do you make "Lines" in a LINE Graph "THIN". These lines are normally very THICK. Is it possible to do a comparison.. ie 2 lines in a Line Graph..
eg:
https://us.etrade.com/e/t/invest/quotesresearch?qmenu=3&useSession=n

Joe
rnielsen said on Dec 18, 2002 at 10:28 AM :
Macromedia response to chipman

SPHERE is an unsupported graph type. It looks like the change did not get into Dreamweaver MX.
Xynapse said on Jan 4, 2003 at 6:12 AM :
the <cfchart tag is not well formed, there is no > on the end of the opening tag. Please ammend this...

- Davey
d3ut3r0n said on Jul 1, 2003 at 5:56 AM :
The CFMX Tag Library Descriptor is missing a backgroundColor attribute for CFCHART. If you add the following attribute to the TLD (which lives in /WEB-INF/cftags/META-INF/taglib.tld)
then the background attribute works for charts like Pie Charts (as these do not have an "inner" or "dataBackgroundColor").
hlichtin said on Jul 1, 2003 at 3:42 PM :
The backgroundColor attribute is incorrectly listed as borderBackgroundColor. You can use the backgroundcolor attribute without modifying the TLD file.
d3ut3r0n said on Jul 2, 2003 at 7:51 AM :
I believe I've worked out why dates don't work in CFCHART... there's several contributing factors, none of which the documentation addresses, and there's a bug in the underlying CFCHART java tag code.

Firstly, the data values have to be entered as the number of milliseconds since 1/1/1970 (as per the Java epoch)... which in CFMX could be created as: #CreateDate(2001,1,1).getTime()#

This means that the Value-Axis scale will start from this date... which is useless for showing closely-related dates as the variation in datapoints will be minimal at normal zoom levels.

So, then you might ask - why don't I just use scaleFrom and scaleTo attributes! Well, you might do, but the underlying JSP tag that handles CFCHART has used an incorrect primitive type in its interface. The class coldfusion.taglib.io.ChartTag appears to use int for the setScaleFrom() and setScaleTo() method signatures... these should be double (and NOT int) since the number of milliseconds for today for example, exceed the maximum width of a java int primitive (i.e. Integer.MAX_VALUE or 2147483647, which is like somewhere just before Jan 25th 1970!).

Finally, there appears to be a method called setLabelMask on this class, which again appears to be missing from the TLD. If you add this to the TLD attributes for the chart tag, then you can seemingly control the date formatting of the values.
ProgMan212 said on Aug 20, 2003 at 10:43 AM :
In CFCHART the placement of the labels beside the pie chart messes up the width attribute of the chart. If you have long labels the pie chart gets squashed. The only solution I have seen suggested is to increase the width of the chart. Well this doesn't work well when the labels are of totally different lenghts and you are not sure which will end up on the graph. Ideally you should be able to have the labels appear below the chart and be able to set the width of the chart independently of the labels. Is anything like this planned for a future release? Are there any other work arounds to this problem?
halL said on Aug 21, 2003 at 8:12 AM :
We have submitted an enhancement request, Bug number 53315 for this issue.
No screen name said on Nov 4, 2003 at 5:24 AM :
I tried setting scalefrom to #CreateDate(Year(Now()),1,1).getTime()# as per d3ut3r0n's post and true enough, CFMX returns:

Could not convert the value 1.0413792E12 to an integer because it cannot fit inside an integer.

Which confirms pretty much all of his findings.

I only upgraded to CFMX about 9 months ago from CF4.5 as it was cheaper than purchasing Corda's charting engine at the time - cfchart was the only reason for my upgrade. its ridiculous that the dates issue has still not been resolved. I've just wasted about 3 days trying to force a timeline based chart to work. (Surely most people's charting needs will include timeline specific charting). Not to mention some other serious restrictions to the tag.

I then upgraded to 6.1 in the hope that this would be fixed. Alas, no.
ISLMEDIA said on Nov 17, 2003 at 7:01 PM :
Here's a temporary kluge I've used to get around the label width problem with CFCHART pie charts on charts where the label text is dynamic and you can't manually tweak the chart using the CHARTWIDTH.

First calculate the maximum length of a label. Then use that number in a formula to determine the necessary width for the chart. For example in this code snippet I'm getting labels & values from a d/b query:

<cfset maxlabel = 0>
<cfoutput query="getlabeltext">
<cfif len(labeltext) gt maxlabel>
<cfset maxlabel = len(labeltext)>
</cfif>
</cfoutput>
<cfset width = (maxlabel * 5) + 400>
<cfset height=300>

I then use these width & height variables in the CFCHART tag instead of constants. Using 12pt Arial I get almost perfectly circular pies every time no matter how much the character length of the labels fluctuates. You may have to modify the formula for different font sizes & chart heights.
campem said on Nov 18, 2003 at 9:55 AM :
Why is CFCHART showMarkers ignored for CHARTSERIES type="step"? This type is similar to "line". Also, why, since the markers are showing for CHARTSERIES type="step", can't I control there aspect with CHARTSERIES markerStyle or CHART markerSize.

Also, it would be nice to control the seriesPlacement at the CHARTSERIES level rather than the CHART level. That way I could have a set of CHARTSERIES type="line" not stacked and a set of CHARTSERIES type="bar" stacked on the same graph.
maddmaster said on Jan 14, 2004 at 4:55 PM :
is there a way to format the label into integer (i.e. i am getting 2.333 and i only want 2)? I tried messing with the different label format from number to date and i can come up with the right answer.
No screen name said on Feb 6, 2004 at 6:38 AM :
I am using w2k and cfmx... I am calling cfchart but nothing happens on the page... ? No logs nothing... any ideas?
No screen name said on Mar 4, 2004 at 6:20 AM :
I too am using W2K/IIS with CFMX and am not getting any cfchart output. The image files are created in the cache but the browser waits forever to receive them. I've searched the web and found a couple of other mentions of this problem, but no resolution seems available. Can anyone in the world please help???

Thanks in advance,

Ed
jrunrandy said on Mar 4, 2004 at 7:43 AM :
Be sure that the jrunscripts directory has both Script and Execute permissions.
No screen name said on Mar 16, 2004 at 8:57 AM :
Can I have 2 y-Axis in cfchart?
jrunrandy said on Mar 16, 2004 at 9:18 AM :
I don't think so. However, you might try posting your question to the online forums: http://webforums.macromedia.com/coldfusion/
said on Apr 26, 2004 at 11:58 PM :
when the ratio of a slice of a pie chart is less than 2 percent. it shows it as 0%.
&&&&&& said on May 7, 2004 at 5:07 PM :
Is there a way to format the label on the y axis into integer (i.e. I am getting 2.333 and I only want 2)? I tried messing with the different label formats from number to date and I can't come up with the right answer.
No screen name said on Jun 17, 2004 at 1:26 PM :
Using dynamic data from a CFQUERY there are situations where the particular data results in a pie chart with a visible sliver of white space. The one case that I have seen this is displaying results that add up to 99% due to the fact that the pie slices are rounded to whole percents. However, I have seen some charts on our site that also add to 99% and do not have this sliver. You can see this at work very easily using this simple code. Please tell me if there is anyway to get rid of this.

<cfchart format="png" pieslicestyle="solid">
<cfchartseries type="pie">
<cfchartdata item="category a" value="1">
<cfchartdata item="category b" value="1">
<cfchartdata item="category c" value="3">
<cfchartdata item="category d" value="1">
<cfchartdata item="category e" value="1">
</cfchartseries>
</cfchart>
No screen name said on Jun 22, 2004 at 10:41 AM :
Is there any way to hide the scale for the x-axis on a chart? I dont want the numbers to be shown.
halL said on Jun 22, 2004 at 1:38 PM :
In response to No Screen name, posted 6/22/04:
You cannot disable the X axis scale labels.
FAST.hit said on Jul 22, 2004 at 9:38 AM :
cfchart suddenly stopped working on our server. It just displays the broken image even though the image files are generated in charting/cache directory. Any ideas how this could be fixed?
No screen name said on Aug 6, 2004 at 6:01 AM :
Barcharts could use an integer format for the y axis.
sorrenmt1 said on Aug 20, 2004 at 3:06 PM :
I am using a type="step" chart and my x axis labels are being centered between the different steps in the chart. I need these values to line up with the actual x-axis value positions but I cannot seem to do this properly. Is there a way to get this to work? Does this question make sense? It is not easy to describe.
RMaxRich said on Aug 30, 2004 at 4:11 AM :
In using CFChart in a clustered environment, I am having an issue with the graph showing up. I am using the NAME attribute and creating the file using the CHARSET="ISO-8859-1" writing to a shared UNC path then outputting the graph using the appropriate methods; OBJECT, IMG....

I see that the file is created along with another file, the file I wrote does not show anything but the other file has my graph. Is there a return varriable that can be used to get the name of the file that CFChart is creating so that I would not have to go throught the process of creating the file, which seems to not be working.

Any clues as what I am missing??

Thanks,
Rich
HappyToad said on Sep 13, 2004 at 4:00 AM :
I have found the issue as to why cfchart does not work on our windows 2003 server, it appears that when I tell IIS 6 to verify that file exists, then I do not get a chart even though it is being created in the cache directory. Does anyone have a workaround to this? I do not wish to turn off the verifu file exists or I will lose mhy 404 error handler.
UOBIT said on Sep 27, 2004 at 2:04 PM :
Is there any possiblity of creating gifs with cfchart. It would be very handy.
seattlite said on Oct 19, 2004 at 9:31 AM :
Is there a way to set an image as the background for bar charts, or might there be a pre-set textured background already (such as diagonal hash marks)? Thx.
dayton552 said on Oct 22, 2004 at 8:11 AM :
When will the sphere chart work? Also, is it possible to add a radar chart?
rxeno said on Nov 5, 2004 at 12:17 PM :
My query returns more than one result for a field, how can I show both grouped by date . The docs say only the last will be displayed???
rxeno said on Nov 5, 2004 at 12:18 PM :
My query returns more than one result for a field, how can I show both grouped by date . The docs say only the last will be displayed???
zedfox said on Dec 14, 2004 at 11:54 AM :
On charts, you may find your Y-axis values to be in decimals instead of whole integers. To have your Y-axis values in integers, find out the max. and min. value of the series you are plotting. Create as many gridlines as there are whole numbers from the range of series data.

e.g. if your values that you want to plot are 1.5,2.5 and 3.5,
your range is 1.5 to 3.5 is actually 2, but it would be best if you FLOOR 1.5 to 1 and CEILING 3.5 to 4. Your max and min are 4 and 1 respectively and your range is 3. Create a variable called #gridline# that is your-range + 1 = 4. Pass this variable to gridline attribute in <cfchart>. There goes your whole integer valued Y-axis now :)

Hope this helps. Thanks. Chirag Shukla.

Note: If you use MS Access, you may want to simulate FLOOR function using Round(yourvalue - 0.5) and simulate CEILING function using Round(yourvalue + 0.5).



Here is a code that you might find interesting:

<!-- RUNNING THE QUERY -->
<cfif #somequery.recordcount# eq 0>
<div align="center">No records found</div>
<p><cfinclude template="../../../somesite/footer.htm"></p>
<cfabort>
<cfelse>
<cfquery name="maxmin" datasource="somedatasource">
<cfif #element1# eq "maxat">
select round(max(maxat*1.8+32+0.5)) as maxelement1, round(min(maxat*1.8+32-0.5)) as minelement1 from #dbtable# where datetoday = #createodbcdate(datez)#
</cfif>
</cfquery>
</cfif>


<!-- STORE MAX AND MIN VALUES IN VARIABLES -->
<cfoutput query="maxmin">
<cfset scalefrom = #minelement1#>
<cfset scaleto = #maxelement1#>
<cfset gridlines = #maxelement1# - #minelement1#+1>
</cfoutput>

<!-- CREATING THE CHART -->
<div align="center">
<cfchart format="png"
chartheight="300"
chartwidth="550"
showxgridlines="no"
showygridlines="yes"
gridlines="#gridlines#"
scalefrom="#scalefrom#"
scaleto="#scaleto#"
xaxistitle="Hour of Day"
yaxistitle="#yaxistitle#"
markersize="3"
labelformat="number"
url="http://whatever.com" >

<cfchartseries
type="line"
seriesColor="green"
paintStyle="shade"
markerStyle="circle"
query="somequery"
itemcolumn="myhour"
valuecolumn="element1" >
</cfchartseries>

</cfchart>
</div>
WolfShade_2k said on Apr 18, 2005 at 8:31 AM :
Is there any control for thickness of horizontalbar chart bars? When I started with cfchart, the bars were WAY thick; I don't know what I've done, but now they are WAY THIN and not centering with the data name they are representing (ie, the ones on top are floating above the centerline of the x-axis, the ones on bottom are floating below.)

The client is asking for a lot of things that cfchart does not currently do (like hiding the numbers of the x-axis, etc.); are there any plans to include more control of cfchart in the future??
ASandstrom said on May 11, 2005 at 7:29 AM :
There is a tech note about cfchart not working when the server is started as a domain account at:
http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_19605
cdary said on Jun 1, 2005 at 9:33 AM :
Feature Request: Would be helpful if there was a "Round to Integers" attribute so that we wouldn't end up with odd decimals in the chart. I know zedfox was helpful enough to provide a workaround, but this should be something provided by the tag, in my opinion.
jrunrandy said on Jun 28, 2005 at 12:10 PM :
You can add feature requests at http://www.macromedia.com/go/wish/
James_Hull said on Sep 28, 2005 at 9:18 AM :
How do you use URLENCODEDFORMAT with the $ITEMLABEL$ and $SERIESLABEL$ variables in the url attribute of CFCHART? I need to pass fairly complex text that includes ampersands and single quotes but I get "Variable $ITEMLABEL$ is undefined" if I use something like url="disp_drillspend2.cfm?item=#urlencodedformat($ITEMLABEL$)#&series=#urlencodedformat($SERIESLABEL$)#&value=$VALUE$&type=#url.type#" in the CFCHART tag.

 

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

Current page: http://livedocs.adobe.com/coldfusion/6/CFML_Reference/Tags-pt112.htm