Whatever message this page gives is out now! Go check it out!
Animations using cfchart
Last update:
May 18, 2026
Animations are visual effects applied to chart elements to create smooth transitions, movements, or incremental changes in data representation. These animations enhance interactivity and user experience by making the chart more engaging and dynamic.
ColdFusion simplifies the process of enabling animation by adding the 'animation' object inside the cfchartseries tag’s configuration" for better clarity. Also set the value of animate to TRUE.
Here's a basic structure:
"animation":
{
"effect"=7,
"delay"=1,
"method"=1,
"sequence"=2,
"speed"="100",
"animate"=true,
}For example, using cfscript:
<cfscript>
"animation"={
"effect"=7,
"delay"=1,
"method"=1,
"sequence"=2,
"speed"="100",
"animate"=true
}
</cfscript>Attributes
Effect : Defines the animation effect. Values range from 1-13 representing fade-in, slide, bounce, etc. The table lists the value of the effect to be specified and the type of effect.
Value | Effect |
1 | ANIMATION_FADE_IN |
2 | ANIMATION_EXPAND_VERTICAL |
3 | ANIMATION_EXPAND_TOP |
4 | ANIMATION_EXPAND_BOTTOM |
5 | ANIMATION_EXPAND_LEFT |
6 | ANIMATION_EXPAND_RIGHT |
7 | ANIMATION_EXPAND_HORIZONTAL |
8 | ANIMATION_SLIDE_LEFT |
9 | ANIMATION_SLIDE_RIGHT |
10 | ANIMATION_SLIDE_TOP |
11 | ANIMATION_SLIDE_BOTTOM |
12 | ANIMATION_UNFOLD_HORIZONTAL |
13 | ANIMATION_UNFOLD_VERTICAL |
Delay : Sets the time taken before the animation starts. The delay is in seconds or milliseconds. If you specify a number from 1 - 9, the delay will be measured in seconds.
Method : Defines the type of easing for the animation such as easeIn, easeOut, linear, etc. The value of method ranges from 0-5. The table lists the value of the method to be specified and the type of method.
Value | Method |
0 | ANIMATION_LINEAR |
1 | ANIMATION_BACK_EASE_OUT |
2 | ANIMATION_ELASTIC_EASE_OUT |
3 | ANIMATION_BOUNCE_EASE_OUT |
4 | ANIMATION_STRONG_EASE_OUT |
5 | ANIMATION_REGULAR_EASE_OUT |
Sequence : Determine the order of animation of your plot items. You can have it all animate in at once, in groups, or one plot node at a time. Values range from 0-3. The table lists the value of the sequence to be specified and the type of sequence.
Value | Sequence |
0 | ANIMATION_NO_SEQUENCE |
1 | ANIMATION_BY_PLOT |
2 | ANIMATION_BY_NODE |
3 | ANIMATION_BY_PLOT_AND_NODE |
Speed : Specifies the duration of the animation in seconds or milliseconds. If you specify a number from 1 - 9, the speed will be measured in seconds.
Add animation at the chart level
Add interactive chart animations by using the animation object within the <cfchart> tag.
For example, to create a bar chart with animation, you can use the following code:
<cfscript>
plot= {
animation= {
"effect"= 7,
"delay" = 3,
"method" = 1,
"animate" = TRUE
}
}
</cfscript>
<cfchart format="html" type="bar" markersize="5" height="600" width="800" showLegend="FALSE"
plot="#plot#" title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>Examples
Example 1- using effect attribute
<cfscript>
"animation"={
"effect"=7,
"animate"=TRUE
}
</cfscript>
<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE
title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca" animate="#animation#">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>- This script defines a struct that holds the animation settings for the chart.
- The effect key in the animation struct is 7, which makes the chart bars animate horizontally as they expand.
Example 2- using delay attribute
<cfscript>
"animation"={
"effect"=7,
"delay"=1,
"animate"=TRUE
}
</cfscript>
<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE
title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca" animate="#animation#">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>- The animation struct includes two properties:
- "effect"=7: The animation is 7, which represents a horizontal expansion effect.
- "delay"=1: Specifies a one-second delay before the animation begins. This means the bars will wait 1 second before animating horizontally.
Example 3- using method attribute
<cfscript>
"animation"={
"effect"=7,
"delay"=1,
"method"=1,
"animate"=TRUE
}
</cfscript>
<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE
title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca" animate="#animation#">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>- The animation struct includes:
- "effect"=7: Sets the animation type, where 7 corresponds to a horizontal expansion effect.
- "delay"=1: Sets a 1-second delay before the animation starts, so each bar begins animating after waiting for one second.
- "method"=1: Specifies the animation method. In ColdFusion chart animations, method 1 denotes an easing-out effect on the chart.
Example 4- using sequence attribute
<cfscript>
"animation"={
"effect"=7,
"delay"=1,
"method"=1,
"sequence"=2,
"animate"=TRUE
}
</cfscript>
<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE
title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca" animate="#animation#">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>- The animation struct includes four properties:
- "effect"=7: Uses the horizontal expansion effect for animating the bars.
- "delay"=1: Sets a 1-second delay before the animation starts, so each bar begins animating after waiting for one second.
- "method"=1: Specifies the animation method. In ColdFusion chart animations, method 1 denotes an easing-out effect on the chart.
- "sequence"=2: Determines the order of animation for the bars. The sequence value 2 indicates that the bars animate sequentially, one after another, rather than all at once.
Example 5- using speed attribute
<cfscript>
"animation"={
"effect"=7,
"delay"=1,
"method"=1,
"sequence"=2,
"speed"="100",
"animate"=TRUE
}
</cfscript>
<cfchart format = "html" type = "bar" markersize="5" height="600" width="800" showLegend=FALSE
title="Temperatures(°C)- Monthly">
<cfchartseries seriescolor="##5a90ca" animate="#animation#">
<cfchartdata item="Jan" value="15">
<cfchartdata item="Feb" value="19">
<cfchartdata item="Mar" value="28">
<cfchartdata item="Apr" value="35">
<cfchartdata item="May" value="41">
<cfchartdata item="Jun" value="37">
</cfchartseries>
</cfchart>- The animation struct includes five properties:
- "effect"=7: Uses the horizontal expansion effect for animating the bars.
- "delay"=1: Sets a 1-second delay before the animation starts, so each bar begins animating after waiting for one second.
- "method"=1: Specifies the animation method. In ColdFusion chart animations, method 1 denotes an easing-out effect on the chart.
- "sequence"=2: Determines the order of animation for the bars. The sequence value 2 indicates that the bars animate sequentially, one after another, rather than all at once.
- "speed"="100": Sets the animation speed to 100 ms, controlling how quickly each bar completes its animation.
Add multiple animations in a chart
So far, you'd added only one animation per chart. Using the animation properties and specifying multiple data points in the cfchartseries tag, you can also add multiple animations.
<cfscript>
plot={
"animation": {
"effect": 13,
"speed": "1000",
"method":3,
"sequence":2,
"delay": 1,
"animate" = TRUE
}
}
</cfscript>
<cfchart format="html" name="myChart" height="530" width="1000" plot="#plot#" title="10 day movement of stocks"
showLegend="TRUE">
<cfchartseries type="curve" markerstyle="triangle" label="CFX Tech">
<cfchartdata item="Day 1" value="30">
<cfchartdata item="Day 2" value="40">
<cfchartdata item="Day 3" value="35">
<cfchartdata item="Day 4" value="30">
<cfchartdata item="Day 5" value="45">
<cfchartdata item="Day 6" value="27">
<cfchartdata item="Day 7" value="35">
<cfchartdata item="Day 8" value="39">
<cfchartdata item="Day 9" value="30">
<cfchartdata item="Day 10" value="34">
</cfchartseries>
<cfchartseries type="curve" label="TDX Corp">
<cfchartdata item="Day 1" value="35">
<cfchartdata item="Day 2" value="40">
<cfchartdata item="Day 3" value="30">
<cfchartdata item="Day 4" value="27">
<cfchartdata item="Day 5" value="35">
<cfchartdata item="Day 6" value="39">
<cfchartdata item="Day 7" value="59">
<cfchartdata item="Day 8" value="36">
<cfchartdata item="Day 9" value="25">
<cfchartdata item="Day 10" value="29">
</cfchartseries>
<cfchartseries type="curve" label="PMT Inc">
<cfchartdata item="Day 1" value="45">
<cfchartdata item="Day 2" value="43">
<cfchartdata item="Day 3" value="36">
<cfchartdata item="Day 4" value="50">
<cfchartdata item="Day 5" value="54">
<cfchartdata item="Day 6" value="52">
<cfchartdata item="Day 7" value="42">
<cfchartdata item="Day 8" value="40">
<cfchartdata item="Day 9" value="49">
<cfchartdata item="Day 10" value="40">
</cfchartseries>
</cfchart>In this example, the animation struct includes properties like effect, delay, and method to customize the animation behavior.
We're glad. Tell us how this page helped.
We're sorry. Can you tell us what didn't work for you?
Share additional feedback to help us improve.
0/255
|
