-
Notifications
You must be signed in to change notification settings - Fork 141
100_010_Animation
Previous Chapter Previous Page Next Page Next Chapter Table of content
The graph can be displayed through an animation : the graph appears evolutively through an animation of a couple of seconds. Options in the paragraph are associated to the animation.
Description : when set to true and the option “animation” is set to true, the animation will be based on a rotation.
Graph types : pie, doughnut, polarArea
Values : true or false
Default value : true
Sample : animateRotate : true
See also : animateScale, animation
Description : when set to true and the option “animation” is set to true, the animation will be based on the radius of the drawn circle.
Graph types : pie, doughnut, polarArea
Values : true or false
Default value : false
Sample : animateScale : false
See also : animateRotate, animation
Description : the graph can be displayed at once or through an animation. Specify your type of display through the option animation : false no animation.
Graph types : All
Values : true or false
Default value : true
Sample : animation : true
See also : dynamicDisplay
Remark : for Pie, Doughnut and PolarArea graphs animateRotate and/or animateScale has to be set to true otherwise there will not be any animation for those graphs.
Description : if you perform the animation more than one time, between each animation, the animation can be run backward (animationBackward : true) or not ( animationBackward : false). This option will only have an effect if animationCount is not equal to 1.
Graph types : all
Values : true or false
Default value : false
Sample : animationBackward : true
See also : animationCount
Description : by default, the animation runs one time; If you want to run the animation more than one time, set option animationCount to a value greater than one. If you set animationCount to 0, the animation will run indefinitely. At end of each animation, function defined in onAnimationComplete will be executed (if defined)
Graph type : all
Values : any positive integer (or zero)
Sample : animationCount : 0
See also : onAnimationComplete
Description : several animations are proposed by the application; select the animation that you want for your canvas. You can write your own animation; Look at the code for more details.
Graph types : All
Values : one of the following values Linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
Default value :
For Pie/Doughnut/polarArea : "easeOutBounce"
For the other graphs : "easeOutQuart"
Sample : animationEasing : "easeOutQuart"
See also :
Description : with option animationCount, you can run animation more than one time. With animationPauseTime, you can suspend the animation at the end of each iteration for a specified number of seconds. Specify the pause time (in seconds) with option animationPauseTime.
Graph Type: all
Values : any positive integer
Default value : 5
Sample : animationPauseTime : 3
See also : onAnimationComplete, animationCount
Description : Through the animation, the graph appears step by step starting from an empty graph and evoluting to the full graph. The evolution of the animation is defined by a value that evolutates from 0 to 1. If you want to initialize the start of the animation to a value greater than 0, initialize the option animationStartValue to a value greater than 0.
Graph Type : all
Values : any real value between 0 and 1;
Default value : 0
Sample : animationStartValue: 0.2
See also : animation, animationStopValue.
Description : set the number of steps in the animation.
Graph types : All
Values : a positive integer
Default value :
For Pie, Doughnut, PoloarArea : 100
For all other graphs : 60
Sample : animationSteps : 60
See also :
Description : Through the animation, the graph appears step by step starting from an empty graph and evoluting to the full graph. The evolution of the animation is defined by a value that evolutates from 0 to 1. If you want to stop the animation before it completes, initialize the option animationStopValue to a value lower than 1.
Graph Type : all
Values : any real value between 0 and 1;
Default value : 1
Sample : animationStopValue : 0.2
See also : animation, animationStartValue
Description : when the option “animate” is set to true, the graph is displayed trough an animation. But, if the graph appears outside the displayed area of your web page, the animation will be terminated before the graph is displayed. If you set the option “dynamicDisplay” to true, the animation will start when the graph appears in the displayed area.
Graph types : All
Values : true or false
Default value : false
Sample : dynamicDisplay : true
See also : animate
REMARK : this option is not working correctly on all devices. On some devices, the graphs are not displayed at all when this option is activated.
Description : when the animation is terminated, the function specified trough the option “onAnimationComplete” is executed.
Five parameters are passed to the function :
Ctx : the Context;
config : the options
data : the datas
movement of the animation : 0 when backward ; 1 when forward (see : animationBackward)
animationCount : iteration of the animation (1=first animation,2 = second animation, etc…)
Graph types : All
Values : the name of a function.
Default value : null ( nothing to execute when animation is terminated).
Sample :
onAnimationComplete : endOfAnimation
function endOfAnimation(ctx,config,data,movement, animationcount){
alert(ctx.canvas.id);
alert(config.fmtV3);
alert(data.datasets[0].data[0]);
}
See also : animationBackward, animationCount
Previous Chapter Previous Page Next Page Next Chapter Top of Page