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" --- schall/static/RGraph/docs/effects.html | 1448 ++++++++++++++++++++++++++++++++ 1 file changed, 1448 insertions(+) create mode 100644 schall/static/RGraph/docs/effects.html (limited to 'schall/static/RGraph/docs/effects.html') diff --git a/schall/static/RGraph/docs/effects.html b/schall/static/RGraph/docs/effects.html new file mode 100644 index 0000000..a1d98e1 --- /dev/null +++ b/schall/static/RGraph/docs/effects.html @@ -0,0 +1,1448 @@ + + + + + + RGraph: HTML5 Javascript charts library - Animation and visual effects + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Mention RGraph on Twitter + +
+ + + +
+ + +
+ + + + +

RGraph: HTML5 Javascript charts library - Animation and visual effects

+ + + + + +

Introduction

+

+ The animation and visual effects code is new to RGraph as of August 2011. It greatly simplifies the process of animating your + graphs or using visual effects. +

+ + + +

Example use

+

+ To use the effects you simply change your call to the .Draw() method to the appropriate effect function, like this: +

+ + 
+<script src="RGraph.common.core.js" ></script>
+<script src="RGraph.line.js" ></script>
+<script src="RGraph.common.effects.js" ></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
+
+<script>
+    var myLine = new RGraph.Line('myLine', [14,13,16,18,14,12,11,14,19,18,17,18], [11,12,14,12,11,13,13,15,14,15,13,14]);
+    myLine.Set('chart.labels', ['Jane','Geoff','Lou','Pob','Verity','Baz','Hue','Olga','Pete','Lou','Kev','Fred']);
+    myLine.Set('chart.gutter.top', 35);
+    myLine.Set('chart.gutter.left', 40  );
+    myLine.Set('chart.gutter.right', 5);
+    myLine.Set('chart.gutter.bottom', 10);
+    
+    // myLine.Draw();
+    RGraph.Effects.Fade.In(myLine);
+</script>
+
+ + + +

CSS animation vs <canvas> animation

+

+ CSS animation (which jQuery does) can be smoother than canvas animation (ie changing the CSS properties vs redrawing the + canvas). This is because CSS animation (ie changing the CSS properties) does not have the side + effect of clearing the canvas, and so does not incur a redraw. +

+ +

+ An alternative to the widely known and understood setTimeout() function is the newer requestAnimationFrame(). + This is a function which has been optimised for animation compared to the standard setTimeout() function. Some of + the animation functions use this over the setTimeout() function and going forward newer animation functions will + use it. RGraph has a fallback though so that if the function isn't available the older setTimeout() will be used. +

+ + + +

Combining effects

+

+ Some of the animation effects (ie those that work on separate aspects of the chart) can be combined. As an example the + Fade in/out can be combined with most other animation effects, allowing you to add a fade effect to the other animation + types. An example of this is below - this chart uses the Grow, Fade and Reveal effects. +

+ +[No canvas support]
+ + + + 
+<script>
+    function ShowCombination(obj)
+    {
+        RGraph.Effects.Fade.In(obj);
+        RGraph.Effects.jQuery.Reveal(obj);
+        RGraph.Effects.Bar.Grow(obj);
+    }
+</script>
+<button onclick="ShowCombination(myBar)">Show Combining animations example</button>
+
+ +

+ There's another example of combined effects on the combined charts page. +

+ + +

The .Animate() function

+

+ The .Animate() function function is similar to the jQuery .Animate() function. You can pass it a map of RGraph + properties and their TARGET values and the .Animate() function will move the properties towards those values. + In this way you can animate a variety of RGraph properties. The .Animate() function takes two or three arguments: +

+ + + +

An example of it use is below. It should be used instead of calling the .Draw() method:

+ + [No canvas support]
+ + + + + 
+function myCallback (obj)
+{
+    alert('A sample callback using the alert() function');
+}
+
+// myBar.Draw();
+RGraph.Effects.Animate(myBar, {'chart.hmargin': 5, 'chart.gutter.left': 50}, myCallback);
+
+ + +

Available effects

+ +

+ These are the effects available. You can achieve more effects by using the .Animate() function, + which allows you to animate any numeric RGraph property. +

+ + + + + +
+ +

Fade in

+ + [No canvas support]
+ + +

+ + A simple fade in effect where the canvas is initially drawn with an opacity of zero, increasing to one. + + 

