User Guide Cancel

Controlling chart appearance

Search
ColdFusion

ColdFusion

Open app
  1. ColdFusion Developers Guide
  2. Develop ColdFusion applications
    1. Introducing ColdFusion
      1. Introducing ColdFusion
      2. About ColdFusion
      3. About Internet applications and web application servers
      4. About JEE and the ColdFusion architecture
    2. Changes in ColdFusion
      1. Changes in ColdFusion
      2. Replacement of JRun with Tomcat
      3. Security enhancements
      4. ColdFusion WebSocket
      5. Enhanced Java integration
      6. ColdFusion ORM search for indexing and search
      7. Solr enhancements
      8. Scheduler enhancements
      9. Integration with Microsoft Exchange Server 2010
      10. RESTful Web Services in ColdFusion
      11. Lazy loading across client and server in ColdFusion
      12. Web service enhancements
      13. Displaying geolocation
      14. Client-side charting
      15. Caching enhancements
      16. Server update using ColdFusion Administrator
      17. Secure Profile for ColdFusion Administrator
    3. Introduction to application development
      1. Introduction to application development using ColdFusion
      2. Using the Developing ColdFusion Applications guide
      3. About Adobe ColdFusion documentation for Developers
    4. The CFML programming language
      1. The CFML programming language
      2. Elements of CFML
      3. ColdFusion variables
      4. Expressions and number signs
      5. Arrays and structures
      6. Extend ColdFusion pages with CFML scripting
      7. Regular expressions in functions
      8. ColdFusion language enhancements
      9. Built-in functions as first class citizen
      10. Data types- Developing guide
    5. Building blocks of ColdFusion applications
      1. Building blocks of ColdFusion applications
      2. Create ColdFusion elements
      3. Write and call user-defined functions
      4. Build and use ColdFusion Components
      5. Create and use custom CFML tags
      6. Build custom CFXAPI tags
      7. Use the member functions
      8. Object Oriented Programming in ColdFusion
    6. Develop CFML applications
      1. Develop CFML applications
      2. Design and optimize a ColdFusion application
      3. Handle errors
      4. Use persistent data and locking
      5. Use ColdFusion threads
      6. Secure applications
      7. Client-side CFML (for mobile development)
      8. Use the ColdFusion debugger
      9. Debugging and Troubleshooting Applications
      10. Develop globalized applications
      11. REST enhancements in ColdFusion
      12. Authentication through OAuth
      13. Social enhancements
    7. Develop mobile applications
      1. Mobile application development
      2. Build mobile applications
      3. Debug mobile applications
      4. Inspect mobile applications
      5. Package mobile applications
      6. Troubleshoot mobile applications
      7. Device detection
      8. Client-side CFML
      9. Mobile Templates
      10. Code samples to build a mobile application
    8. Access and use data
      1. Access and use data
      2. Introduction to Databases and SQL
      3. Access and retrieve data
      4. Update database
      5. Use Query of Queries
      6. Manage LDAP directories
      7. Solr search support
    9. ColdFusion ORM
      1. ColdFusion ORM
      2. Introducing ColdFusion ORM
      3. ORM architecture
      4. Configure ORM
      5. Define ORM mapping
      6. Work with objects
      7. ORM session management
      8. Transaction and concurrency
      9. Use HQL queries
      10. Autogenerate database schema
      11. Support for multiple data sources for ORM
      12. ColdFusion ORM search
    10. ColdFusion and HTML5
      1. ColdFusion and HTML 5
      2. Use ColdFusion Web Sockets
      3. Media Player enhancements
      4. Client-side charting
      5. Display geolocation data
    11. Flex and AIR integration in ColdFusion
      1. Flex and AIR integration in ColdFusion
      2. Use the Flash Remoting Service
      3. Use Flash Remoting Update
      4. Offline AIR application support
      5. Proxy ActionScript classes for ColdFusion services
      6. Use LiveCycle Data Services ES assembler
      7. Use server-side ActionScript
    12. Request and present information
      1. Request and present information
      2. Retrieve and format data
      3. Build dynamic forms with cfform tags
      4. Validate data
      5. Create forms in Flash
      6. Create skinnable XML forms
      7. Use Ajax data and development features
      8. Use Ajax User Interface components and features
    13. Office file interoperability
      1. Office file interoperability
      2. Using cfdocument
      3. Using cfpresentation
      4. Using cfspreadsheet
      5. Supported Office conversion formats
      6. SharePoint integration
    14. ColdFusion portlets
      1. ColdFusion portlets
      2. Run a ColdFusion portlet on a JBoss portal server
      3. Run a ColdFusion portlet on a WebSphere portal server
      4. Common methods used in portlet.cfc
      5. ColdFusion portlet components
      6. Support for JSR-286
    15. Work with documents, charts, and reports
      1. Work with documents, charts, and reports
      2. Manipulate PDF forms in ColdFusion
      3. Assemble PDF documents
      4. Create and manipulate ColdFusion images
      5. Create charts and graphs
        1. About charts
        2. Creating a basic chart
        3. Charting data
        4. Controlling chart appearance
        5. Creating charts: examples
        6. Administering charts
        7. Writing a chart to a variable
        8. Linking charts to URLs
        9. Charting enhancements
      6. Create reports and documents for printing
      7. Create reports with Report Builder
        1. About Report Builder
        2. Common reporting tasks and techniques
        3. Creating a simple report
        4. Getting started
      8. Create slide presentations
    16. Use web elements and external objects
      1. Use web elements and external objects
      2. Use XML and WDDX
      3. Use web services
      4. Use ColdFusion web services
      5. Integrate JEE and Java elements in CFML applications
      6. Use Microsoft .NET assemblies
      7. Integrate COM and CORBA objects in CFML applications
    17. Use external resources
      1. Send and receive e-mail
      2. Interact with Microsoft Exchange servers
      3. Interact with remote servers
      4. Manage files on the server
      5. Use event gateways
      6. Create custom event gateways
      7. Use the ColdFusion extensions for Eclipse
      8. Use the data services messaging event gateway
      9. Use the data management event gateway
      10. Use the FMS event gateway
      11. Use the instant messaging event gateways
      12. Use the SMS event gateway

