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
The Internet of Things is not new. Historically, smart businesses have used its basic concept of leveraging data to drive better decision making and have capitalized on those insights to realize additional revenue opportunities. So, what has changed to make the Internet of Things one of the hottest topics in tech? In his session at @ThingsExpo, Chris Gray, Director, Embedded and Internet of Things, discussed the underlying factors that are driving the economics of intelligent systems. Discover how hardware commoditization, the ubiquitous nature of connectivity, and the emergence of Big Data a...
"BSQUARE is in the business of selling software solutions for smart connected devices. It's obvious that IoT has moved from being a technology to being a fundamental part of business, and in the last 18 months people have said let's figure out how to do it and let's put some focus on it, " explained Dave Wagstaff, VP & Chief Architect, at BSQUARE Corporation, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
The major cloud platforms defy a simple, side-by-side analysis. Each of the major IaaS public-cloud platforms offers their own unique strengths and functionality. Options for on-site private cloud are diverse as well, and must be designed and deployed while taking existing legacy architecture and infrastructure into account. Then the reality is that most enterprises are embarking on a hybrid cloud strategy and programs. In this Power Panel at 15th Cloud Expo (http://www.CloudComputingExpo.com), moderated by Ashar Baig, Research Director, Cloud, at Gigaom Research, Nate Gordon, Director of T...
SYS-CON Events announced today that IDenticard 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. IDenticard™ is the security division of Brady Corp (NYSE: BRC), a $1.5 billion manufacturer of identification products. We have small-company values with the strength and stability of a major corporation. IDenticard offers local sales, support and service to our customers across the United States and Canada. Our partner network encompasses some 300 of the world's leading systems integrators and security s...
SYS-CON Events announced today that Windstream, a leading provider of advanced network and cloud communications, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Windstream (Nasdaq: WIN), a FORTUNE 500 and S&P 500 company, is a leading provider of advanced network communications, including cloud computing and managed services, to businesses nationwide. The company also offers broadband, phone and digital TV services to consumers primarily in rural areas.

ARMONK, N.Y., Nov. 20, 2014 /PRNewswire/ --  IBM (NYSE: IBM) today announced that it is bringing a greater level of control, security and flexibility to cloud-based application development and delivery with a single-tenant version of Bluemix, IBM's platform-as-a-service. The new platform enables developers to build ap...

The BPM world is going through some evolution or changes where traditional business process management solutions really have nowhere to go in terms of development of the road map. In this demo at 15th Cloud Expo, Kyle Hansen, Director of Professional Services at AgilePoint, shows AgilePoint’s unique approach to dealing with this market circumstance by developing a rapid application composition or development framework.
“In the past year we've seen a lot of stabilization of WebRTC. You can now use it in production with a far greater degree of certainty. A lot of the real developments in the past year have been in things like the data channel, which will enable a whole new type of application," explained Peter Dunkley, Technical Director at Acision, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
DevOps Summit 2015 New York, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait for long development cycles that produce software that is obsolete at launch. DevOps may be disruptive, but it is essential.
"People are a lot more knowledgeable about APIs now. There are two types of people who work with APIs - IT people who want to use APIs for something internal and the product managers who want to do something outside APIs for people to connect to them," explained Roberto Medrano, Executive Vice President at SOA Software, in this SYS-CON.tv interview at Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
Nigeria has the largest economy in Africa, at more than US$500 billion, and ranks 23rd in the world. A recent re-evaluation of Nigeria's true economic size doubled the previous estimate, and brought it well ahead of South Africa, which is a member (unlike Nigeria) of the G20 club for political as well as economic reasons. Nigeria's economy can be said to be quite diverse from one point of view, but heavily dependent on oil and gas at the same time. Oil and natural gas account for about 15% of Nigera's overall economy, but traditionally represent more than 90% of the country's exports and as...
The Internet of Things is a misnomer. That implies that everything is on the Internet, and that simply should not be - especially for things that are blurring the line between medical devices that stimulate like a pacemaker and quantified self-sensors like a pedometer or pulse tracker. The mesh of things that we manage must be segmented into zones of trust for sensing data, transmitting data, receiving command and control administrative changes, and peer-to-peer mesh messaging. In his session at @ThingsExpo, Ryan Bagnulo, Solution Architect / Software Engineer at SOA Software, focused on desi...
"At our booth we are showing how to provide trust in the Internet of Things. Trust is where everything starts to become secure and trustworthy. Now with the scaling of the Internet of Things it becomes an interesting question – I've heard numbers from 200 billion devices next year up to a trillion in the next 10 to 15 years," explained Johannes Lintzen, Vice President of Sales at Utimaco, in this SYS-CON.tv interview at @ThingsExpo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
"For over 25 years we have been working with a lot of enterprise customers and we have seen how companies create applications. And now that we have moved to cloud computing, mobile, social and the Internet of Things, we see that the market needs a new way of creating applications," stated Jesse Shiah, CEO, President and Co-Founder of AgilePoint Inc., in this SYS-CON.tv interview at 15th Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Gridstore™, the leader in hyper-converged infrastructure purpose-built to optimize Microsoft workloads, 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. Gridstore™ is the leader in hyper-converged infrastructure purpose-built for Microsoft workloads and designed to accelerate applications in virtualized environments. Gridstore’s hyper-converged infrastructure is the industry’s first all flash version of HyperConverged Appliances that include both compute and storag...
Today’s enterprise is being driven by disruptive competitive and human capital requirements to provide enterprise application access through not only desktops, but also mobile devices. To retrofit existing programs across all these devices using traditional programming methods is very costly and time consuming – often prohibitively so. In his session at @ThingsExpo, Jesse Shiah, CEO, President, and Co-Founder of AgilePoint Inc., discussed how you can create applications that run on all mobile devices as well as laptops and desktops using a visual drag-and-drop application – and eForms-buildi...
We certainly live in interesting technological times. And no more interesting than the current competing IoT standards for connectivity. Various standards bodies, approaches, and ecosystems are vying for mindshare and positioning for a competitive edge. It is clear that when the dust settles, we will have new protocols, evolved protocols, that will change the way we interact with devices and infrastructure. We will also have evolved web protocols, like HTTP/2, that will be changing the very core of our infrastructures. At the same time, we have old approaches made new again like micro-services...
Code Halos - aka "digital fingerprints" - are the key organizing principle to understand a) how dumb things become smart and b) how to monetize this dynamic. In his session at @ThingsExpo, Robert Brown, AVP, Center for the Future of Work at Cognizant Technology Solutions, outlined research, analysis and recommendations from his recently published book on this phenomena on the way leading edge organizations like GE and Disney are unlocking the Internet of Things opportunity and what steps your organization should be taking to position itself for the next platform of digital competition.
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
As the Internet of Things unfolds, mobile and wearable devices are blurring the line between physical and digital, integrating ever more closely with our interests, our routines, our daily lives. Contextual computing and smart, sensor-equipped spaces bring the potential to walk through a world that recognizes us and responds accordingly. We become continuous transmitters and receivers of data. In his session at @ThingsExpo, Andrew Bolwell, Director of Innovation for HP's Printing and Personal Systems Group, discussed how key attributes of mobile technology – touch input, sensors, social, and ...