RGraph.Effects.Fade.In(obj);
+
+ + + + + + + +
+ +

Fade out

+ + [No canvas support]
+ + +

+ + A simple fade out effect to accompany the fade in, where the canvas initially has an opacity of one, decreasing + to zero. + + 

RGraph.Effects.Fade.Out(obj);
+
+ + + + + + + +
+ +

Expand

+ + [No canvas support] +
+ + +

+ + This effect starts initially with the canvases CSS width and height set to 0 and over a period of half a second + increases them to 100%. + + 

RGraph.Effects.jQuery.Expand(obj);
+
+ + + + + + + +
+ +

Snap

+ + [No canvas support]
+ + +

+ + This effect is similar to the tooltip effect "snap" in that it "snaps" to the correct position, + moving in from the top left. + + 

RGraph.Effects.jQuery.Snap(obj);
+
+ + + + + + + +
+ +

Reveal

+ + [No canvas support]
+ + +

+ + This effect starts with the the canvas covered and is slowly revealed from the center outwards. The canvas + is at all times the same size (ie it's not resizd as with the Expand effect). + + 

RGraph.Effects.jQuery.Reveal(obj);
+
+ + + + + + + +
+ +

Horizontal Blinds (open)

+ + [No canvas support]
+ + +

+ + This effect gradually reveals the canvas by "opening some horizontal blinds", which are positioned + over the canvas. + + 

RGraph.Effects.jQuery.Blinds.Open(obj);
+
+ + + + + + + +
+ +

Horizontal Blinds (close)

+ + [No canvas support]
+ + +

+ + This effect gradually conceals the canvas by "closing some horizontal blinds", which are positioned + over the canvas. + + 

RGraph.Effects.jQuery.HBlinds.Close(obj);
+
+ + + + + + + +
+ +

Vertical Blinds (open)

+ + [No canvas support]
+ + +

+ + This effect gradually reveals the canvas by "opening some vertical blinds", which are positioned + over the canvas. + + 

RGraph.Effects.jQuery.VBlinds.Open(obj);
+
+ + + + + + + +
+ +

Vertical Blinds (Close)

+ + [No canvas support]
+ + +

+ + This effect gradually conceals the canvas by "closing some vertical blinds", which are positioned + over the canvas. + + 

RGraph.Effects.jQuery.VBlinds.Close(obj);
+
+ + + + + + + +
+ +

Pie chart Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the radius of the Pie chart, expanding out from the centre. + + 

RGraph.Effects.Pie.Grow(obj);
+
+ + + + + + + +
+ +

Pie chart Implode

+ + [No canvas support]
+ + +

+ + This effect gradually decreases the explosion of the chart - gradually bringing it together. Combined with + the RoundRobin effect (documented below) produces a nice combination, as seen on the frony page of this website. + + 

+RGraph.Effects.Pie.Implode(obj);
+//RGraph.Effects.Pie.RoundRobin(obj);
+
+
+ + + + + + + +
+ +

Pie chart RoundRobin

+ + [No canvas support]
+ + +

+ + This effect gradually increase both the circular size of the Pie chart and also the radius. Combining this effect + with the implode effect produces a nice effect. + + 

+RGraph.Effects.Pie.RoundRobin(obj);
+//RGraph.Effects.Pie.Implode(obj);
+
+
+ + + + + + + +
+ +

Bar chart Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the size of the bars on the bar chart until they are at full size. + + 

RGraph.Effects.Bar.Grow(obj);
+
+ + + + + + + +
+ +

Fuel chart Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the indicated value until it reaches the correct value. + + 

RGraph.Effects.Fuel.Grow(obj);
+
+ + + + + + + +
+ +

Slide out

+ + [No canvas support]
+ + +

+ + This effect slides the whole canvas out. One potential use would be to slide the canvas out and then + slide another canvas with a different chart in. You can specify that the canvas slides out to by using the second + argument as shown below. + + 

RGraph.Effects.jQuery.Slide.Out(obj, {'direction': 'bottom'});
+
+ + + + + + + +
+ +

Slide in

+ + [No canvas support]
+ + +

+ + This effect slides the whole canvas in. As mentioned above you could this effect with the Slinde Out effect to + create a slideshow. + + 

RGraph.Effects.jQuery.Slide.In(obj, {'direction': 'right'});
+
+ + + + + + + +
+ +

Unfold

+ + [No canvas support]
+ + +

+ + This effect "unfolds" the line from the origin, gradually increasing the X (and/or Y) values. There's also an example + of a combined Bar/Line chart with the Bar chart Grow, the Fade and the Line chart Unfold effects on the + combined charts page. + + 

RGraph.Effects.Line.Unfold(obj);
+
+ + + + + + + +
+ +

UnfoldFromCenter

+ + [No canvas support]
+ + +

+ + This effect "unfolds" the line from the center, gradually increasing or decreasing the Y values as appropriate. + + 

RGraph.Effects.Line.UnfoldFromCenter(obj);
+
+ + + + + + + +
+ +

FoldTocenter

+ + [No canvas support]
+ + +

+ + This effect "folds" the line to the center, gradually increasing or decreasing the Y values as appropriate. In + effect the opposite of the "unfold" effect. + + 

RGraph.Effects.Line.FoldToCenter(obj);
+
+ + + + + + + +
+ +

Line chart Trace

+ + [No canvas support]
+ + +

+ + This effect gradually traces the line across the chart - slowly revealing it in full. Not all Line chart options + (eg filled charts) work with this effect. + + 

RGraph.Effects.Line.jQuery.Trace(myLine14);
+
+ + + + + + + + + +
+ +

Rose chart Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the radius and the radius of each segment. It is not available with + non-equi-angular Rose charts. + + 

RGraph.Effects.Rose.Grow(obj);
+
+ + + + + + + + +
+ +

Odometer Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increase the value of the Odometer until it reaches the desired value. The second + argument is not used, but the third can be a Javascript function and will be called when the animation + is finished. + + 

RGraph.Effects.Odo.Grow(obj, null, myFunc);
+
+ + + + + + + + +
+ +

Meter Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the value of the Meter until it reaches the desired value. You can optionally specify an object map + as the second argument of which the only option is frames - allowing to specify the number of frames in the animation. + More frames = longer animation. The animation is set to use a frame rate of roughly 60 frames a second. + + 

RGraph.Effects.Meter.Grow(obj, {'frames': 90});
+
+ + + + + + + + +
+ +

HBar Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increase the values of the HBar until it reaches the desired value. + + 

RGraph.Effects.HBar.Grow(obj);
+
+ + + + + + + + +
+ +

Gauge Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the indicated value until it is correct. It's also shown on the + Gauge chart example page. By constantly updating the Gauge (with some AJAX + for example) you could make a control panel of sorts. + + 

RGraph.Effects.Gauge.Grow(obj);
+
+ + + + + + + + +
+ +

Radar Grow

+ + [No canvas support]
+ + +

+ + This effect gradually increases the magnitude of the Radar chart, growing outwards from the center. Multiple + data sets are supported. + + 

RGraph.Effects.Radar.Grow(obj);
+
+ + + + + + + + +
+ +

Waterfall Grow

+ + [No canvas support]
+ + +

+ + This effect gradually Grows the waterfall chart in both X and Y respects. + + 

RGraph.Effects.Waterfall.Grow(obj);
+
+ + + + + + + + +

Things to note

+
    +
  1. + With Fade in/out effects remember that just because you can't see the canvas (ie the opacity is 0) doesn't mean + that you can't interact with it, so tooltip hotspots will still be active. If you want to get rid of the canvas + entirely you need to remove it from the DOM. You can do this with the standard.removeNode function: + 
    obj.canvas.parentNode.removeChild(obj.canvas);
    + + This will leave a hole in the page though and will cause the page layout to change. If this is an issue you may + want to use the RGraph API function RGraph.Effects.ReplaceCanvasWithDIV(canvas). As the name + suggests, this function replaces the canvas with a DIV which has the same dimensions meaning your page structure + won't change. +
    2. + +
  2. + It should be noted that in order to prevent the canvas being constantly drawn on, it is cleared at the + start of the animation. +
    3. + +
  3. + In the jQuery animations here, the Google hosted jQuery is used: + + 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    +
    4. + +
  4. + Because canvas based animations may need to redraw the entire chart, + they can be slower than CSS based animations and depend on a variety of things - eg the speed of the users PC + and the work necessary to redraw the canvas. +
    5. +
+ + + \ No newline at end of file -- cgit v1.2.1