You can control the appearance of charts by doing any of the following:

  • Using the default chart styles included with ColdFusion
  • Using the attributes of the cfchart and cfchartseries tags
  • Creating your own chart styles

Using the default chart styles included with ColdFusion

ColdFusion supplies the following chart styles:

  • beige
  • blue
  • default
  • red
  • silver
  • yellow
    To use any of these styles, specify the style using the style attribute of the cfchart tag. The following example illustrates using the beige style:

<cfchartseries type="pie">
<cfchartdata item="New car sales" value="50000">
<cfchartdata item="Used car sales" value="25000">
<cfchartdata item="Leasing" value="30000">
<cfchartdata item="Service" value="40000">
</cfchartseries>
</cfchart>

You can specify the appearance of charts by using the attributes of the cfchart and cfchartseries tags. 
You can optionally specify the following characteristics to the cfchart tag on the types of charts indicated:

Chart characteristic

Attributes used

Description

Chart type

File type

format

Whether to send the chart to the user as a JPEG, PNG, or SWF file. The SWF file is the default format.

All

Size

chartWidth
chartHeight

The width and height, in pixels, of the chart. This size defines the entire chart area, including the legend and background area around the chart.The default height is 240 pixels; the default width is 320 pixels.

All

Color

foregroundColor
dataBackgroundColor
backgroundColor

The colors used for foreground and background objects. The default foreground color is black; the default background colors are white. You can specify 16 color names, use any valid HTML color format, or specify an 8-digit hexadecimal value to specify the RGB value and transparency. If you use numeric format, use double number signs; for example, blue or ##FF33CC. To specify the color and transparency, use the format ##xxFF33CC, where xx indicates the transparency. The value FF indicates opaque; the value 00 indicates transparent. For the complete list of colors, see Configuring and Administering ColdFusion.

All

