Web.QHMIT.com

ColdFusion Charts

ColdFusion provides several tags that gives you the ability to create charts and graphs.

To create a chart in ColdFusion, you use the <cfchart> tag in conjunction with the <cfchartseries> and <cfchartdata> tags.

Example cfchart

This example uses visitor data from the traffic logs of a website. This data is added to the <chartdata> tags. These are nested within <cfchartseries> tags, which provide properties about the data series.

The above code results in the following chart:

Multiple Series

You can add more than one series of data to a single chart. We will add another chart series to our example for the previous year's traffic. That way, we can compare the two years side by side.

The above code results in the following chart:

3D Charts

You can add the show3d attribute to produce a 3d chart:

The above code produces the following 3D chart:

Changing the Chart Dimensions

Adding the chartHeight and chartWidth attributes enable you to change the height and width.

The above code results in the following chart:

Pie Charts

Pie charts are slightly different in that they are limited to a single series, and the data items are represented as slices of the pie - all of which contribute to the whole.

The above code results in the following pie chart:

You may have noticed the above code contains pieslicestyle="solid". The default value is pieslicestyle="sliced". Here's what that would look like:

Other Chart Types

You can create any of the following types of charts, simply by using this value in the type attribute of the <cfchartseries> tag.

You can see what each of these look like on the cfchart examples page.