Whatever message this page gives is out now! Go check it out!
Create a pie chart in ColdFusion
Last update:
May 18, 2026
A pie chart is a type of graph that represents data in a circular format, illustrating the proportions of a whole. Each slice of the pie represents a part of the whole, making it easy to see the relative sizes of different categories. The sum of all the data in a pie chart is equal to 360 degrees, and the total value of the pie is always 100%
Creating a pie chart using the cfchart tag in ColdFusion involves setting up the chart data within cfchartseries and specifying the chart type as "pie".
Here's an example of creating a basic pie chart using the cfchart tag with data from the <cfchartseries> tag.
<cfchart format="png" chartWidth="600" chartHeight="400" pieSliceStyle="sliced">
<cfchartseries type="pie" serieslabel="Website Traffic 2016">
<cfchartdata item="January" value="#randRange(500000,1000000)#">
<cfchartdata item="February" value="#randRange(500000,1000000)#">
<cfchartdata item="March" value="#randRange(500000,1000000)#">
<cfchartdata item="April" value="#randRange(500000,1000000)#">
<cfchartdata item="May" value="#randRange(500000,1000000)#">
<cfchartdata item="June" value="#randRange(500000,1000000)#">
</cfchartseries>
</cfchart>Let's deconstruct the snippet.
- The data for the chart comes from the cfchartseries tag. Inside the cfchartseries tag, the data for each slice of the pie is supplied by the cfchartdataitem tag. Each item in the tag represents a month and is a random number between 500K to 1M.
- The output is a png with a size of 600x400.
You can create a pie chart using hard-coded values in cfchartdata, as shown below:
<cfchart format="png" chartWidth="600" chartHeight="400" pieSliceStyle="sliced">
<cfchartseries type="pie" serieslabel="Website Traffic 2016">
<cfchartdata item="January" value="#randRange(500000,1000000)#">
<cfchartdata item="February" value="#randRange(500000,1000000)#">
<cfchartdata item="March" value="#randRange(500000,1000000)#">
<cfchartdata item="April" value="#randRange(500000,1000000)#">
<cfchartdata item="May" value="#randRange(500000,1000000)#">
<cfchartdata item="June" value="#randRange(500000,1000000)#">
</cfchartseries>
</cfchart>Output
Create a pie chart using data from a database
You can also import data from a database and create a chart pie based on a column of values.
<cfquery name="qEmployee" datasource="cfdocexamples" maxRows="6">
SELECT FirstName, LastName, Salary FROM EMPLOYEE
</cfquery>
<cfchart format="html" pieslicestyle="solid" chartWidth="600" chartHeight="400">
<cfchartseries query="qEmployee" type="pie" serieslabel="Salary Details 2016" valuecolumn="Salary" itemcolumn="FirstName">
</cfchartseries>
</cfchart>Output
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Share additional feedback to help us improve.
0/255
|
