diff options
Diffstat (limited to 'schall/static/RGraph/libraries/RGraph.common.effects.js')
| -rw-r--r-- | schall/static/RGraph/libraries/RGraph.common.effects.js | 1516 |
1 files changed, 1516 insertions, 0 deletions
diff --git a/schall/static/RGraph/libraries/RGraph.common.effects.js b/schall/static/RGraph/libraries/RGraph.common.effects.js new file mode 100644 index 0000000..cb63371 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.effects.js @@ -0,0 +1,1516 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + /** + * This is a library of a few functions that make it easier to do + * effects like fade-ins or eaxpansion. + */ + + /** + * Initialise the various objects + */ + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + RGraph.Effects = {} + RGraph.Effects.Fade = {} + RGraph.Effects.jQuery = {} + RGraph.Effects.jQuery.HBlinds = {} + RGraph.Effects.jQuery.VBlinds = {} + RGraph.Effects.jQuery.Slide = {} + RGraph.Effects.Pie = {} + RGraph.Effects.Bar = {} + RGraph.Effects.Line = {} + RGraph.Effects.Line.jQuery = {} + RGraph.Effects.Fuel = {} + RGraph.Effects.Rose = {} + RGraph.Effects.Odo = {} + RGraph.Effects.Gauge = {} + RGraph.Effects.Meter = {} + RGraph.Effects.HBar = {} + RGraph.Effects.Radar = {} + RGraph.Effects.Waterfall = {} + + + /** + * Fadein + * + * This function simply uses the CSS opacity property - initially set to zero and + * increasing to 1 over the period of 0.5 second + * + * @param object obj The graph object + */ + RGraph.Effects.Fade.In = function (obj) + { + var canvas = obj.canvas; + + // Initially the opacity should be zero + canvas.style.opacity = 0; + + // Draw the chart + RGraph.Clear(obj.canvas); + obj.Draw(); + + // Now fade the chart in + for (var i=1; i<=10; ++i) { + setTimeout('document.getElementById("' + canvas.id + '").style.opacity = ' + (i * 0.1), i * 50); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 500); + } + } + + + /** + * Fadeout + * + * This function is a reversal of the above function - fading out instead of in + * + * @param object obj The graph object + */ + RGraph.Effects.Fade.Out = function (obj) + { + var canvas = obj.canvas; + + // Draw the chart + RGraph.Clear(obj.canvas); + obj.Draw(); + + // Now fade the chart in + for (var i=10; i>=0; --i) { + setTimeout('document.getElementById("' + canvas.id + '").style.opacity = ' + (i * 0.1), (10 - i) * 50); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 500); + } + } + + + /** + * Expand + * + * This effect is like the tooltip effect of the same name. I starts in the middle + * and expands out to full size. + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Expand = function (obj) + { + // Check for jQuery + if (typeof(jQuery) == 'undefined') { + alert('[ERROR] Could not find jQuery object - have you included the jQuery file?'); + } + + var canvas = obj.canvas; + + if (!canvas.__rgraph_div_placeholder__) { + var div = RGraph.Effects.ReplaceCanvasWithDIV(canvas); + canvas.__rgraph_div_placeholder__ = div; + } else { + div = canvas.__rgraph_div_placeholder__; + } + + canvas.style.position = 'relative'; + canvas.style.top = (canvas.height / 2) + 'px'; + canvas.style.left = (canvas.width / 2) + 'px'; + + + canvas.style.width = 0; + canvas.style.height = 0; + + + canvas.style.opacity = 0; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#' + obj.id).animate({ + opacity: 1, + width: parseInt(div.style.width) + 'px', + height: parseInt(div.style.height) + 'px', + left: '-=' + (obj.canvas.width / 2) + 'px', + top: '-=' + (obj.canvas.height / 2) + 'px' + }, 1000); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], 1000); + } + } + + + /** + * A function used to replace the canvas witha Div, which inturn holds the canvas. This way the page + * layout doesn't shift in the canvas is resized. + * + * @param object canvas The canvas to replace. + */ + RGraph.Effects.ReplaceCanvasWithDIV = function (canvas) + { + if (!canvas.replacementDIV) { + // Create the place holder DIV + var div = document.createElement('DIV'); + div.style.width = canvas.width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.cssFloat = canvas.style.cssFloat; + div.style.left = canvas.style.left; + div.style.top = canvas.style.top; + //div.style.position = canvas.style.position; + div.style.display = 'inline-block'; + canvas.parentNode.insertBefore(div, canvas); + + + // Remove the canvas from the document + canvas.parentNode.removeChild(canvas); + + // Add it back in as a child of the place holder + div.appendChild(canvas); + + // Reset the positioning information on the canvas + canvas.style.position = 'relative'; + canvas.style.left = (div.offsetWidth / 2) + 'px'; + canvas.style.top = (div.offsetHeight / 2) + 'px'; + canvas.style.cssFloat = ''; + + // Add a reference to the canvas to the DIV so that repeated plays of the anumation + // don't keep replacing the canvas with a new DIV + canvas.replacementDIV = div; + + } else { + var div = canvas.replacementDIV; + } + + return div; + } + + + /** + * Snap + * + * Similar to the tooltip effect of the same name, this moves the canvas in from the top left corner + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Snap = function (obj) + { + var delay = 500; + + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + + obj.canvas.style.position = 'absolute'; + obj.canvas.style.top = 0; + obj.canvas.style.left = 0; + obj.canvas.style.width = 0; + obj.canvas.style.height = 0; + obj.canvas.style.opacity = 0; + + var targetLeft = div.offsetLeft; + var targetTop = div.offsetTop; + var targetWidth = div.offsetWidth; + var targetHeight = div.offsetHeight; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#' + obj.id).animate({ + opacity: 1, + width: targetWidth + 'px', + height: targetHeight + 'px', + left: targetLeft + 'px', + top: targetTop + 'px' + }, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay + 50); + } + } + + + /** + * Reveal + * + * This effect issmilat to the Expand effect - the canvas is slowly revealed from + * the centre outwards + * + * @param object obj The chart object + */ + RGraph.Effects.jQuery.Reveal = function (obj) + { + var opts = arguments[1] ? arguments[1] : null; + var delay = 1000; + var canvas = obj.canvas; + var xy = RGraph.getCanvasXY(obj.canvas); + + var divs = [ + ['reveal_left', xy[0], xy[1], obj.canvas.width / 2, obj.canvas.height], + ['reveal_right',(xy[0] + (obj.canvas.width / 2)),xy[1],(obj.canvas.width / 2),obj.canvas.height], + ['reveal_top',xy[0],xy[1],obj.canvas.width,(obj.canvas.height / 2)], + ['reveal_bottom',xy[0],(xy[1] + (obj.canvas.height / 2)),obj.canvas.width,(obj.canvas.height / 2)] + ]; + + for (var i=0; i<divs.length; ++i) { + var div = document.createElement('DIV'); + div.id = divs[i][0]; + div.style.width = divs[i][3]+ 'px'; + div.style.height = divs[i][4] + 'px'; + div.style.left = divs[i][1] + 'px'; + div.style.top = divs[i][2] + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = opts && typeof(opts['color']) == 'string' ? opts['color'] : 'white'; + document.body.appendChild(div); + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + $('#reveal_left').animate({width: 0}, delay); + $('#reveal_right').animate({left: '+=' + (obj.canvas.width / 2),width: 0}, delay); + $('#reveal_top').animate({height: 0}, delay); + $('#reveal_bottom').animate({top: '+=' + (obj.canvas.height / 2),height: 0}, delay); + + // Remove the DIVs from the DOM 100ms after the animation ends + setTimeout( + function () + { + document.body.removeChild(document.getElementById("reveal_top")) + document.body.removeChild(document.getElementById("reveal_bottom")) + document.body.removeChild(document.getElementById("reveal_left")) + document.body.removeChild(document.getElementById("reveal_right")) + } + , delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Horizontal Blinds (open) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.HBlinds.Open = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var height = canvas.height / 5; + + /** + * First draw the chart + */ + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var i=0; i<5; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = canvas.width + 'px'; + div.style.height = height + 'px'; + div.style.left = xy[0] + 'px'; + div.style.top = (xy[1] + (canvas.height * (i / 5))) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({height: 0}, delay); + } + + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Horizontal Blinds (close) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.HBlinds.Close = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var height = canvas.height / 5; + + for (var i=0; i<5; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = canvas.width + 'px'; + div.style.height = 0; + div.style.left = xy[0] + 'px'; + div.style.top = (xy[1] + (canvas.height * (i / 5))) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({height: height + 'px'}, delay); + } + + setTimeout(function () {RGraph.Clear(obj.canvas);}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Vertical Blinds (open) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.VBlinds.Open = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var width = canvas.width / 10; + + /** + * First draw the chart + */ + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var i=0; i<10; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.left = (xy[0] + (canvas.width * (i / 10))) + 'px'; + div.style.top = (xy[1]) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({width: 0}, delay); + } + + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_5'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_6'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_7'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_8'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_9'));}, delay + 100); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Vertical Blinds (close) + * + * @params object obj The graph object + */ + RGraph.Effects.jQuery.VBlinds.Close = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var delay = 1000; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + var width = canvas.width / 10; + + // Don't draw the chart + + for (var i=0; i<10; ++i) { + var div = document.createElement('DIV'); + div.id = 'blinds_' + i; + div.style.width = 0; + div.style.height = canvas.height + 'px'; + div.style.left = (xy[0] + (canvas.width * (i / 10))) + 'px'; + div.style.top = (xy[1]) + 'px'; + div.style.position = 'absolute'; + div.style.backgroundColor = color; + document.body.appendChild(div); + + $('#blinds_' + i).animate({width: width}, delay); + } + + setTimeout(function () {RGraph.Clear(obj.canvas, color);}, delay + 100); + + if (opts['remove']) { + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_0'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_1'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_2'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_3'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_4'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_5'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_6'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_7'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_8'));}, delay + 100); + setTimeout(function () {document.body.removeChild(document.getElementById('blinds_9'));}, delay + 100); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Pie chart grow + * + * Gradually increases the pie chart radius + * + * @params object obj The graph object + */ + RGraph.Effects.Pie.Grow = function (obj) + { + var canvas = obj.canvas; + var opts = arguments[1] ? arguments[1] : []; + var color = opts['color'] ? opts['color'] : 'white'; + var xy = RGraph.getCanvasXY(canvas); + + canvas.style.visibility = 'hidden'; + obj.Draw(); + var radius = obj.getRadius(); + RGraph.Clear(obj.canvas); + canvas.style.visibility = 'visible'; + + obj.Set('chart.radius', 0); + + RGraph.Effects.Animate(obj, {'chart.radius': radius}, arguments[2]); + } + + + /** + * Grow + * + * The Bar chart Grow effect gradually increases the values of the bars + * + * @param object obj The graph object + */ + RGraph.Effects.Bar.Grow = function (obj) + { + // Save the data + obj.original_data = RGraph.array_clone(obj.data); + + // Zero the data + obj.__animation_frame__ = 0; + + // Stop the scale from changing by setting chart.ymax (if it's not already set) + if (obj.Get('chart.ymax') == null) { + + var ymax = 0; + + for (var i=0; i<obj.data.length; ++i) { + if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'stacked') { + ymax = Math.max(ymax, RGraph.array_sum(obj.data[i])); + } else { + ymax = Math.max(ymax, obj.data[i]); + } + } + + ymax = RGraph.getScale(ymax)[4]; + + obj.Set('chart.ymax', ymax); + } + + function Grow () + { + var numFrames = 30; + + if (!obj.__animation_frame__) { + obj.__animation_frame__ = 0; + obj.__original_hmargin__ = obj.Get('chart.hmargin'); + obj.__hmargin__ = ((obj.canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right')) / obj.data.length) / 2; + obj.Set('chart.hmargin', obj.__hmargin__); + } + + // Alter the Bar chart data depending on the frame + for (var j=0; j<obj.original_data.length; ++j) { + if (typeof(obj.data[j]) == 'object') { + for (var k=0; k<obj.data[j].length; ++k) { + obj.data[j][k] = (obj.__animation_frame__ / numFrames) * obj.original_data[j][k]; + } + } else { + obj.data[j] = (obj.__animation_frame__ / numFrames) * obj.original_data[j]; + } + } + + /** + * Increment the hmargin to the target + */ + obj.Set('chart.hmargin', ((1 - (obj.__animation_frame__ / numFrames)) * (obj.__hmargin__ - obj.__original_hmargin__)) + obj.__original_hmargin__); + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + + if (location.href.indexOf('?settimeout') > 0) { + setTimeout(Grow, 40); + } else { + RGraph.Effects.UpdateCanvas(Grow); + } + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * A wrapper function that encapsulate requestAnimationFrame + * + * @param function func The animation function + */ + RGraph.Effects.UpdateCanvas = function (func) + { + // Standard + if (typeof(window.requestAnimationFrame) == 'function') { + window.requestAnimationFrame(func); + // IE 10+ + } else if (typeof(window.msRequestAnimationFrame) == 'function') { + window.msRequestAnimationFrame(func); + // Chrome + } else if (typeof(window.webkitRequestAnimationFrame) == 'function') { + window.webkitRequestAnimationFrame(func); + // Firefox + } else if (window.mozRequestAnimationFrame && 0) { // Seems rather slow in FF6 - so disabled + window.mozRequestAnimationFrame(func); + // Default fallback to setTimeout + } else { + setTimeout(func, 16.666); + } + } + + + /** + * Grow + * + * The Fuel chart Grow effect gradually increases the values of the Fuel chart + * + * @param object obj The graph object + */ + RGraph.Effects.Fuel.Grow = function (fuelObj) + { + function Grow () + { + var numFrames = 35; + + if (!fuelObj.__animation_frame__) { + fuelObj.__animation_frame__ = 0; + fuelObj.__min__ = fuelObj.min; + fuelObj.__value__ = fuelObj.value; + } + + + fuelObj.value = fuelObj.__min__ + (((fuelObj.__value__ - fuelObj.__min__) / numFrames) * fuelObj.__animation_frame__); + + RGraph.Clear(fuelObj.canvas); + fuelObj.Draw(); + + if (fuelObj.__animation_frame__ < numFrames) { + fuelObj.__animation_frame__ += 1; + RGraph.Effects.UpdateCanvas(Grow); + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * The Animate function. Similar to the jQuery Animate() function - simply pass it a + * map of the properties and their target values, and this function will animate + * them to get to those values. + * + * @param object obj The chart object + * @param object map A map (an associative array) of the properties and their target values. + * @param An optional function which will be called when the animation is complete + */ + RGraph.Effects.Animate = function (obj, map) + { + obj.Draw(); + + RGraph.Effects.__total_frames__ = (map && map['frames']) ? map['frames'] : 30; + + function Animate_Iterator (func) + { + var id = [obj.id + '_' + obj.type]; + + // Very first time in - initialise the arrays + if (typeof(RGraph.Effects.__current_frame__ ) == 'undefined') { + RGraph.Effects.__current_frame__ = new Array(); + RGraph.Effects.__original_values__ = new Array(); + RGraph.Effects.__diffs__ = new Array(); + RGraph.Effects.__steps__ = new Array(); + RGraph.Effects.__callback__ = new Array(); + } + + // Initialise the arrays for THIS animation (not necessrily the first in the page) + if (!RGraph.Effects.__current_frame__[id]) { + RGraph.Effects.__current_frame__[id] = RGraph.Effects.__total_frames__; + RGraph.Effects.__original_values__[id] = {}; + RGraph.Effects.__diffs__[id] = {}; + RGraph.Effects.__steps__[id] = {}; + RGraph.Effects.__callback__[id] = func; + } + + for (var i in map) { + if (typeof(map[i]) == 'string' || typeof(map[i]) == 'number') { + + // If this the first frame, record the proginal value + if (RGraph.Effects.__current_frame__[id] == RGraph.Effects.__total_frames__) { + RGraph.Effects.__original_values__[id][i] = obj.Get(i); + RGraph.Effects.__diffs__[id][i] = map[i] - RGraph.Effects.__original_values__[id][i]; + RGraph.Effects.__steps__[id][i] = RGraph.Effects.__diffs__[id][i] / RGraph.Effects.__total_frames__; + } + + obj.Set(i, obj.Get(i) + RGraph.Effects.__steps__[id][i]); + + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + + // If the current frame number is above zero, run the animation iterator again + if (--RGraph.Effects.__current_frame__[id] > 0) { + //setTimeout(Animate_Iterator, 100) + RGraph.Effects.UpdateCanvas(Animate_Iterator); + + // Optional callback + } else { + + if (typeof(RGraph.Effects.__callback__[id]) == 'function') { + (RGraph.Effects.__callback__[id])(obj); + } + + // Get rid of the arrays + RGraph.Effects.__current_frame__[id] = null; + RGraph.Effects.__original_values__[id] = null; + RGraph.Effects.__diffs__[id] = null; + RGraph.Effects.__steps__[id] = null; + RGraph.Effects.__callback__[id] = null; + + } + } + + Animate_Iterator(arguments[2]); + } + + + /** + * Slide in + * + * This function is a wipe that can be used when switching the canvas to a new graph + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Slide.In = function (obj) + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + var canvas = obj.canvas; + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + var delay = 1000; + div.style.overflow= 'hidden'; + var direction = typeof(arguments[1]) == 'object' && typeof(arguments[1]['direction']) == 'string' ? arguments[1]['direction'] : 'left'; + + canvas.style.position = 'relative'; + + if (direction == 'left') { + canvas.style.left = (0 - div.offsetWidth) + 'px'; + canvas.style.top = 0; + } else if (direction == 'top') { + canvas.style.left = 0; + canvas.style.top = (0 - div.offsetHeight) + 'px'; + } else if (direction == 'bottom') { + canvas.style.left = 0; + canvas.style.top = div.offsetHeight + 'px'; + } else { + canvas.style.left = div.offsetWidth + 'px'; + canvas.style.top = 0; + } + + $('#' + obj.id).animate({left:0,top:0}, delay); + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Slide out + * + * This function is a wipe that can be used when switching the canvas to a new graph + * + * @param object obj The graph object + */ + RGraph.Effects.jQuery.Slide.Out = function (obj) + { + var canvas = obj.canvas; + var div = RGraph.Effects.ReplaceCanvasWithDIV(obj.canvas); + var delay = 1000; + div.style.overflow= 'hidden'; + var direction = typeof(arguments[1]) == 'object' && typeof(arguments[1]['direction']) == 'string' ? arguments[1]['direction'] : 'left'; + + canvas.style.position = 'relative'; + canvas.style.left = 0; + canvas.style.top = 0; + + if (direction == 'left') { + $('#' + obj.id).animate({left: (0 - canvas.width) + 'px'}, delay); + } else if (direction == 'top') { + $('#' + obj.id).animate({left: 0, top: (0 - div.offsetHeight) + 'px'}, delay); + } else if (direction == 'bottom') { + $('#' + obj.id).animate({top: (0 + div.offsetHeight) + 'px'}, delay); + } else { + $('#' + obj.id).animate({left: (0 + canvas.width) + 'px'}, delay); + } + + /** + * Callback + */ + if (typeof(arguments[2]) == 'function') { + setTimeout(arguments[2], delay); + } + } + + + /** + * Unfold + * + * This effect gradually increases the X/Y coordinatesfrom 0 + * + * @param object obj The chart object + */ + RGraph.Effects.Line.Unfold = function (obj) + { + obj.Set('chart.animation.factor', obj.Get('chart.animation.unfold.initial')); + RGraph.Effects.Animate(obj, {'chart.animation.factor': 1}, arguments[2]); + } + + + /** + * Unfold + * + * This effect gradually increases the radiuss and decrease the margin of the Rose chart + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Rose.Grow = function (obj) + { + var original_margin = obj.Get('chart.margin'); + var margin = (360 / obj.data.length) / 2; + + obj.Set('chart.margin', margin); + obj.Set('chart.animation.grow.factor', 0); + + RGraph.Effects.Animate(obj, {'chart.margin': original_margin, 'chart.animation.grow.factor': 1, 'frames': 45}, arguments[2]); + } + + + /** + * UnfoldFromCenter + * + * Line chart unfold from center + */ + RGraph.Effects.Line.UnfoldFromCenter = function (obj) + { + var numFrames = 30; + + var original_opacity = obj.canvas.style.opacity; + obj.canvas.style.opacity = 0; + obj.Draw(); + var center_value = obj.scale[4] / 2; + obj.Set('chart.ymax', Number(obj.scale[4])); + RGraph.Clear(obj.canvas); + obj.canvas.style.opacity = original_opacity; + var original_data = RGraph.array_clone(obj.original_data); + var original_blur = obj.Get('chart.shadow.blur'); + obj.Set('chart.shadow.blur', 0); + var callback = arguments[2]; + + if (!obj.__increments__) { + + obj.__increments__ = new Array(); + + for (var dataset=0; dataset<original_data.length; ++dataset) { + + obj.__increments__[dataset] = new Array(); + + for (var i=0; i<original_data[dataset].length; ++i) { + obj.__increments__[dataset][i] = (original_data[dataset][i] - center_value) / numFrames; + + obj.original_data[dataset][i] = center_value; + } + } + } + + function UnfoldFromCenter () + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + for (var dataset=0; dataset<original_data.length; ++dataset) { + for (var i=0; i<original_data[dataset].length; ++i) { + obj.original_data[dataset][i] += obj.__increments__[dataset][i]; + } + } + + if (--numFrames > 0) { + RGraph.Effects.UpdateCanvas(UnfoldFromCenter); + } else { + obj.original_data = RGraph.array_clone(original_data); + obj.__increments__ = null; + obj.Set('chart.shadow.blur', original_blur); + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (typeof(callback) == 'function') { + callback(obj); + } + } + } + + UnfoldFromCenter(); + } + + + /** + * FoldToCenter + * + * Line chart FoldTocenter + */ + RGraph.Effects.Line.FoldToCenter = function (obj) + { + var totalFrames = 30; + var numFrame = totalFrames; + obj.Draw(); + var center_value = obj.scale[4] / 2; + obj.Set('chart.ymax', Number(obj.scale[4])); + RGraph.Clear(obj.canvas); + var original_data = RGraph.array_clone(obj.original_data); + obj.Set('chart.shadow.blur', 0); + var callback = arguments[2]; + + function FoldToCenter () + { + for (var i=0; i<obj.data.length; ++i) { + if (obj.data[i].length) { + for (var j=0; j<obj.data[i].length; ++j) { + if (obj.original_data[i][j] > center_value) { + obj.original_data[i][j] = ((original_data[i][j] - center_value) * (numFrame/totalFrames)) + center_value; + } else { + obj.original_data[i][j] = center_value - ((center_value - original_data[i][j]) * (numFrame/totalFrames)); + } + } + } + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame-- > 0) { + RGraph.Effects.UpdateCanvas(FoldToCenter); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(FoldToCenter); + } + + + /** + * Odo Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Odo.Grow = function (obj) + { + var numFrames = 30; + var origValue = Number(obj.currentValue); + var newValue = obj.value; + var diff = newValue - origValue; + var step = (diff / numFrames); + var callback = arguments[2]; + + function Grow () + { + if (obj.currentValue != newValue) { + obj.value = Number(obj.currentValue) + step; + } + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrames-- > 0) { + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } else if (callback) { + callback(obj) + } + } + + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Meter Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Meter.Grow = function (obj) + { + if (!obj.currentValue) { + obj.currentValue = obj.min; + } + + var totalFrames = 60; + var numFrame = 0; + var diff = obj.value - obj.currentValue; + var step = diff / totalFrames + var callback = arguments[2]; + + function Grow_meter_inner () + { + obj.value = obj.currentValue + step; + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame++ < totalFrames) { + RGraph.Effects.UpdateCanvas(Grow_meter_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_meter_inner); + } + + + /** + * Grow + * + * The HBar chart Grow effect gradually increases the values of the bars + * + * @param object obj The graph object + */ + RGraph.Effects.HBar.Grow = function (obj) + { + // Save the data + obj.original_data = RGraph.array_clone(obj.data); + + // Zero the data + obj.__animation_frame__ = 0; + + // Stop the scale from changing by setting chart.ymax (if it's not already set) + if (obj.Get('chart.xmax') == 0) { + + var xmax = 0; + + for (var i=0; i<obj.data.length; ++i) { + if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'stacked') { + xmax = Math.max(xmax, RGraph.array_sum(obj.data[i])); + } else if (RGraph.is_array(obj.data[i]) && obj.Get('chart.grouping') == 'grouped') { + xmax = Math.max(xmax, RGraph.array_max(obj.data[i])); + } else { + xmax = Math.max(xmax, RGraph.array_max(obj.data[i])); + } + } + + xmax = RGraph.getScale(xmax)[4]; + + obj.Set('chart.xmax', xmax); + } + + /** + * Turn off shadow blur for the duration of the animation + */ + if (obj.Get('chart.shadow.blur') > 0) { + var __original_shadow_blur__ = obj.Get('chart.shadow.blur'); + obj.Set('chart.shadow.blur', 0); + } + + function Grow () + { + var numFrames = 30; + + if (!obj.__animation_frame__) { + obj.__animation_frame__ = 0; + obj.__original_vmargin__ = obj.Get('chart.vmargin'); + obj.__vmargin__ = ((obj.canvas.height - obj.Get('chart.gutter.top') - obj.Get('chart.gutter.bottom')) / obj.data.length) / 2; + obj.Set('chart.vmargin', obj.__vmargin__); + } + + // Alter the Bar chart data depending on the frame + for (var j=0; j<obj.original_data.length; ++j) { + + // This stops the animatioon from being completely linear + var easing = Math.pow(Math.sin((obj.__animation_frame__ * (90 / numFrames)) / (180 / Math.PI)), 4); + + if (typeof(obj.data[j]) == 'object') { + for (var k=0; k<obj.data[j].length; ++k) { + obj.data[j][k] = (obj.__animation_frame__ / numFrames) * obj.original_data[j][k] * easing; + } + } else { + obj.data[j] = (obj.__animation_frame__ / numFrames) * obj.original_data[j] * easing; + } + } + + /** + * Increment the vmargin to the target + */ + obj.Set('chart.vmargin', ((1 - (obj.__animation_frame__ / numFrames)) * (obj.__vmargin__ - obj.__original_vmargin__)) + obj.__original_vmargin__); + + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + + RGraph.Effects.UpdateCanvas(Grow); + + // Turn any shadow blur back on + } else { + if (typeof(__original_shadow_blur__) == 'number' && __original_shadow_blur__ > 0) { + obj.Set('chart.shadow.blur', __original_shadow_blur__); + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + } + + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Trace + * + * This effect is for the Line chart, uses the jQuery library and slowly + * uncovers the Line , but you can see the background of the chart. This effect + * is quite new (1/10/2011) and as such should be used with caution. + * + * @param object obj The graph object + * @param object Not used + * @param int A number denoting how long (in millseconds) the animation should last for. Defauld + * is 1500 + */ + RGraph.Effects.Line.jQuery.Trace = function (obj) + { + RGraph.Clear(obj.canvas); + obj.Draw(); + + /** + * Create the DIV that the second canvas will sit in + */ + var div = document.createElement('DIV'); + var xy = RGraph.getCanvasXY(obj.canvas); + div.id = '__rgraph_trace_animation_' + RGraph.random(0, 4351623) + '__'; + div.style.left = xy[0] + 'px'; + div.style.top = xy[1] + 'px'; + div.style.width = obj.Get('chart.gutter.left'); + div.style.height = obj.canvas.height + 'px'; + div.style.position = 'absolute'; + div.style.overflow = 'hidden'; + document.body.appendChild(div); + + /** + * Make the second canvas + */ + var id = '__rgraph_line_reveal_animation_' + RGraph.random(0, 99999999) + '__'; + var canvas2 = document.createElement('CANVAS'); + canvas2.width = obj.canvas.width; + canvas2.height = obj.canvas.height; + canvas2.style.position = 'absolute'; + canvas2.style.left = 0; + canvas2.style.top = 0; + + canvas2.id = id; + div.appendChild(canvas2); + + var reposition_canvas2 = function (e) + { + var xy = RGraph.getCanvasXY(obj.canvas); + + div.style.left = xy[0] + 'px'; + div.style.top = xy[1] + 'px'; + } + window.addEventListener('resize', reposition_canvas2, false) + + /** + * Make a copy of the original Line object + */ + var obj2 = new RGraph.Line(id, RGraph.array_clone(obj.original_data)); + + for (i in obj.properties) { + if (typeof(i) == 'string' && obj.properties[i]) { + obj2.Set(i, obj.properties[i]); + } + } + + obj2.Set('chart.labels', []); + obj2.Set('chart.background.grid', false); + obj2.Set('chart.ylabels', false); + obj2.Set('chart.noaxes', true); + obj2.Set('chart.title', ''); + obj2.Set('chart.title.xaxis', ''); + obj2.Set('chart.title.yaxis', ''); + obj2.Draw(); + + /** + * This effectively hides the line + */ + obj.Set('chart.line.visible', false); + obj.Set('chart.colors', ['rgba(0,0,0,0)']); + if (obj.Get('chart.filled')) { + obj.Set('chart.fillstyle', 'rgba(0,0,0,0)'); + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + + /** + * Get rid of the second canvas and turn the line back on + * on the original. + */ + RGraph.Effects.Line.Trace_callback = function () + { + // Remove the window resize listener + window.removeEventListener('resize', reposition_canvas2, false); + + div.parentNode.removeChild(div); + div.removeChild(canvas2); + obj.Set('chart.line.visible', true); + + // Revert the filled status back to as it was + obj.Set('chart.filled', RGraph.array_clone(obj2.Get('chart.filled'))); + obj.Set('chart.fillstyle', RGraph.array_clone(obj2.Get('chart.fillstyle'))); + obj.Set('chart.colors', RGraph.array_clone(obj2.Get('chart.colors'))); + + RGraph.Clear(obj.canvas); + obj.Draw(); + } + + + $('#' + div.id).animate({ + width: obj.canvas.width + 'px' + }, arguments[2] ? arguments[2] : 1500, RGraph.Effects.Line.Trace_callback); + } + + + + /** + * RoundRobin + * + * This effect does two things: + * 1. Gradually increases the size of each segment + * 2. Gradually increases the size of the radius from 0 + * + * @param object obj The graph object + */ + RGraph.Effects.Pie.RoundRobin = function (obj) + { + var callback = arguments[2] ? arguments[2] : null; + var opt = arguments[1]; + obj.canvas.style.visibility = 'hidden'; + obj.Draw(); + obj.__animation_frame__ = 0; + + var targetRadius = typeof(obj.Get('chart.radius')) == 'number' ? obj.Get('chart.radius') : obj.getRadius(); + RGraph.Clear(obj.canvas); + + obj.canvas.style.visibility = 'visible'; + + function RoundRobin_inner () + { + // Increase this for a longer animation, decrease it for a shorter animation + var numFrames = 90; + + obj.Set('chart.effect.roundrobin.multiplier', Math.pow(Math.sin((obj.__animation_frame__ * (90 / numFrames)) / (180 / Math.PI)), 2) * (obj.__animation_frame__ / numFrames) ); + + if (!opt || opt['radius']) { + obj.Set('chart.radius', targetRadius * obj.Get('chart.effect.roundrobin.multiplier')); + } + + RGraph.Clear(obj.canvas) + obj.Draw(); + + if (obj.__animation_frame__ < numFrames) { + obj.__animation_frame__ += 1; + RGraph.Effects.UpdateCanvas(RoundRobin_inner); + + } else if (callback) { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(RoundRobin_inner); + } + + + /** + * Implode (pie chart) + * + * Here the segments are initially exploded - and gradually + * contract inwards to create the Pie chart + * + * @param object obj The Pie chart object + */ + RGraph.Effects.Pie.Implode = function (obj) + { + var numFrames = 90; + var distance = Math.min(obj.canvas.width, obj.canvas.height); + + function Implode_inner () + { + obj.Set('chart.exploded', Math.sin(numFrames / 57.3) * distance); + RGraph.Clear(obj.canvas) + obj.Draw(); + + if (numFrames > 0) { + numFrames--; + RGraph.Effects.UpdateCanvas(Implode_inner); + } else { + // Finish off the animation + obj.Set('chart.exploded', 0); + RGraph.Clear(obj.canvas); + obj.Draw(); + } + } + + RGraph.Effects.UpdateCanvas(Implode_inner); + } + + + /** + * Gauge Grow + * + * This effect gradually increases the represented value + * + * @param object obj The chart object + * @param Not used - pass null + * @param function An optional callback function + */ + RGraph.Effects.Gauge.Grow = function (obj) + { + var numFrames = 30; + var origValue = Number(obj.currentValue); + + if (obj.currentValue == null) { + obj.currentValue = obj.min; + origValue = obj.min; + } + + var newValue = obj.value; + var diff = newValue - origValue; + var step = (diff / numFrames); + + + function Grow () + { + if (obj.currentValue != newValue) { + obj.value = Number(obj.currentValue) + step; + } + + if (obj.value > obj.max) { + obj.value = obj.max; + } + + if (obj.value < obj.min) { + obj.value = obj.min; + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrames-- > 0) { + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + } + + //setTimeout(Grow, 100); + RGraph.Effects.UpdateCanvas(Grow); + } + + + /** + * Radar chart grow + * + * This effect gradually increases the magnitude of the points on the radar chart + * + * @param object obj The chart object + * @param null Not used + * @param function An optional callback that is run when the effect is finished + */ + RGraph.Effects.Radar.Grow = function (obj) + { + var totalframes = 30; + var framenum = totalframes; + var data = obj.data; + var callback = arguments[2]; + obj.data = []; + + function Grow_inner () + { + for (var i=0; i<data.length; ++i) { + + if (obj.data[i] == null) { + obj.data[i] = []; + } + + for (var j=0; j<data[i].length; ++j) { + obj.data[i][j] = ((totalframes - framenum)/totalframes) * data[i][j]; + } + } + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (framenum > 0) { + framenum--; + RGraph.Effects.UpdateCanvas(Grow_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_inner); + } + + + /** + * Waterfall Grow + * + * @param object obj The chart object + * @param null Not used + * @param function An optional function which is called when the animation is finished + */ + RGraph.Effects.Waterfall.Grow = function (obj) + { + var totalFrames = 45; + var numFrame = 0; + var data = RGraph.array_clone(obj.data); + var callback = arguments[2]; + + //Reset The data to zeros + for (var i=0; i<obj.data.length; ++i) { + obj.data[i] /= totalFrames; + + } + + /** + * Fix the scale + */ + if (obj.Get('chart.ymax') == null) { + var max = RGraph.getScale(obj.getMax(data))[4] + obj.Set('chart.ymax', max); + } + + obj.Set('chart.multiplier.x', 0); + obj.Set('chart.multiplier.w', 0); + + function Grow_inner () + { + for (var i=0; i<obj.data.length; ++i) { + obj.data[i] = data[i] * (numFrame/totalFrames); + } + + var multiplier = Math.pow(Math.sin(((numFrame / totalFrames) * 90) / 57.3), 20); + obj.Set('chart.multiplier.x', (numFrame / totalFrames) * multiplier); + obj.Set('chart.multiplier.w', (numFrame / totalFrames) * multiplier); + + RGraph.Clear(obj.canvas); + obj.Draw(); + + if (numFrame++ < totalFrames) { + RGraph.Effects.UpdateCanvas(Grow_inner); + } else if (typeof(callback) == 'function') { + callback(obj); + } + } + + RGraph.Effects.UpdateCanvas(Grow_inner) + }
\ No newline at end of file |