User Guide Cancel

Create a pie chart in ColdFusion

 

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>
<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>
<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>
<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>
<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

Pie chart
Pie chart

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>
<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>
<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

Pie chart from database
Pie chart from database

Get help faster and easier

New user?