Labels

font
fontSize
fontBold
frontItalic
labelFormat
xAxisTitle
yAxisTitle

The font attribute specifies the font for all text. The default value is Arial. If you are using a double-byte character set on UNIX, or using a double-byte character set in Windows with a file type of Flash, specify ArialUnicodeMs as the font.Note: If a chart attempts to use a font that is not installed on the ColdFusion server, it uses a different font that is available. Also, if you do not specify the font, characters that are not ASCII, such as Japanese, Chinese, Korean, and so on, can display improperly.The fontSize specifies an Integer font size used for all text. The default value is 11.The fontBold attribute specifies to display all text as bold. The default value is no.The fontItalic attribute specifies to display all text as italic. The default value is no.The labelFormat attribute specifies the format of the y-axis labels, number, currency, percent, or date. The default value is number.The xAxisTitle and yAxisTitle attributes specify the title for each axis.

All

Border

showBorder

Use the showBorder attribute to draw a border around the chart. The foregroundColor attribute specifies the border color. The default value is no.

All

Grid lines

showXGridlines
showYGridlines
gridLines

Use the showXGridlines and showYGridlines attributes to display x-axis and y-axis grid lines. The default value no for x-axis gridlines, and yes for y-axis gridlines.The gridLines attribute specifies the total number of grid lines on the value axis, including the axis itself. The value of each grid line appears along the value axis. The cfchart tag displays horizontal grid lines only. The default value is 0, which means no grid lines.

AreaBarConeCurveCylinderHorizontalbarLinePyramidScatterStep

Slice style

pieSliceStyle

Displays the pie chart as solid or sliced. The default value is sliced.

Pie

Markers

showMarkers
markerSize

The showMarkers attribute displays markers at the data points for two-dimensional line, curve, and scatter charts. The default value is yes.The markerSize attribute specifies an integer number of pixels for the marker size. ColdFusion determines the default value.

All

Value axis

scaleFrom
scaleTo

The minimum and maximum points on the data axis. By default, the minimum is 0 or the lowest negative chart data value, and the maximum is the largest data value.Note: If you specify a scaleFrom or scaleTo attribute that would result in cropping the chart, cfchart uses a value that shows the entire chart without cropping.

AreaBarConeCurveCylinderHorizontalbarLinePyramidScatterStep

Axis type

XAxisType
sortXAxis

Whether the x axis corresponds to a numeric scale or identifies different categories, and how to sort the items on the axis.If the XAxisType attribute value is scale, the x axis is numeric. All cfchartdata item attribute values must be numeric, and the axis is automatically sorted numerically. The scale value lets you create graphs of numeric relationships, such as population against age.If the attribute value is category (the default), the axis indicates the data category. The sortXAxis attribute determines the order of items when you specify the cfchartdata item attribute, whose values are treated as text. By default, the items are displayed in the order in which they are entered in the first chart series.

AreaBarConeCurveCylinderHorizontalbarLinePyramidScatterStep

3D appearance

show3D
xOffset
yOffset

The show3D attribute displays the chart in three dimensions. The default value is no.The xOffset and yOffset attributes specify the amount by which to rotate the chart on a horizontal axis (xOffset) or vertical axis (yOffset). The value 0 is flat (no rotation), -1 and 1 are for a full 90 degree rotation left.(-1) or right (1). The default value is 0.1{{}}

All

Multiple series

showLegendseriesPlacement

The showLegend attribute lets you display the chart legend when the chart contains more than one series of data. The default value is Yes.The seriesPlacement attribute specifies the location of each series relative to the others. By default, ColdFusion determines the best placement based on the graph type of each series.

All

Tips

tipStyle
tipBGColor

The tipStyle attribute lets you display a small pop-up window that shows information about the chart element pointed to by the mouse pointer. Options are none, mousedown, or mouseover. The default value is mouseover.The tipBGColor attribute specifies the background color of the tip window for Flash format only. The default value is white.

All

You can also use the cfchartseries tag to specify attributes of chart appearance. The following table describes these attributes:

