Requirements      
Prerequisite knowledge Required products
Sample files
User level
Basic understanding of ColdFusion and charting.
Adobe ColdFusion Enterprise Edition (2016 release) (Download trial) client-side-charting.zip
All

 

 

Increasingly, sites and applications use charts to depict data that can otherwise be hard for users to read and understand. A well-designed chart can do much to illustrate an idea. ColdFusion has had the charting feature for quite some time now. ColdFusion generated the charts at the server and sent the information to the client via a browser—which meant no interactivity and no dynamic updates to the chart. ColdFusion 10 introduces client-side charting, which delivers the capability of a high-level of interactivity, such as zooming in on information and re-rendering a chart based on dynamic updates, based on real-time data, such as stock prices.

 

Creating basic charts

 

Let's start with creating a basic bar chart. The following code creates a chart in ColdFusion 10. 

 

<cfchart format="html" type="bar" showlegend="false" height="400" width="300" title="Basic Chart"> <cfchartseries > <cfchartdata item="2009" value=20> <cfchartdata item="2010" value=40> <cfchartdata item="2011" value=60> </cfchartseries> </cfchart>

 

That is all it takes to create the following output (Figure 1).

 

Figure 1. Creating a basic chart
Figure 1. Creating a basic chart
 
To convert the above chart to 3D chart, all you need to do is specify the show3d attribute within the cfchart tag, as shown in the following example.
<cfchart format="html" type="bar" showlegend="false" height="400" width="300" title="3D Chart" show3d="true"> <cfchartseries> <cfchartdata item="2009" value=20> <cfchartdata item="2010" value=40> <cfchartdata item="2011" value=60> </cfchartseries> </cfchart>
Figure 2. Creating a 3D chart
Figure 2. Creating a 3D chart

 

Creating a Flash chart

 

Now you can convert this chart to a Flash chart by changing the format and specifying the renderer attribute within the cfchart tag, as follows.

 

format=”flash” renderer=”flash”

 

If you do not specify the renderer attribute, you will see the old server-side Flash chart.

 

<cfchart format="flash" renderer="flash" type="bar" showlegend="false" height="400" width="300" title="Flash Chart"> <cfchartseries> <cfchartdata item="2009" value=20> <cfchartdata item="2010" value=40> <cfchartdata item="2011" value=60> </cfchartseries> </cfchart>
Figure 3. Creating a Flash chart
Figure 3. Creating a Flash chart

 

Note that the Flash chart that ColdFusion renders is at the client and not at the server, like in previous versions of ColdFusion. This enables you to make highly interactive charts, since all the processing occurs at the client.

 

Fallback

 

ColdFusion 10 also provides a seamless fallback mechanism between HTML5 and Flash charts. If you set the format attribute of the cfchart tag to Flash and the browser does not support Flash, the chart will automatically fallback to HTML5 (and vice versa).

 

Custom JSON styles in charts

 

The new charting uses JSON-based styles, which are easily customizable. ColdFusion provides default styles for each type of chart, but you can override the style using your own style file. The following example uses a custom style file to customize the title's font and background.

The following shows the contents of a custom style file called, my_custom_style, which I included in the download available at the beginning of this tutorial:

 

 

{ "graphset" : [ { "type" : "bar", "title" : { "font-size" : 18, "color" : "#0000FF", "bold" : true, "font-family" : "Helvetica", "background-color" : "#cccccc", "border-color" : "#cccccc", "border-width" : 1 } } ] }

 

The following shows the contents of custom_style.cfm, which I included in the download available at the beginning of this tutorial:

 

<cfchart format="html" type="bar" showlegend="false" height="400" width="300" title="Custom Style Chart" style="my_custom_style"> <cfchartseries > <cfchartdata item="2009" value=20> <cfchartdata item="2010" value=40> <cfchartdata item="2011" value=60> </cfchartseries> </cfchart>
Figure 4. Using a custom style
Figure 4. Using a custom style

 

Notice the change in the title's font and background when compared with previous examples. There are many aspects of the chart that you can customize using a custom JSON style. Refer to the ColdFusion Help documentation for more information on the JSON attributes. The following examples show a few of the most common JSON attributes.

 

Creating a zoomable chart

 

