Add Comment

Simple Charting with CFCHART Tutorial

ColdFusion Tutorial #3

This tutorial shows you how simple it is to chart data using CFCHART.

demo.cfm

This chart uses the default cfartgallery database.

The two invoke tags are simply invoking the query functions from chart.cfc and returning two query variables (artists and sold)

Now we begin the CFCHART tag.
First we select the format of the chart, in this case FLASH but other formats available are JPG and PNG.
Next we give the chart a title.
Chart height and chart width are in pixels.
The labelformat attribute describes the type of format the value is, in this case we have set it as number but other options are Currency, Date and Percent.
Showborder and show3d allow you to place a border around your chart and present the chart in 3D.
URL allows you to enter a URL to forward onto when a chart series is clicked, this is very useful for building 'drill-down' reports. The $ITEMLABEL$ parameter will be passed thru as a URL query string with the value of itemcolumn.

Now we start the CFCHARTSERIES tag. This tag (in this example) is using a query result for the data.
The most flexible part of this tag is the type attribute; with one simple change you can alter your chart dramatically.
This first example uses the PIE format but other options available are Bar, Line, Pyramid, Area, Horizontalbar, Cone, Curve, Cylinder, Step and Scatter.
The query attribute is the name of the query we wish to use in this chart series, in this case 'artists'.
Valuecolumn is the query field you wish to use as the value to graph. In this example we are using the total number of artworks for an artist.
Itemcolumn is the query field used to label the data you are graphing. In this example we are using the names of the artists.

Lastly we close the CFHART tag.

The second example is exactly the same as the first except we are using two CFCHARTSERIES tags as we are going to chart two 2 types of data over the top of one another.
This example uses a different format for each data set (bar and line) but the same format may be used.