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.

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.