From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- .../RGraph/libraries/RGraph.common.effects.js | 1516 ++++++++++++++++++++ 1 file changed, 1516 insertions(+) create mode 100644 schall/static/RGraph/libraries/RGraph.common.effects.js (limited to 'schall/static/RGraph/libraries/RGraph.common.effects.js') 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 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 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 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 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 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 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