Introduction
ColdFusion, an Adobe-owned scripting language, offers a wide range of powerful features, including the ability to create dynamic charts and graphs. This tutorial focuses on one such feature—the <cfchart> and <cfchartseries> tags—which allow developers to easily generate graphical representations of data retrieved from a database. Understanding how to use these tags can help enhance the visual presentation of data in web applications, making complex information easier to interpret.
This article explains how to use ColdFusion to create a bar chart that displays employee salaries. The chart pulls data from a database query and renders it as a dynamic image, which is displayed directly on a web page. In the following sections, we’ll break down each part of the code and explain its role in generating the chart.
Setting Up the Data Query
Before creating the chart, the data needs to be pulled from a data source. The <cfquery> tag is used here to retrieve employee data from the database. Specifically, it selects the FirstName and Salary fields from an EMPLOYEE table. The data source for this query is defined as cfdocexamples, and the number of results is limited to eight rows to keep the chart concise and easy to read. The result of this query is stored in a query object named qEmployee, which will later be used to populate the chart.
Creating the Chart with <cfchart>
The <cfchart> tag is responsible for generating the chart. In this example, the chart is set to be in a "jpg" format, meaning it will render as an image. Key attributes such as xaxistitle and yaxistitle are used to label the X and Y axes, with the first names of the employees displayed along the X-axis and the salaries shown along the Y-axis. The chartheight and chartwidth attributes control the dimensions of the chart, while the backgroundcolor and foregroundcolor settings adjust its color scheme. Notably, the show3d attribute is set to "yes," which adds a three-dimensional effect to the chart, making it more visually engaging.
Defining the Data Series with <cfchartseries>
The <cfchartseries> tag is where the actual data from the qEmployee query is linked to the chart. This tag specifies the type of chart series—in this case, a "bar" chart. The itemcolumn attribute is set to the FirstName field, which determines the labels that appear along the X-axis, while the valuecolumn is set to the Salary field, determining the height of each bar. The seriescolor attribute is used to set the color of the bars to a shade of green, giving the chart a distinct and professional look.
Visual Customization
ColdFusion allows developers to customize the visual appearance of charts extensively. In this example, several attributes have been defined to adjust the aesthetic properties of the chart. The background color is set to a dark gray (2F4F4F), while the foreground (including text and axis labels) is rendered in white (FFFFFF). The series bars are colored in a muted green (556B2F), which contrasts well against the darker background, making the data easy to read. Additionally, the use of the show3d="yes" attribute adds depth to the chart, making it more visually appealing.
Conclusion
Using ColdFusion’s <cfchart> and <cfchartseries> tags provides a straightforward way to incorporate dynamic charts into web applications. By leveraging database queries, you can easily populate charts with live data, ensuring that the visualizations are always up to date. This particular example illustrates how to create a simple bar chart that displays employee salaries, but ColdFusion supports many other chart types (e.g., pie charts, line charts) and customization options, offering flexibility for various data visualization needs.
Mastering these charting features allows developers to create more interactive and user-friendly applications, improving how information is communicated to end-users.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cfchartseries tag: how to use cfchartseries with cfchart in coldfusion</title>
</head>
<body>
<h2 style="color:DimGray; font-style:italic">cfchartseries example: how to use</h2>
<hr width="700" align="left" color="LightPink" />
<br />
<cfquery name="qEmployee" datasource="cfdocexamples" maxrows="8">
SELECT FirstName, LastName, Salary FROM EMPLOYEE
</cfquery>
<cfchart
format="jpg"
xaxistitle="First Name"
yaxistitle="Salary"
chartheight="400"
chartwidth="700"
backgroundcolor="2F4F4F"
foregroundcolor="FFFFFF"
show3d="yes"
>
<cfchartseries
query="qEmployee"
type="bar"
itemcolumn="FirstName"
valuecolumn="Salary"
seriescolor="556B2F"
>
</cfchartseries>
</cfchart>
</body>
</html>
