What are Coldfusion Charts?

Coldfusion charts are used to display data in a more graphical way. Coldfusion charts can take many forms and i ill be taking you through all you need to know about them and what they can be used for.

First of all i will start by explaining the the charts can come in three different formats, Flash, JPG and PNG.

In My opinion flash charts are the way to go, they can be 3D and dynamic but still easy to understand, also because they are flash they are interactive. They will, if you want them to, display a tool tip of the data that you are showing when you mouseover that value.

JPG and PNG charts are basically an image file that is generated dynamically when the page loads with up to date information. these can be used more for front end websites where the flash forms are more suited to admin panels and statistics. But saying that i have used flash charts in a rating script, in which a tutorial will be coming soon.

The Syntax

Here is a breakdown of the syntax for the cfchart tag.

 chartHeight = "integer number of pixels"
 chartWidth = "integer number of pixels"
 dataBackgroundColor = "hexadecimal value|web color"
 font = "font name"
 fontBold = "yes|no"
 fontItalic = "yes|no"
 fontSize = "font size"
 foregroundColor = "hexadecimal value|web color"
 format = "flash|jpg|png"
 gridlines = "integer number of lines"
 labelFormat = "number|currency|percent|date"
 markerSize = "integer number of pixels"
 name = "string"
 pieSliceStyle = "solid|sliced"
 scaleFrom = "integer minimum value"
 scaleTo = "integer maximum value"
 seriesPlacement = "default|cluster| stacked|percent"
 show3D = "yes|no"
 showBorder = "yes|no"
 showLegend = "yes|no"
 showMarkers = "yes|no"
 showXGridlines = "yes|no"
 showYGridlines = "yes|no"
 sortXAxis = "yes|no"
 tipBGColor = "hexadecimal value|web color"
 tipStyle = "MouseDown|MouseOver|none"
 title = "title of chart"
 url = "onClick destination page"
 xAxisTitle = "title text"
 xAxisType = "scale|category"
 xOffset = "number between -1 and 1"
 yAxisTitle = "title text"
 yAxisType = "scale|category"
 yOffset = "number between -1 and 1">