Get started with cfchart

The cfchart tag in ColdFusion is used to generate and display charts. It can be used to create various types of charts, such as bar, line, pie, area, horizontal bar, cone, curve, cylinder, step, scatter, and other charts.

Category

Data output tags, Extensibility tags

Syntax

See also

cfchartdata ,  cfchartseries ,  cfdocument , Controlling chart appearance in the Developing ColdFusion Applications

History

Attributes

Usage

The  cfchart  tag defines a container in which a graph displays: its height, width, background color, labels, and so on. The  cfchartseries  tag defines the chart style in which data displays: bar, line, pie, and so on. The  cfchartdata  tag defines a data point.Data is passed to the  cfchartseries  tag in the following ways:

• As a query
• As data points, using the  cfchartdata  tag
  For the font attribute value ArialUnicodeMS, the following rules apply:
• In UNIX, for all type values, to render a double-byte character set, select this value.
• If this value is selected, the fontBold and fontItalic attributes have no effect.
  The following table lists W3C HTML 4 named color value or hexadecimal values that the color attribute accepts:

For all other color values, enter the hexadecimal value. You can enter a six-digit value, which specifies the RGB value, or an eight-digit value, which specifies the RGB value and the transparency. The first two digits of an eight-digit hexadecimal value specify the degree of transparency, with FF indicating opaque and 00 indicating transparent. Values between 00 and FF are allowed.
For more color names that are supported by popular browsers, go to www.w3.org/TR/css3-color. You can specify whether charts are cached in memory, the number of charts to  cache,  and the number of  chart  requests that ColdFusion can process concurrently. To set these options in the ColdFusion Administrator, select Server Settings>Charting.
The following attributes are not supported: format,  labelformat ,  seriesplacement  with percent as the value, sort, xAxis, url , xAxisType, xOffset, yAxisType, and yOffset.

Quickly create a chart 

This section runs through creating a basic bar and pie chart. It’s meant to paint the big picture and suggest a workflow, before we descend into the detailed treatment of the key components of creating a chart using the cfchart tag.  

Let’s get started with creating a bar chart. 

For a simple bar chart, you'll need some data to represent. You can use hard-coded values or retrieve data from a database using <cfquery>. 

On similar lines, create a pie chart.

As you’d defined the data for the bar chart, do the same here:

Basics of cfchart

Basic syntax and structure 

In ColdFusion, the cfchart tag is used to create charts and graphs within your applications. The basic syntax of the cfchart tag involves specifying the chart type, chart data, and various other attributes to customize the appearance and functionality of the chart. Here's an overview of the basic syntax of cfchart in ColdFusion: 

Different types of charts in ColdFusion

1. Pie Chart: Displays data in a circular graph, illustrating the proportions of a whole.
2. Bar Chart: Uses rectangular bars to compare values across categories or display data trends over time.
3. Line Chart: Shows data trends or changes over a continuous interval using lines connecting data points.
4. Scatter Chart: Represents data points on a two-dimensional plane to demonstrate correlations or distributions.
5. Area Chart: Like a line chart, the area below the line is filled, emphasizing the cumulative effect of changing values.
6. Bubble Chart: Displays data in bubbles (or spheres) with different sizes to represent multiple data dimensions.
7. Gauge Chart: Illustrates data within a gauge-like format, often used to display progress or performance metrics.
8. Column Chart: Like a bar chart, the bars are vertically oriented.
9. Stacked Chart: Shows multiple data series stacked on top of one another to compare total values and their constituents.
10. Bullet chart: A bullet chart is a bar chart designed to display performance data efficiently. It encodes multiple data elements, including an observed value, a target value, and a range of values for grading. This chart type is ideal for making comparisons, such as measuring progress against a target or series of thresholds.
11. Cone chart: A cone chart is a data visualization tool used to represent portions or percentages of a whole, similar to pie charts. However, cone charts also display hierarchy, with the highest value at the top of the cone, which has the most expansive area.
12. Pyramid Chart: A pyramid chart is a visual representation showing a series of steps or categories in a hierarchical order, arranged in a triangle shape. It's often used to illustrate processes, systems, or population distribution.
13. Box Plot: A box plot displays information such as the median, quartiles, and potential outliers. It helps compare the distribution of data across different categories or groups.
14. Donut: A donut chart is a circular chart like a pie chart but with a hole in the center. This hole creates a ring-like appearance, from where the name "donut" comes. Donut charts represent proportions or percentages of a whole within a data set, like pie charts.
15. Histogram: A histogram represents numerical data that shows the frequency distribution of data points across a continuous range of numerical values.
16. Floating Bar: A floating bar chart visually represents numerical data where the bars don't start at zero on the Y-axis. Instead, the bars are positioned at a specific value on the Y-axis, which can be different for each bar. This type of chart is proper when comparing values that are not zero-based, such as changes in a value over time or comparing two different sets of data with different starting points.
17. Vertical Area chart: A vertical area chart is a type of chart that displays quantitative data by using continuous lines, like a line chart. However, the area beneath the lines is filled with a particular color for each series, making it easier to emphasize changes in values from several sets of similar data. 
18. Stepped area: A Stepped Area is a type of chart that displays data points connected by horizontal and vertical line segments, resembling the steps of a staircase.
19. Curved area: A curved area chart displays data points connected by curved lines rather than straight lines. This chart type helps smooth out the data and make it easier to visualize trends.

Provide data to the cfchart tag

Use static data

You can use static data to generate a chart using the cfchart tag in ColdFusion by providing the data directly within the chart and series tags. This way, you can create a chart without linking it to a data source such as a query.

Follow the steps below to use static data for charts:

1. Define the data you want to display in the chart. This can be done by creating an array or a structure containing the data points you wish to visualize.
2. Use the cfchart tag in your ColdFusion code to create the chart. Specify the type of chart you want to generate (e.g., pie, bar, line) and provide the data you defined in step 1 as the source for the chart.
3. You can customize the chart's appearance by setting attributes such as colors, labels, titles, and legends within the cfchart tag.
4. Render the chart in your ColdFusion application by including the cfchart tag within your ColdFusion page or template.

Example

In this example:

• The cfchart tag creates an area chart with specified dimensions (chartheight and chartwidth) and a title (title).
• The type attribute of the cfchart tag is set to "area", indicating that the chart should be an area chart.
• The cfchartseries tag defines the type of the series as "area".
• Inside the cfchartseries tag, the cfchartdata tags specify the data points to be plotted. Each cfchartdata tag specifies an item (x-axis value) and a value (y-axis value) for each data point.

Use data from a database

To create a chart using the cfchart tag in ColdFusion with data from a database, you first need to fetch the data from the database using a cfquery tag. Once you have the data in a query object, you can use it in the cfchart and cfchartseries tags to generate the chart.

Here's an example of how you might create an area chart using data from a database:

Customize charts

Using the cfchart tag, you can customize your charts for the following purposes:

• Charts help represent data visually, making it easier to interpret trends, patterns, and comparisons. This is especially useful for complex datasets.
• Customized charts provide a more engaging and interactive user experience. 
• Customization options allow you to emphasize specific aspects of the data, such as highlighting particular series, categories, or points of interest.
• By customizing charts, you can make them more accessible for users with different needs, such as adjusting color schemes for color blindness.
• Customizing charts allows you to align them with your brand's colors, fonts, and style, providing a consistent visual identity across your application.
• Customized charts can present data in a specific context, such as reports, dashboards, or data-driven applications.
• ColdFusion's charting capabilities offer customization options such as tooltips, legends, and labels, which provide more information and interactivity to the end user.
• Customization allows you to combine different chart types (e.g., bar, line, pie) and series in a single chart, allowing for more nuanced data presentations.

Custom JSON styles in charts

The cfchart tag uses JSON-based styles, which are easily customizable. ColdFusion provides default styles for each type of chart, but you can override the style using your own style file. The following example uses a custom style file to customize the title's font and background.

You can define the customization of a chart in ColdFusion using the cfchart tag and a JSON object for styling options. ColdFusion's cfchart tag supports a graphset attribute, which can take a JSON string as its value. This allows you to specify various customization options for the chart, including chart type, dimensions, colors, titles, labels, and other visual settings.

Here’s an example demonstrating how to create a line chart using the cfchart tag with data from a JSON string and customization defined in a JSON object using the graphset attribute:

my_custom_style.json

Use the JSON in the cfm file, as shown below:

Output