You will be redirected in 30 seconds or close now.

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

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.

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 --->
<!--- Pie slices --->

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 --->
<!--- Loop through data --->
<CFLOOP QUERY="Directors">
<!--- Add item to graph --->

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.

<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


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
DevOps is being widely accepted (if not fully adopted) as essential in enterprise IT. But as Enterprise DevOps gains maturity, expands scope, and increases velocity, the need for data-driven decisions across teams becomes more acute. DevOps teams in any modern business must wrangle the ‘digital exhaust’ from the delivery toolchain, "pervasive" and "cognitive" computing, APIs and services, mobile devices and applications, the Internet of Things, and now even blockchain. In this power panel at @...
In his general session at 18th Cloud Expo, Lee Atchison, Principal Cloud Architect and Advocate at New Relic, discussed cloud as a ‘better data center’ and how it adds new capacity (faster) and improves application availability (redundancy). The cloud is a ‘Dynamic Tool for Dynamic Apps’ and resource allocation is an integral part of your application architecture, so use only the resources you need and allocate /de-allocate resources on the fly.
SYS-CON Events announced today that SoftNet Solutions will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. SoftNet Solutions specializes in Enterprise Solutions for Hadoop and Big Data. It offers customers the most open, robust, and value-conscious portfolio of solutions, services, and tools for the shortest route to success with Big Data. The unique differentiator is the ability to architect and ...
SYS-CON Events announced today that Embotics, the cloud automation company, will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Embotics is the cloud automation company for IT organizations and service providers that need to improve provisioning or enable self-service capabilities. With a relentless focus on delivering a premier user experience and unmatched customer support, Embotics is the fas...
SYS-CON Events announced today that MathFreeOn will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. MathFreeOn is Software as a Service (SaaS) used in Engineering and Math education. Write scripts and solve math problems online. MathFreeOn provides online courses for beginners or amateurs who have difficulties in writing scripts. In accordance with various mathematical topics, there are more tha...
SYS-CON Events announced today that Niagara Networks will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Niagara Networks offers the highest port-density systems, and the most complete Next-Generation Network Visibility systems including Network Packet Brokers, Bypass Switches, and Network TAPs.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
@ThingsExpo has been named the Top 5 Most Influential Internet of Things Brand by Onalytica in the ‘The Internet of Things Landscape 2015: Top 100 Individuals and Brands.' Onalytica analyzed Twitter conversations around the #IoT debate to uncover the most influential brands and individuals driving the conversation. Onalytica captured data from 56,224 users. The PageRank based methodology they use to extract influencers on a particular topic (tweets mentioning #InternetofThings or #IoT in this ...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, will discuss how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team a...
Virgil consists of an open-source encryption library, which implements Cryptographic Message Syntax (CMS) and Elliptic Curve Integrated Encryption Scheme (ECIES) (including RSA schema), a Key Management API, and a cloud-based Key Management Service (Virgil Keys). The Virgil Keys Service consists of a public key service and a private key escrow service. 

OnProcess Technology has announced it will be a featured speaker at @ThingsExpo, taking place November 1 - 3, 2016, in Santa Clara, California. Dan Gettens, OnProcess’ Chief Analytics Officer, will discuss how Internet of Things (IoT) data can be leveraged to predict product failures, improve uptime and slash costly inventory stock. @ThingsExpo is an annual gathering of IoT and cloud developers, practitioners and thought-leaders who exchange ideas and insights on topics ranging from Big Data in...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, will discuss the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and ...
Successful digital transformation requires new organizational competencies and capabilities. Research tells us that the biggest impediment to successful transformation is human; consequently, the biggest enabler is a properly skilled and empowered workforce. In the digital age, new individual and collective competencies are required. In his session at 19th Cloud Expo, Bob Newhouse, CEO and founder of Agilitiv, will draw together recent research and lessons learned from emerging and established ...
There is growing need for data-driven applications and the need for digital platforms to build these apps. In his session at 19th Cloud Expo, Muddu Sudhakar, VP and GM of Security & IoT at Splunk, will cover different PaaS solutions and Big Data platforms that are available to build applications. In addition, AI and machine learning are creating new requirements that developers need in the building of next-gen apps. The next-generation digital platforms have some of the past platform needs a...
I'm a lonely sensor. I spend all day telling the world how I'm feeling, but none of the other sensors seem to care. I want to be connected. I want to build relationships with other sensors to be more useful for my human. I want my human to understand that when my friends next door are too hot for a while, I'll soon be flaming. And when all my friends go outside without me, I may be left behind. Don't just log my data; use the relationship graph. In his session at @ThingsExpo, Ryan Boyd, Engi...
Smart Cities are here to stay, but for their promise to be delivered, the data they produce must not be put in new siloes. In his session at @ThingsExpo, Mathias Herberts, Co-founder and CTO of Cityzen Data, will deep dive into best practices that will ensure a successful smart city journey.
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smar...
Two weeks ago (November 3-5), I attended the Cloud Expo Silicon Valley as a speaker, where I presented on the security and privacy due diligence requirements for cloud solutions. Cloud security is a topical issue for every CIO, CISO, and technology buyer. Decision-makers are always looking for insights on how to mitigate the security risks of implementing and using cloud solutions. Based on the presentation topics covered at the conference, as well as the general discussions heard between sessi...
19th Cloud Expo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterpri...