Welcome!

ColdFusion Authors: Greg Ness, Liz McMillan, Pat Romanski, Andreas Grabner, David Strom

Related Topics: ColdFusion

ColdFusion: Article

Not Your Father's Charting

A guide to the revamped ColdFusion MX 7 charting feature

Since charting was first added to ColdFusion back in version 5, it has consistently provided a lot of customer feedback - both positive and negative. We listened to all of the comments and studied the long enhancement list. Developers are sure to be pleased with the number of charting wishes that have been fulfilled in ColdFusion MX 7. Charting isn't a new feature, but we've definitely given it an "extreme makeover" for this release!

Charts with Style
Did you know that there are more than 45 attributes used to define charts with CFCHART and its subtags? This makes for messy code and a big challenge to get all of your site's charts to share a consistent look and feel. In ColdFusion MX 7, we've added the idea of chart "styles." These are external definitions of all information to specify a chart's look and behavior. All you need to do in your CFM pages now is specify the data and which style to use. Of course, you can still use the old, familiar attributes as well. It's your choice.

ColdFusion MX 7 ships with a number of chart styles pre-defined and named for the color scheme that they use: beige, blue, red, silver, yellow, and a default style. They are stored in an XML file, and you can see them in your cfusion\charting\styles directory. Any of these styles can be used by name in any ColdFusion template. For example:


<cfchart style="silver">
...
</cfchart>

These styles look pretty nice, but there are many ways that you can customize them beyond the colors they use. The simplest way is to modify one of these built-in styles. In addition, you can use the WebCharts 3D Desinger tool, included in ColdFusion MX 7, to create your own from scratch.

If you want to modify one of the basic styles, open it in any text editor, make your changes, and save it with a new name. If you keep it in the cfusion\charting\styles directory, ColdFusion pages can call it with the new name (myChart.xml = <cfchart style="myChart">) or you can save it elsewhere and call it in the same way you use cfinclude (e.g. a web directory or mapping). So, c:\inetpub\wwwroot\charts\myChart.xml = <cfchart style="\charts\myChart.xml">).

The WebCharts3D Designer, created by GreenPoint, Inc., is a tool with advanced style creation and editing that you can use to create far more customized charts. You can use the tool by following these steps:

  1. Start WebCharts3D by running the webcharts.bat file in the CFusionMX7\charting directory.
  2. Select the type of chart you'd like to use.
  3. On the design tab, make the changes you want to the chart's appearance. (There is a help tab with a chapter called "Designer" that also contains information on using the tool.)
  4. Click on the XML Style tab.
  5. Click the save button.
  6. Name the style with a .xml extension (myChartStyle.xml).
You can then use the style above by either saving it to cfusion\charting\styles or another directory.

With custom chart styles, we should be able to finally say goodbye to the days of users needing to ask Macromedia, "Can you add an attribute to let me configure such and such?" Now you can control every small detail of your chart's look from colors and fonts to axis scales and number formatting and save it in an external file for easy reuse.

From Monochrome to Multicolor
Another item that was near the top of our CFCHART wish list is the ability to create bar charts in which each bar is a different color. With ColdFusion MX 7, it's not only possible, it's downright easy, thanks to the new colorList attribute of the chartseries tag.

Let's say you're creating a bar chart that shows sales for the previous four quarters. To remind your audience which quarter is which, you decide to color code the data by season with icy blue for winter, pink for spring, green for summer, and orange for fall. Your code would look something like this:


<cfchart>

 <cfchartseries type="bar" colorlist="3366FF,FF3399,green,FF6600">
  <cfchartdata item="winter" value="30">
  <cfchartdata item="spring" value="36">
  <cfchartdata item="summer" value="40">
  <cfchartdata item="autumn" value="33">
 </cfchartseries>

</cfchart>

ColdFusion will use each color in the color list for each successive individual bar. If you have more data items than colors in the list, it will start back at the beginning. Of course, you could also create a custom chart style as explained above with the colors you'd like, but this is a fast and easy way to override the colors in an individual series.

En-Title-ment
Support for specifying a chart title came in ColdFusion 5...and went in ColdFusion MX. But now it's back. For example,


	<cfchart title="Our Best Year Ever!"><cfchart>

proclaims the success of the past four quarters (which are neatly color coded by season!) And, by using a custom style, you can also have full control over the title placement, color, font, size, and more.

Charts in Reports...
As you know, ColdFusion MX 7 introduces the ability to deliver high-quality, structured reports. These reports can be fully integrated into web applications and provide users with well-formatted data that is easy to understand, print, and e-mail. It's structured business reporting power, otherwise only possible by using expensive, third-party reporting products.

Charts and graphs are very common in reports, so we wanted to bring to you the same superior charts that you can create with CFML in ColdFusion reporting. With the ColdFusion Report Builder, this is a simple task. ColdFusion Report Builder is a free, easy-to-use tool with a familiar, banded report writer interface that enables you to design structured, repeating-region reports for ColdFusion MX 7 applications.

If you want to insert a chart into your report, simply click Insert->Chart. This will bring up the Chart wizard, a full-featured visual chart builder which allows you to edit all of the attributes of the CFCHART tag. You can also use the built-in styles or any of the custom styles you have created for reuse. This way the charts in your report will have a consistent look and feel with the other charts on your site.

Summary
In figuring out what to improve in its charting makeover, Macromedia listened to its customers. With custom chart styles, there are virtually no limits to how finely you can control the look and feel of charts in your web applications. And it's simple to re-use them in all of your web pages or in new ColdFusion reports. Our CFCHART wish list may not be quite empty, but it's a lot shorter than it was before ColdFusion MX 7

More Stories By Tim Buntel

Tim Buntel is product manager for ColdFusion at Macromedia. His Web site is at www.buntel.com.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.