|
|
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:
| | Website Traffic 2005 | | | January | | | 245,200 |
| | Website Traffic 2006 | | | January | | | 503,100 |
| | Website Traffic 2005 | | | February | | | 420,560 |
| | Website Traffic 2006 | | | February | | | 720,310 |
| | Website Traffic 2005 | | | March | | | 488,710 |
| | Website Traffic 2006 | | | March | | | 688,700 |
| | Website Traffic 2005 | | | April | | | 686,320 |
| | Website Traffic 2006 | | | April | | | 986,500 |
| | Website Traffic 2005 | | | May | | | 763,450 |
| | Website Traffic 2006 | | | May | | | 1,063,911 |
| | Website Traffic 2005 | | | June | | | 825,562 |
| | Website Traffic 2006 | | | June | | | 1,125,123 |
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:
| | Website Traffic 2005 | | | January | | | 245,200 |
| | Website Traffic 2006 | | | January | | | 503,100 |
| | Website Traffic 2005 | | | February | | | 420,560 |
| | Website Traffic 2006 | | | February | | | 720,310 |
| | Website Traffic 2005 | | | March | | | 488,710 |
| | Website Traffic 2006 | | | March | | | 688,700 |
| | Website Traffic 2005 | | | April | | | 686,320 |
| | Website Traffic 2006 | | | April | | | 986,500 |
| | Website Traffic 2005 | | | May | | | 763,450 |
| | Website Traffic 2006 | | | May | | | 1,063,911 |
| | Website Traffic 2005 | | | June | | | 825,562 |
| | Website Traffic 2006 | | | June | | | 1,125,123 |
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?
- Add this page to your Favorites
- Link to this page (copy/paste into your own website or blog):
- Help support Quackit by making a donation
Oh, and thank you for supporting Quackit!
|
|
