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

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

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

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

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

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.

Client-side charting in ColdFusion 10

by Himavanth Rachamsetty

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Creating basic charts

Creating a Flash chart

Fallback

Custom JSON styles in charts

Creating a zoomable chart

Dynamically refreshing charts

Full refresh

Feed refresh

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Products

Download

Support & Learning

Buy

Company