Thanks to the few users who acknowledged my last post on the topic of CFChart. I hope it has been (and will continue) useful to even more people. One particular developer, delta_mu, commented on a problem he was having when using the CFChart as explained in my post.

When a user reaches a page with cfcharts in flash format by clicking the browser ‘back’ button, instead of the original flash chart, an image that says “Image expired. Please refresh the page to view the image” is displayed.(Sample image shown below) Very clearly, not desirable.

The problem occurs for two reasons.

1. Lack of session management.
2. Short image caching duration.

When we use the cfchart tag to create a chart, coldfusion creates a temporary SWF or JPG or PNG image for display. If no session management is enabled, the cluster manager will send the user to a different server each time and hence there will not be any image to display. This can be prevented by enabling session management and the process is called session affinity.

However, in this user’s case, I doubt whether this was the case as he most probably uses a developer edition for such purposes and hence no clustering is involved as it is a single server setup. Thus it must be reason number two – The cache.

Once a request has been made, by default, the images will only kept for a duration of 5 seconds in the cache. Hence when the user hits the back button, the request no longer exists. This duration can be extended by following the few simple steps listed below, courtesy Prayank’s blog.

1. Stop the CFServer.
2. Open coldfusion x.x\lib\webcharts3d.xml
3. Find and change the values “minTimeOut” & “maxTimeOut”.
4. Restart the server.

Thats it. You are ready to go. But please remember that this solution is inefficient when you have a large number of charts to display.

Coldfusion makes it really simple to create and insert any kind of charts and other displays with the CFChart tag. While this is really an old feature(Available way back in ColdFusion 5), and little has been added to it in later versions, what many people don’t know is that it has now become much more efficient and actually holds its own against using client side JFQuery, CSS and other flash techniques. Cfchart is highly customizable and hence requires no need to involve designers or other javascript expert friends/colleagues whom you might need if you go for other methods. Below are some sample charts generated using CFChart with little styling options applied.

Now lets have a look at the code required to generate the above CFCharts.

<cfchart format=”png” name=”mychart” title=”Fruits Harvest” showlegend=”true”>
<cfchartseries type=”pie”>
<cfchartdata item=”Mangoes Harvest” value=”5000″/>
<cfchartdata item=”Oranges Harvest” value=”4000″/>
<cfchartdata item=”Apples Harvest” value=”3000″/>
<cfchartdata item=”Grapes Harvest” value=”2000”/>
</cfchartseries>
</cfchart>

The result of a query may directly be converted to a chart by using the code below. Coldfusion will generate the chart data items on its own from the query

<cfchartseries type=”bar” query=”data” itemcolumn=”name” valuecolumn=”sales”/>

Cfchart and Cfchartseries have a large number of attributes which maybe used to customize chart. You can check the complete list on Adobe Livedocs at http://bit.ly/cjiRPs and http://bit.ly/b3pioP

The type attribute of Cfchartseries is the most important among the list. It lets you choose from a wide array of chart types such as bar, line, pyramid, area, horizontalbar, cone, curve, cylinder, step, scatter and pie.

But what really takes the pie is the amount of styling options Coldfusion gives to the developers. Instead of setting each of the attributes, I found an easy way of doing this by modifying the built in style files in the folder cf_root\charting\styles and saving them under a new name to access. The style files are simple XML files and modifying them is really easy. One of the coolest attributes was the “show3D” attribute, which gives the chart a 3D effect. The appearance maybe modified to such extents that people will have a hard time figuring out it is custom generated and not designed by a web designer specifically.