Client-side charting in ColdFusion 10
Created
21 May 2012
Requirements
Prerequisite knowledge
Basic understanding of ColdFusion and charting.
User level
All
Required products
- ColdFusion (Download trial)
Sample files
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).
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>
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>
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>
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>
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.
More Like This
- ColdFusion powered Ajax - Part 1: Coding auto-suggest and select controls
- An overview of Ajax features in ColdFusion 8
- HTML5 WebSockets and ColdFusion – Part 1: An overview and first steps
- HTML5 WebSockets and ColdFusion -- Part 2: Coding a Hello World sample and extending it into a chat application
Tutorials & Samples |
Samples
ColdFusion Blogs |
More |
ColdFusion Cookbooks |
More |
