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.


<cfchart
   format="png"
   scalefrom="0"
   scaleto="1200000">
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2006"
      seriescolor="blue">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="720310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1125123">
  </cfchartseries>
</cfchart>

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.


<cfchart
         format="png"
         scalefrom="0"
         scaleto="1200000">
	<cfchartseries
	             type="bar"
	             serieslabel="Website Traffic 2005"
	             seriescolor="##ffcc00">
		<cfchartdata item="January" value="245200">
		<cfchartdata item="February" value="420560">
		<cfchartdata item="March" value="488710">
		<cfchartdata item="April" value="686320">
		<cfchartdata item="May" value="763450">
		<cfchartdata item="June" value="825562">
	</cfchartseries>
	<cfchartseries
	             type="bar"
	             serieslabel="Website Traffic 2006"
	             seriescolor="blue">
		<cfchartdata item="January" value="503100">
		<cfchartdata item="February" value="720310">
		<cfchartdata item="March" value="688700">
		<cfchartdata item="April" value="986500">
		<cfchartdata item="May" value="1063911">
		<cfchartdata item="June" value="1125123">
	</cfchartseries>
</cfchart>

The above code results in the following chart:

3D Charts

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


<cfchart
         format="png"
         scalefrom="0"
         scaleto="1200000"
         show3d="Yes">
	<cfchartseries
	             type="bar"
	             serieslabel="Website Traffic 2005"
	             seriescolor="##ffcc00">
		<cfchartdata item="January" value="245200">
		<cfchartdata item="February" value="420560">
		<cfchartdata item="March" value="488710">
		<cfchartdata item="April" value="686320">
		<cfchartdata item="May" value="763450">
		<cfchartdata item="June" value="825562">
	</cfchartseries>
	<cfchartseries
	             type="bar"
	             serieslabel="Website Traffic 2006"
	             seriescolor="blue">
		<cfchartdata item="January" value="503100">
		<cfchartdata item="February" value="720310">
		<cfchartdata item="March" value="688700">
		<cfchartdata item="April" value="986500">
		<cfchartdata item="May" value="1063911">
		<cfchartdata item="June" value="1125123">
	</cfchartseries>
</cfchart>

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.


<cfchart
   format="png"
   scalefrom="0"
   scaleto="1200000"
   show3D="Yes"
   chartWidth="500"
   chartHeight="300">
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2006"
      seriescolor="blue">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="720310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1125123">
  </cfchartseries>
</cfchart>

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.


<cfchart
         format="png"
         scalefrom="0"
         scaleto="1200000"
         pieslicestyle="solid">
	<cfchartseries
	             type="pie"
	             serieslabel="Website Traffic 2006"
	             seriescolor="blue">
		<cfchartdata item="January" value="503100">
		<cfchartdata item="February" value="720310">
		<cfchartdata item="March" value="688700">
		<cfchartdata item="April" value="986500">
		<cfchartdata item="May" value="1063911">
		<cfchartdata item="June" value="1125123">
	</cfchartseries>
</cfchart>

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.

Bar
Line
Pyramid
Area
Cone
Curve
Cylinder
Step
Scatter
Pie

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/coldfusion/tutorial/coldfusion_charts.cfm">ColdFusion Charts</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites