| By Tim Buntel | Article Rating: |
|
| May 18, 2005 01:00 PM EDT | Reads: |
13,947 |
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:
- Start WebCharts3D by running the webcharts.bat file in the CFusionMX7\charting directory.
- Select the type of chart you'd like to use.
- 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.)
- Click on the XML Style tab.
- Click the save button.
- Name the style with a .xml extension (myChartStyle.xml).
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
Published May 18, 2005 Reads 13,947
Copyright © 2005 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Tim Buntel
Tim Buntel is product manager for ColdFusion at Macromedia. His Web site is at www.buntel.com.
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Reader Sued
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Adobe Flex Developer Earns $100K in New York City
- Adobe LiveCycle Enterprise Suite 2 for Cloud Computing
- Adobe Cans Another 9% of its Workforce
- Adobe Betas Target RIAs and Cloud Computing
- Adobe MAX 2009 Online
- Thinking of Flex in London
- Moyea DVD4Web Converter V2.0 Converts DVD to FLV Fast and Synchronously with Watermarks
- Adobe & Salesforce Cut Cloud Deal
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Eval JavaScript in a Global Context
- Fig Leaf Software to Exhibit at Government IT Conference & Expo
- Is Microsoft as Free as Open Source?
- Cloud Computing Journal: Adobe to Deliver ColdFusion in the Cloud
- Adobe Reader Sued
- The Planet Named “Bronze Sponsor” of Cloud Computing Expo
- Microsoft Expression Web Has Got Game
- Adobe May Cooperate with Apple to Transplant Flash Player to iPhone
- Bruce Chizen Joins Voyager Capital as Venture Partner
- My Top Seven Wishes From Adobe MAX 2009
- Adobe Flex Developer Earns $100K in New York City
- The Next Programming Models, RIAs and Composite Applications
- Where Are RIA Technologies Headed in 2008?
- Constructing an Application with Flash Forms from the Ground Up
- AJAX World RIA Conference & Expo Kicks Off in New York City
- CFEclipse: The Developer's IDE, Eclipse For ColdFusion
- Personal Branding Checklist
- Adobe Flex 2: Advanced DataGrid
- Has the Technology Bounceback Begun?
- Building a Zip Code Proximity Search with ColdFusion
- i-Technology Viewpoint: We Need Not More Frameworks, But Better Programmers
- The Asynchronous CFML Gateway
- Web Services Using ColdFusion and Apache CXF



































