Click here to close now.

Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Maureen O'Gara, Nancy Y. Nee, Tad Anderson, Daniel Kaar

Related Topics: ColdFusion

ColdFusion: Article

Be Extremely Graphic

Be Extremely Graphic

More ColdFusion applications are running on intranets and extranets than just about anywhere else. This is not surprising - as ColdFusion makes data access and reporting so simple it is a natural fit for applications in these environments. And, as such, data reporting is one area that ColdFusion 5 addresses head-on with the introduction of a true graphing engine.

ColdFusion Graphing
ColdFusion developers have always wanted a way to graph data. And so back in Cold-Fusion 2 days, a series of Java applets were introduced to simplify the creation of common business graphs (pie charts, bar charts, etc.). These worked, but they had some serious limitations:

  • They were Java applets, and as such were not supported by all browsers.
  • They suffered from long download times and poor performance.
  • They could not be printed easily.
ColdFusion 5 solves the graphing problem in a very different way. Included with ColdFusion 5 is a version of Macromedia Generator - a high-performance, scalable, and proven graphics generation engine. Generator is designed to create dynamic images in a variety of formats using templates that are processed in real time.

And Generator does not need any client-side software because the file formats it creates are standard formats like JPEG (which are supported by all browsers automatically) - the only exception to this is Flash, the use of which is optional (although with over 96% of all browsers supporting Flash it is pretty standard too).

Now before you ask, no, you cannot (yet) extend or enhance the graphing features exposed to ColdFusion. Yes, Generator can do much more than has been made available at this time, and, at some point in the future, there likely will be a way to better utilize more of Generator within ColdFusion. But for now you have to use the charts and graphs explicitly defined in ColdFusion - and, fortunately, they'll do most of what you need, as you are about to see.

The <CFGRAPH> Tag
As you have come to expect of ColdFusion, the way you create graphs is by using a tag. And as you've also come to expect, that tag is intuitively named <CFGRAPH>. This seemingly simple tag hides all the complexity of creating all sorts of business graphs and charts with all sorts of options and features.

But instead of telling you about <CFGRAPH>, let's look at an example. Figure 1 shows a simple bar chart showing the relative prices of items for sale. (All of the data in these examples are taken from the databases and example applications in my new ColdFusion 5 Web Application Construction Kit.)

The code I used to create the graph is in Listing 1.

First I retrieved data with a basic <CFQUERY> - the query name is Merchandise, and the two columns retrieved are MerchName and MerchPrice. To create the graph, all I had to do was pass that data to <CFGRAPH> - QUERY takes the name of the query to be used, TYPE specifies the graph type (BAR, PIE, AREA, etc.), ITEMCOLUMN takes the name of the query column to use as the item name, and VALUECOLUMN takes the name of the column containing the value to use. Simple as that, and ColdFusion does the rest.

Note: ITEMCOLUMN and VALUECOLUMN take column names, not values, so don't place pound signs around the column names.

So what did that tag actually do? In Listing 2 is the code that was embedded in the generated output. I know it looks a little complex, but that is because it is invoking the Flash player so as to display the above graph in Flash format. In other words, the four lines of ColdFusion code in Listing 1 generated and embedded Flash content - without you having to learn anything about Flash.

And, no, you are not limited to generating Flash-based graphs. <CFGRAPH> can also generate JPEG and PNG images (not GIF though, sorry). But as I did not specify a format in my <CFGRAPH> tag, the default format was used, and the default is Flash.

Lots of Options
The previous example used a minimal set of options and attributes. This next example, in Listing 3, is quite the other extreme, using all sorts of attributes (far more than you'd typically use, but it helps make a point).

Again, I started with a <CF-QUERY>, this time retrieving recent items sold and a count of each. Then comes the <CFGRAPH> tag. The type is specified as PIE, the query name is provided; the format is set to "jpg" (otherwise the default of Flash would have been used); and explicit height and widths are specified along with background and border colors, border size, and 3D depth. And finally, label font and size, title text and font, and legend position and font are specified. The end result is seen in Figure 2.

As you can see, <CFGRAPH> is very flexible and highly configurable. And the Tag Editor seen in Figure 3 (available for ColdFusion Studio 4.5x as well as in ColdFusion Studio 5 when it is available) makes using these attributes a breeze.

Data Drill-Down
One other very important feature that I must mention is the ability to generate graphs that support data drill-down - that is, click on a pie slice or chart bar and go to a URL that provides additional (or more detailed) information.

<CFGRAPH> does not do this automatically, but it does provide a simple mechanism for associating URLs with graph components. Using this you can create your own drill-down interfaces by simply passing the URL of the next chart or graph to go to (see Listing 4).

This time the query retrieves a list of directors, and what they have been paid (converted into thousands by a division in the SELECT statement itself). The <CFGRAPH> tag is similar to the ones seen previously, although this one provides explicit colors (instead of using the defaults).

The important changes here are the last two attributes. URL takes the URL to go to if you click on a pie slice. But if the same URL is used for all slices, how would you know which slice was clicked? That's where the URLCOLUMN attribute comes in to play. It takes the name of a column, the value of which is appended to the URL specified in URL.

Here "details.cfm?- Name=" is the URL, and Name (whatever value is in column Name) is the URLCOLUMN. So, if the name were "Ben Forta" the generated URL for that slice would be "details.cfm?-Name=Ben+Forta". In other words, a unique URL is created for each slice by combining the fixed URL and a dynamic query column (see Figure 4).

Data drill-down is a valuable <CFGRAPH> feature, but it is important to note that it's available only when using Flash as the FORMAT (and not with JPG or PNG).

For Even Greater Control
You might have been wondering why <CFGRAPH> has a matching </CFGRAPH> tag. Well, this is why - <CFGRAPH> has a child tag named <CFGRAPHDATA> that can be used to explicitly populate graphs with data (without using the QUERY attribute). For example, the following creates a pie chart containing four pie slices:

<!--- Create graph --->
<CFGRAPH TYPE="pie">
<!--- Pie slices --->
<CFGRAPHDATA ITEM="G" VALUE="7">
<CFGRAPHDATA ITEM="PG" VALUE="28">
<CFGRAPHDATA ITEM="PG13" VALUE="16">
<CFGRAPHDATA ITEM="R" VALUE="31">
</CFGRAPH>

Of course, you can also use <CF-GRAPHDATA> to populate a graph with query data - to do this simply use a <CFLOOP> to loop through the query results and then call <CF-GRAPHDATA> for reach row like this:

<!--- Create graph --->
<CFGRAPH TYPE="bar">
<!--- Loop through data --->
<CFLOOP QUERY="Directors">
<!--- Add item to graph --->
<CFGRAPHDATA ITEM="#Name#" VALUE="#Paid#">
</CFLOOP>
</CFGRAPH>

Why would you ever want to do this? There are three primary reasons:

  1. <CFGRAPHDATA> takes an optional URL attribute that you can use to specify a totally unique URL for each data point (as opposed to using a single URL with just a different query string).
  2. <CFGRAPHDATA> takes an optional COLOR attribute that you can use for greater color control.
  3. By passing data manually to graphs you can use CFML formatting functions and other programmatic functions to manipulate the data as needed.
You don't have to use <CFGRAPHDATA> if you don't want to, but it's nice to know it's there when you need it.

Summary
<CFGRAPH> is one of the most exciting new features in ColdFusion 5, and one that is built on top of a proven and scalable product - Macromedia Generator. With multiple graph types, three output formats, and dozens of configuration options, <CFGRAPH> proves once again that Macromedia and the ColdFusion team know what developers want, and are deeply committed to providing it.

More Stories By Ben Forta

Ben Forta is Adobe's Senior Technical Evangelist. In that capacity he spends a considerable amount of time talking and writing about Adobe products (with an emphasis on ColdFusion and Flex), and providing feedback to help shape the future direction of the products. By the way, if you are not yet a ColdFusion user, you should be. It is an incredible product, and is truly deserving of all the praise it has been receiving. In a prior life he was a ColdFusion customer (he wrote one of the first large high visibility web sites using the product) and was so impressed he ended up working for the company that created it (Allaire). Ben is also the author of books on ColdFusion, SQL, Windows 2000, JSP, WAP, Regular Expressions, and more. Before joining Adobe (well, Allaire actually, and then Macromedia and Allaire merged, and then Adobe bought Macromedia) he helped found a company called Car.com which provides automotive services (buy a car, sell a car, etc) over the Web. Car.com (including Stoneage) is one of the largest automotive web sites out there, was written entirely in ColdFusion, and is now owned by Auto-By-Tel.

Comments (3) View Comments

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.


Most Recent Comments
Jeff 01/09/03 12:29:00 PM EST

I am creating an ecomm. site. I have a situation. If a user has opted to purchase 2 items and then once the user gets to the confirmation page the user decide that he / she would like to purchase 4 items instead of 2. Can this page be dynamically upadate without the use of an update button. ie. the page refreshes once the user changes the amount

NAJIH 12/09/02 11:13:00 AM EST

Hello

I am in france .

I want to programme a

Bill Song 02/21/02 02:36:00 PM EST

We have a site with frames, left menu, right top logo, right bottom content, with graghics. When Mac user loading the page, it always spinning even after the loading of the left menu which is larger in size than the right part. Actually, that part does not load until the user hit stop button or another link then click home page button. The web server is NT, and the ie browser is 4.5 for Mac. Any solution? pls help. Thanks.

@ThingsExpo Stories
Health care systems across the globe are under enormous strain, as facilities reach capacity and costs continue to rise. M2M and the Internet of Things have the potential to transform the industry through connected health solutions that can make care more efficient while reducing costs. In fact, Vodafone's annual M2M Barometer Report forecasts M2M applications rising to 57 percent in health care and life sciences by 2016. Lively is one of Vodafone's health care partners, whose solutions enable older adults to live independent lives while staying connected to loved ones. M2M will continue to gr...
SYS-CON Events announced today that Ciqada will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Ciqada™ makes it easy to connect your products to the Internet. By integrating key components - hardware, servers, dashboards, and mobile apps - into an easy-to-use, configurable system, your products can quickly and securely join the internet of things. With remote monitoring, control, and alert messaging capability, you will meet your customers' needs of tomorrow - today! Ciqada. Let your products take flight. For more inform...
Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 16th Cloud Expo at the Javits Center in New York June 9-11 will find fresh new content in a new track called PaaS | Containers & Microservices Containers are not being considered for the first time by the cloud community, but a current era of re-consideration has pushed them to the top of the cloud agenda. With the launch of Docker's initial release in March of 2013, interest was revved up several notches. Then late last...
Dave will share his insights on how Internet of Things for Enterprises are transforming and making more productive and efficient operations and maintenance (O&M) procedures in the cleantech industry and beyond. Speaker Bio: Dave Landa is chief operating officer of Cybozu Corp (kintone US). Based in the San Francisco Bay Area, Dave has been on the forefront of the Cloud revolution driving strategic business development on the executive teams of multiple leading Software as a Services (SaaS) application providers dating back to 2004. Cybozu's kintone.com is a leading global BYOA (Build Your O...
While not quite mainstream yet, WebRTC is starting to gain ground with Carriers, Enterprises and Independent Software Vendors (ISV’s) alike. WebRTC makes it easy for developers to add audio and video communications into their applications by using Web browsers as their platform. But like any market, every customer engagement has unique requirements, as well as constraints. And of course, one size does not fit all. In her session at WebRTC Summit, Dr. Natasha Tamaskar, Vice President, Head of Cloud and Mobile Strategy at GENBAND, will explore what is needed to take a real time communications ...
SYS-CON Media announced today that @WebRTCSummit Blog, the largest WebRTC resource in the world, has been launched. @WebRTCSummit Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @WebRTCSummit Blog can be bookmarked ▸ Here @WebRTCSummit conference site can be bookmarked ▸ Here
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...
SYS-CON Events announced today that BroadSoft, the leading global provider of Unified Communications and Collaboration (UCC) services to operators worldwide, has been named “Gold Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. BroadSoft is the leading provider of software and services that enable mobile, fixed-line and cable service providers to offer Unified Communications over their Internet Protocol networks. The Company’s core communications platform enables the delivery of a range of enterprise and consumer calling...
The IoT Bootcamp is coming to Cloud Expo | @ThingsExpo on June 9-10 at the Javits Center in New York. Instructor. Registration is now available at http://iotbootcamp.sys-con.com/ Instructor Janakiram MSV previously taught the famously successful Multi-Cloud Bootcamp at Cloud Expo | @ThingsExpo in November in Santa Clara. Now he is expanding the focus to Janakiram is the founder and CTO of Get Cloud Ready Consulting, a niche Cloud Migration and Cloud Operations firm that recently got acquired by Aditi Technologies. He is a Microsoft Regional Director for Hyderabad, India, and one of the f...
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
So I guess we’ve officially entered a new era of lean and mean. I say this with the announcement of Ubuntu Snappy Core, “designed for lightweight cloud container hosts running Docker and for smart devices,” according to Canonical. “Snappy Ubuntu Core is the smallest Ubuntu available, designed for security and efficiency in devices or on the cloud.” This first version of Snappy Ubuntu Core features secure app containment and Docker 1.6 (1.5 in main release), is available on public clouds, and for ARM and x86 devices on several IoT boards. It’s a Trend! This announcement comes just as...
What exactly is a cognitive application? In her session at 16th Cloud Expo, Ashley Hathaway, Product Manager at IBM Watson, will look at the services being offered by the IBM Watson Developer Cloud and what that means for developers and Big Data. She'll explore how IBM Watson and its partnerships will continue to grow and help define what it means to be a cognitive service, as well as take a look at the offerings on Bluemix. She will also check out how Watson and the Alchemy API team up to offer disruptive APIs to developers.
SYS-CON Events announced today that Litmus Automation will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Litmus Automation’s vision is to provide a solution for companies that are in a rush to embrace the disruptive Internet of Things technology and leverage it for real business challenges. Litmus Automation simplifies the complexity of connected devices applications with Loop, a secure and scalable cloud platform.
In 2015, 4.9 billion connected "things" will be in use. By 2020, Gartner forecasts this amount to be 25 billion, a 410 percent increase in just five years. How will businesses handle this rapid growth of data? Hadoop will continue to improve its technology to meet business demands, by enabling businesses to access/analyze data in real time, when and where they need it. Cloudera's Chief Technologist, Eli Collins, will discuss how Big Data is keeping up with today's data demands and how in the future, data and analytics will be pervasive, embedded into every workflow, application and infra...
As Marc Andreessen says software is eating the world. Everything is rapidly moving toward being software-defined – from our phones and cars through our washing machines to the datacenter. However, there are larger challenges when implementing software defined on a larger scale - when building software defined infrastructure. In his session at 16th Cloud Expo, Boyan Ivanov, CEO of StorPool, will provide some practical insights on what, how and why when implementing "software-defined" in the datacenter.
SYS-CON Media announced today that @ThingsExpo Blog launched with 7,788 original stories. @ThingsExpo Blog offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. @ThingsExpo Blog can be bookmarked. The Internet of Things (IoT) is the most profound change in personal and enterprise IT since the creation of the Worldwide Web more than 20 years ago.
The world's leading Cloud event, Cloud Expo has launched Microservices Journal on the SYS-CON.com portal, featuring over 19,000 original articles, news stories, features, and blog entries. DevOps Journal is focused on this critical enterprise IT topic in the world of cloud computing. Microservices Journal offers top articles, news stories, and blog posts from the world's well-known experts and guarantees better exposure for its authors than any other publication. Follow new article posts on Twitter at @MicroservicesE
SYS-CON Events announced today that robomq.io will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. robomq.io is an interoperable and composable platform that connects any device to any application. It helps systems integrators and the solution providers build new and innovative products and service for industries requiring monitoring or intelligence from devices and sensors.
Wearable technology was dominant at this year’s International Consumer Electronics Show (CES) , and MWC was no exception to this trend. New versions of favorites, such as the Samsung Gear (three new products were released: the Gear 2, the Gear 2 Neo and the Gear Fit), shared the limelight with new wearables like Pebble Time Steel (the new premium version of the company’s previously released smartwatch) and the LG Watch Urbane. The most dramatic difference at MWC was an emphasis on presenting wearables as fashion accessories and moving away from the original clunky technology associated with t...
SYS-CON Events announced today that Vicom Computer Services, Inc., a provider of technology and service solutions, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. They are located at booth #427. Vicom Computer Services, Inc. is a progressive leader in the technology industry for over 30 years. Headquartered in the NY Metropolitan area. Vicom provides products and services based on today’s requirements around Unified Networks, Cloud Computing strategies, Virtualization around Software defined Data Ce...