-
Notifications
You must be signed in to change notification settings - Fork 143
100_010_Animation
Previous Chapter Previous Page Next Page Next Chapter Table of content
The chart can be displayed through an animation : the chart appears evolutively through an animation of a couple of seconds. Options in this page are all associated to the animation.
- alwaysRunFunctionAtCompletion
- animateRotate
- animateScale
- animation
- animationBackward
- animationByData
- animationByDataset
- animationCount
- animationForceSetTimeOut
- animationLeftToRight
- animationPauseTime
- AnimationStartValue
- animationStartWithData
- animationStartWithDataset
- animationSteps
- AnimationStopValue
- dynamicDisplay
- onAnimationComplete
Description : when animation is completed (or when the chart is drawn when there is no animation), a function can be called (see onAnimationComplete ). By default, the function is not executed when the chart is redrawn (because it is resized for instance). With option "alwaysRunFunctionAtCompletion", you can change the behavior so that the function is executed each time the chart is redrawn.
chart types : all
Values : true or false
Default value : false
Sample : alwaysRunFunctionAtCompletion : true
See also : onAnimationComplete
Description : when set to true and the option “animation” is set to true, the animation will be based on a rotation.
chart types : pie, doughnut, polarArea
Values : true or false
Default value : true
Sample : animateRotate : true
See also : animateScale, animationByData, 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.
Chart types : pie, doughnut, polarArea
Values : true or false
Default value : false
Sample : animateScale : false
See also : animateRotate, animation
Description : the chart can be displayed at once or through an animation. Specify your type of display through the option animation : false no animation.
Chart types : All
Values : true or false
Default value : true
Sample : animation : true
See also : dynamicDisplay
Remark : for Pie, Doughnut and PolarArea charts animateRotate and/or animateScale has to be set to true otherwise there will not be any animation for those charts.
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.
Chart types : all
Values : true or false
Default value : false
Sample : animationBackward : true
See also : animationCount
Description : When the option animateRotate is set to true, by default, for Pie and Doughtnut charts, all data are displayed simultaniously through the animation; For PolarArea, all data are displayed simultaneously but starting at his position. If you want, you may display each data one behind the other; See Samples/animation_pie.html, Samples/animation_doughnut.html and Samples/animation_polararea.html.
Chart types : Pie, Doughnut, PolarArea
Values : true, false or "ByArc"
Default value : Pie, Doughtnut : true; PolarArea : "ByArc".
Sample : animationByData : "ByArc"
See also : animateRotate
Description : By default, all datasets (see your data) are displayed simultaniously during the animation. if you prefer to see the datasets one by one, set option animationByDataset to true.
Chart types : Line, Bubbles, Bar, StackedBar, HorizontalBar, HorizontalStackedBar, Radar
Values : true or false
Default value : false
Sample : animationByDataset : true
See also :
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)
Chart type : all
Values : any positive integer (or zero)
Sample : animationCount : 0
See also : onAnimationComplete
Description : in ChartNew.js, the way that the animation is managed is related to the browser. Each browser has his own function (window.requestAnimationFrame, window.webkitRequestAnimationFrame, window.mozRequestAnimationFrame, window.oRequestAnimationFrame, window.msRequestAnimationFrame). When you work with several tabs in your browser, it can be that the display of the animation is suspended (this is the case for several IExplorer version) or very slow (Firefox); If this problem happens in your browser, you can try to set option animationForceSetTimeOut to true, but it is not sure that the problem will be solved... With this option, the animation function is not managed by the function associated to the browser, but with the generic setTimeOut function.
Chart types : All
Values : true or false
Default value : false
Sample : animationForceSetTimeOut : true
See also :
Description : By default, in the animation, all data of a dataset (see your data) are displayed simultaniously during the animation. if you prefer that the data are displayed one by one (from the Left to the Right), set option animationLeftToRight to true.
Chart types : Line, Bubbles, Bar, StackedBar, HorizontalBar, HorizontalStackedBar, Radar
Values : true or false
Default value : false
Sample : animationLeftToRight : true
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.
Chart Type : all
Values : any positive integer
Default value : 5
Sample : animationPauseTime : 3
See also : onAnimationComplete, animationCount
Description : Through the animation, the chart appears step by step starting from an empty chart and evoluting to the full chart. 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.
Chart Type : all
Values : any real value between 0 and 1;
Default value : 0
Sample : animationStartValue: 0.2
See also : animation, animationStopValue.
Description : By default, all data are animated - If want that the animation starts at the 'x' data (and that the 'x-1' first data are not animated), set animationStartWithData value to 'x' .
Chart types : All
Values : positive integer.
Default value : 1 (<=> all data are animated).
Sample : animationStartWithData : 2
See also : animationStartWithDataset
Description : By default, all datasets are animated - If want that the animation starts at the 'x' dataset (and that the 'x-1' first datasets are not animated), set animationStartWithDataset value to 'x' .
Chart types : Line, Bubbles, Bar, StackedBar, HorizontalBar, HorizontalStackedBar, Radar
Values : a positive integer.
Default value : 1 (<=> all datasets are animated).
Sample : animationStartWithDataset : 2
See also : animationStartWithData
Description : set the number of steps in the animation.
Chart types : All
Values : a positive integer
Default value :
For Pie, Doughnut, PoloarArea : 100
For all other charts : 60
Sample : animationSteps : 60
See also :
Description : Through the animation, the chart appears step by step starting from an empty chart and evoluting to the full chart. 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.
Chart 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 chart is displayed trough an animation. But, if the chart appears outside the displayed area of your web page, the animation will be terminated before the chart is displayed. If you set the option “dynamicDisplay” to true, the animation will start when the chart appears in the displayed area.
Chart 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. For instance, it will not work on IOS when the chart is in a Frame.
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…)
Chart 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,statData){
alert(ctx.canvas.id);
alert(config.fmtV3);
alert(data.datasets[0].data[0]);
alert(statData[0][0].datavalue);
}
See also : animationBackward, animationCount
Previous Chapter Previous Page Next Page Next Chapter Top of Page