One important feature of interactive charts is for users to be able to zoom in and out. You can do that by specifying the preview attribute of the chart.

 

<cfchart format="html" type="bar" showlegend="false" height="400" width="300" title="Basic Chart" preview=#{"visible":true}#> <cfchartseries> <cfchartdata item="2009" value=20> <cfchartdata item="2010" value=40> <cfchartdata item="2011" value=60> </cfchartseries> </cfchart>
Figure 5. Creating a zoomable chart
Figure 5. Creating a zoomable chart

 

Notice the preview at the bottom of the chart (Figure 5). The user can select the range of the chart that he/she wants to display by using the sliders in the preview.

 

Dynamically refreshing charts

 

A major use-case of dynamic charts is depiction of real-time data. In such cases, the chart needs to show new data at regular intervals of time.

You can achieve this in two ways: Through full refresh or feed refresh

Full refresh

 

When there is no relevance for the old values and the chart only needs to show the latest numbers, you can refresh the whole chart at regular intervals by using the full refresh chart. In such a chart, you need a URL from which the chart tries to get latest data at a specified interval.

Contents of _fullfeed.cfm:

 

<cfscript> values1 = values2 = values3 = "["; for (i=0;i<6;i++){ values1 = values1 & randrange(0, 20); if (i != 5) values1 = values1 & ", "; else values1 = values1 & "]"; } for (i=0;i<6;i++){ values2 = values2 & randrange(0, 20); if (i != 5) values2 = values2 & ", "; else values2 = values2 & "]"; } for (i=0;i<6;i++){ values3 = values3 & randrange(0, 20); if (i != 5) values3 = values3 & ", "; else values3 = values3 & "]"; } </cfscript> { "graphset" : [ { "type" : "bar", "refresh" : { "type" : "full", "interval" : 2 }, "title" : { "text" : "Full Refresh Chart" }, "series" : [ { "values" : <cfoutput>#values1#</cfoutput> }, { "values" : <cfoutput>#values2#</cfoutput> }, { "values" : <cfoutput>#values3#</cfoutput> }] }] }

 

Contents of fullrefreshchart.cfm:

 

<cfchart format="html" refresh="#{"type"="full","interval":"2","url":"_fullfeed.cfm"}#" > </cfchart>

 

In the above example, the chart pings the file _fullfeed.cfm every two seconds and the client side redraws the whole chart based on the new values.

 

Feed refresh

 

In cases where the chart needs to show a timeline-based depiction of data, such as stock prices, you can use a feed refresh chart. The chart only needs the new data for each series, which the client side appends to the existing chart.

Contents of _feed.cfm:

 

<cfscript> time = timeformat(now(),"MM-SS"); Plot0MinValue = (application.Plot0Value-2<0 ? 0 : application.Plot0Value-2); Plot1MinValue = (application.Plot1Value-2<0 ? 0 : application.Plot1Value-2); application.Plot0Value = randRange(Plot0MinValue, application.Plot0Value+2); application.Plot1Value = randRange(Plot1MinValue, application.Plot1Value+2); feed = '{"scale-x" : "#time#","plot0" : #application.Plot0Value#,"plot1" : #application.Plot1Value#}'; writeoutput(feed); </cfscript>

 

Contents of feedrefreshchart.cfm:

 

<cfscript> application.Plot0Value = 50; application.Plot1Value = 50; </cfscript> <cfchart format="html" type="line" refresh=#{"type" : "feed","max-ticks" : 100,"url" : "_feed.cfm","interval" : 1,"reset-timeout":20000}# height=400 width=900 title="Refresh Chart" xaxistitle="Feature" yaxistitle="Estimate (in days)" showlegend="false" > <cfchartseries type="line" label="Plot0" > <cfchartdata item="#timeformat(now(), "MM-SS")#" value="50"> </cfchartseries> <cfchartseries type="line" label="Plot1" > <cfchartdata item="#timeformat(now(), "MM-SS")#" value="50"> </cfchartseries> </cfchart>

 

Note that this example uses the application scope to store the recent values of the plots.

 

Where to go from here

 

This article showed a few possible variants of client-side charts using the new charting features introduced in ColdFusion 10. To learn how to create more types of charts, please refer to ColdFusion 10 documentation.

 

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.