Chart characteristic

Attributes used

Description

Chart type

Multiple series

seriesLabel
seriesColor

The seriesLabel attribute specifies the text that displays for the series label.The seriesColor attribute specifies a single color of the bar, line, pyramid, and so on. For pie charts, the color is that of the first slice. Subsequent slices are automatically colored based on the specified initial color, or use the colorList attribute.

All

Paint

paintStyle

Specifies the way color is applied to a data series. You can specify solid color, raised button, linear gradient fill with a light center and darker outer edge, and gradient fill on lighter version of color. The default value is solid.

All

Data point colors

colorList

A comma-separated list of colors to use for each data point for bar, pyramid, area, horizontalbar, cone, cylinder, step, and pie charts.You can specify 16 color names, use any valid HTML color format, or specify an 8-digit hexadecimal value to specify the RGB value and transparency. If you use numeric format, use double number signs; for example, blue or ##FF33CC. To specify the color and transparency, use the format ##xxFF33CC, where xx indicates the transparency. The value FF indicates opaque; the value 00 indicates transparent. For the complete list of colors, see Configuring and Administering ColdFusion.If you specify fewer colors than data points, the colors repeat. If you specify more colors than data points, the extra colors are not used.

Pie

Data markers

markerStyle

Specifies the shape used to mark the data point. Shapes include circle, diamond, letterx, mcross, rcross, rectangle, snow, and triangle. Supported for two-dimensional charts. The default value is rectangle.

CurveLineScatter

Labels

dataLabelStyle

Specifies the way in which the color is applied to the item in the series Styles include None, Value, Rowlabel, Columnlabel, and Pattern.

All

Creating your own chart styles

You can create your own chart styles by doing either of the following:

  • Modifying the chart style using the JSON file. For more information, view cfcharts.
  • Using WebCharts3D to create chart styles

The following table lists the attributes of the cfchart and cfchartseries tags and the associated WebCharts3D commands:

Attribute

WebCharts3D command

chartHeight

Drag the chart by handles.

chartWidth

Drag the chart by handles.

dataBackgroundColor

Background: minColor (type must be PlainColor)

font

font: Family (specify only supported fonts)

fontBold

font: check Bold

fontItalic

font: check Italic

fontSize

font: Size

foregroundColor

foreground

gridlines

X-axis: labelcount

labelFormat

Y-axis: LabelFormat: Number | Percent | Currency | Datetime

markerSize

Elements: markerSize

pieSliceStyle

style: solid | slice

rotated

Type Frame chart: Elements: Shape:

scaleFrom

Yaxis: isAbsolute; scaleMin(int)

scaleTo

Yaxis: isAbsolute; scaleMax(int)

seriesPlacement

Elements: place

show3D

is3D

showBorder

Decoration: style (none or simple)?

showLegend

Legend: isVisible

showMarkers

Elements: showMarkers

showXGridlines

Frame: isVGridVisible

showYGridlines

Frame: isHGridVisible

tipbgColor

Popup: background

tipStyle

Popup: show on MouseOver | show on MouseDown | Disabled

url

Elements: action Series: action

xAxisTitle

X-axis: TitleStyle: text (enter text)

xAxisType

X-axis: type: (category or scale)

xOffset

Frame: xDepth

yAxisTitle

Y-axis: TitleStyle: text (enter text)

yAxisType

Currently has no effect.

yOffset

Frame: yDepth

The following table lists the attributes of the cfchartseries tag and the associated WebCharts3D commands:

Attribute

WebCharts3D command

colorlist

Elements: series: Paint: color

markerStyle

Elements: series: Marker type: Rectangle | Triangle | Diamond | Circle | Letter | MCROSS | Snow | RCROSS

paintStyle

Paint: paint: Plain | Shade | Light

seriesColor

Elements: series: Paint: color

seriesLabel

Elements: series:

type

Type: Pie chart

Type Frame chart: Elements: Shape: Bar | Line | Pyramid | Area | Curve | Step | Scatter | Cone | Cylinder | Horizontalbar

 

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy