User Guide Cancel

Animations using cfchart

 

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,
}
"animation": { "effect"=7, "delay"=1, "method"=1, "sequence"=2, "speed"="100", "animate"=true, }
"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>
<cfscript> "animation"={ "effect"=7, "delay"=1, "method"=1, "sequence"=2, "speed"="100", "animate"=true } </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>
<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>
<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

code

<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>
<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>
<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

code

<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>
<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>
<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

code

<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>
<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>
<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

code

<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>
<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>
<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

code

<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>
<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>
<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>
<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>
<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.

Get help faster and easier

New user?