The ability to display data in a chart or graph can make data interpretation much easier. Rather than present a simple table of numeric data, you can display a bar, pie, line, or other applicable type of chart using colors, captions, and a two-dimensional or three-dimensional representation of your data.
The cfchart
tag, along with the tags cfchartseries
and cfchartdata
, provide many different chart types. The attributes to these tags let you customize your chart appearance.
You can create 11 types of charts in ColdFusion in two and three dimensions. The following figure shows a sample of each type of chart in two dimensions.
Note: Horizontal bar charts are bar charts rotated 90 degrees. In two dimensions, bar and cylinder charts appear the same, as do cone and pyramid charts.
To create a chart, you use the cfchart
tag along with at least one cfchartseries
tag. You can optionally include one or more cfchartdata
tags within a cfchartseries
tag. The following table describes these tags:
The following shows the basic code you use to create a chart:
<cfchart
<!--- optional attributes to cfchart ---> > <!--- one or more cfchartseries tags ---> <cfchartseries type="type" <!--- optional attributes to cfchartseries ---> /> <cfchartseries type="type" <!--- optional attributes to cfchartseries ---> > <!--- zero or more cfchartdata tags ---> <cfchartdata value="number" <!--- optional attributes to cfchartdata ---> > </cfchartseries> </chart>
Often, you use these tags to chart the data stored in a ColdFusion query. If you have a query that contains average salary information by department, the following code displays a bar chart that shows the data in the query:
<cfchart
xAxisTitle="Department" yAxisTitle="Salary Average" > <cfchartseries type="bar" query="DataTable" valueColumn="AvgByDept" itemColumn="Dept_Name" /> </cfchart>
In this example, the data from the query column AvgByDept supplies the data for the y-axis, and the query column Dept_Name provides the data for the x-axis.
The resulting chart looks like the following: