They say a picture is worth a thousand words; the benefits are even greater when it costs you virtually nothing to create the picture. Graphs are a powerful and effective way to convey information, and ColdFusion MX (CFMX) puts that power within easy reach of every CF developer. CFMX expands on the graphing capabilities introduced in ColdFusion 5. In this new version, Macromedia made some changes to the way graphing is accomplished and introduced several new graph types and functionalities. Let’s look at some new ways to build graphs with CFMX.

Creating a simple graph
CFMX’s graphing functions revolve around the <cfchart> tag and its subtags, <cfchartseries> and <cfchartdata>. Listing A shows a very simple <cfchart> call that will generate a pie chart.

The <cfchart> tag sets up the graph’s characteristics. In this example, I’m setting the format to flash, meaning that CFMX will produce a Flash movie for the graph. This allows pop-up dialogs for each data element to appear when you mouse over them. You can also set this to generate a .gif or .jpg image. In my example, I’m also setting the width and height, specifying a 3-D graph, and showing a border around the graphic.

The <cfchartseries> tag determines what data will be used in the graph. In this case, I’m feeding in data from the database query named expenses. By setting the itemColumn to expenseType, I’m telling CF that I want the query column expenseType to populate each piece of the pie chart. Similarly, using the query column expense for my valueColumn tells CF to use that column to calculate the size of each pie slice. When run, the generated graph will look similar to the one shown in Figure A.

Figure A
A simple pie chart

If you want to try out these examples of using query result sets in your graphs, there is a very handy CFMX custom tag called <cf_querysim> available at halhelms.com. This handy tag lets you easily create artificial query result sets instead of having to build a database and set up a datasource in the CF administrator. Listing B shows the querysim I used to create the expenses query.

 

Note about querysim

I didn’t want to go too far off topic, but using querysim makes it much easier to play with examples such as this one.

Graphing multiple sets of data
Being able to graph one set of data is great, but what if you need to convey more information than one set of data can provide? For example, say my fictitious company has three divisions, and I want to view the annual sales of each division over a 13-year period. I’ll query the database three times, once for each division, and return each year along with the division’s total sales for that year.

A pie graph wouldn’t really convey this information the way that I require, but a line graph would be a good choice. Naturally, <cfchart> can deliver many types of graphs, including line graphs. The code in Listing C will generate a line graph that shows each division and its annual sales over the years.

You can see that I am using three <cfchartseries> tags, one for each query result set that I want to graph. I’m also applying some formatting options, such as specifying each dataset’s line color and marker type. The resulting graph will look like the one shown in Figure B. It is worth pointing out how much information you can convey in a graph. The alternative to the image shown in Figure B would be long tables of numeric data, which can be confusing to sort out. A graph is a great way to show trends that might otherwise get lost in columns of numbers.

Figure B
The generated line graph

Specifying graph data
In addition to feeding data into a chart by using a query, you can also manually specify your graph data. Inside your <cfchartseries> tag(s), you can insert <cfchartdata> child tags to set your data values. So, you could build a graph with the code in Listing D.

The result would be a bar graph with four bars in it, one for each <cfchartdata> tag. Each of those bars would be set to the value you specified. You can also combine the use of <cfchartdata> with query result sets, further expanding your graphing options.

Chart settings in the ColdFusion Administrator
The CFMX Administrator offers several options for handling charting performance. These options are located in the Charting section. You can choose to cache charts to memory or to disk, specify disk cache location, or set the maximum number of images to cache. You can also specify how many server threads to devote to charting requests. If you expect heavy use of your charting application, you should experiment with various settings to optimize performance. As a general rule, caching to memory is faster but requires more processing time and server memory, while caching to disk is slower but gives you more space to work with.

I’ve demonstrated only a few of the graph types that CFMX supports. Other options include area graphs, scatter charts, pyramids, cones, and step graphs. You can even combine graph types, such as graphing some data as a line and other data as bars, on the same graph. Most Web application servers support graphing only through add-on products, and many of these cost a lot both in terms of money and development time. CFMX provides an integrated, robust, and simple mechanism to handle most graphing and charting tasks, right out of the box.