diff options
Diffstat (limited to 'schall/static/RGraph/docs/effects.html')
| -rw-r--r-- | schall/static/RGraph/docs/effects.html | 1448 |
1 files changed, 1448 insertions, 0 deletions
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 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="chrome=1"> + <!-- + /** + * 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 + */ + --> + <title>RGraph: HTML5 Javascript charts library - Animation and visual effects</title> + + <meta name="keywords" content="rgraph html5 canvas charts animation visual effects" /> + <meta name="description" content="RGraph: HTML5 Javascript charts library - Documentation about animation and visual effects" /> + + <meta property="og:title" content="RGraph: HTML5 Javascript charts library" /> + <meta property="og:description" content="A charts library based on the HTML5 canvas tag" /> + <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/> + + <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" /> + <link rel="icon" type="image/png" href="../images/favicon.png"> + + <!-- Place this tag in your head or just before your close body tag --> + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + + <script src="../libraries/RGraph.common.core.js" ></script> + <script src="../libraries/RGraph.common.tooltips.js" ></script> + <script src="../libraries/RGraph.common.effects.js" ></script> + <script src="../libraries/RGraph.bar.js" ></script> + <script src="../libraries/RGraph.fuel.js" ></script> + <script src="../libraries/RGraph.line.js" ></script> + <script src="../libraries/RGraph.pie.js" ></script> + <script src="../libraries/RGraph.rose.js" ></script> + <script src="../libraries/RGraph.odo.js" ></script> + <script src="../libraries/RGraph.meter.js" ></script> + <script src="../libraries/RGraph.hbar.js" ></script> + <script src="../libraries/RGraph.gauge.js" ></script> + <script src="../libraries/RGraph.radar.js" ></script> + <script src="../libraries/RGraph.waterfall.js" ></script> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script> + + + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-54706-2']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + </script> +</head> + +<body> + + + <!-- Social networking buttons --> + <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 120px; height: 20px"> + <!-- <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a> --> + <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank" title="Mention RGraph on Twitter"><img src="../images/twitter.png" alt="Mention RGraph on Twitter"/></a> + <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&href=http%3A%2F%2Fwww.rgraph.net&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe> + </div> + + <script> + // Opera fix + if (navigator.userAgent.indexOf('Opera') == -1) { + document.getElementById("social_icons").style.position = 'fixed'; + } + </script> + + <div id="google_plusone"> + <!-- Place this tag where you want the +1 button to render --> + <g:plusone href="http://www.rgraph.net"></g:plusone> + </div> + <!-- Social networking buttons --> + + <div id="breadcrumb"> + <a href="../index.html">RGraph: HTML5 Javascript charts library</a> + > + <a href="index.html">Documentation</a> + > + Animation and visual effects + </div> + + <h1>RGraph: <span>HTML5 Javascript charts library</span> - Animation and visual effects</h1> + + <ul> + <li><a href="#intro">Introduction</a></li> + <li><a href="#example.use">Example use</a></li> + <li><a href="#css.vs.canvas">CSS animation vs <canvas> animation</a></li> + <li><a href="#combining.effects">Combining effects</a></li> + <li><a href="#animate.function">The .Animate() function</a></li> + <li> + <a href="#available.effects">Available Effects</a> + <ul> + <li><a href="#fadein">Fade in</a></li> + <li><a href="#fadeout">Fade out</a></li> + <li><a href="#expand">Expand</a></li> + <li><a href="#snap">Snap</a></li> + <li><a href="#reveal">Reveal</a></li> + <li><a href="#hblinds.open">Horizontal blinds (open)</a></li> + <li><a href="#hblinds.close">Horizontal blinds (close)</a></li> + <li><a href="#vblinds.open">Vertical blinds (open)</a></li> + <li><a href="#vblinds.close">Vertical blinds (open)</a></li> + <li><a href="#pie.grow">Pie chart Grow</a></li> + <li><a href="#pie.implode">Pie chart Implode</a></li> + <li><a href="#pie.roundrobin">Pie chart RoundRobin</a></li> + <li><a href="#bar.grow">Bar chart Grow</a></li> + <li><a href="#fuel.grow">Fuel chart Grow</a></li> + <li><a href="#slideout">Slide out</a></li> + <li><a href="#slidein">Slide in</a></li> + <li><a href="#unfold">Line chart Unfold</a></li> + <li><a href="#unfoldfromcenter">Line chart UnfoldFromCenter</a></li> + <li><a href="#foldtocenter">Line chart FoldToCenter</a></li> + <li><a href="#line.trace">Line chart Trace</a></li> + <li><a href="#rose.grow">Rose chart Grow</a></li> + <li><a href="#odo.grow">Odometer Grow</a></li> + <li><a href="#meter.grow">Meter chart Grow</a></li> + <li><a href="#hbar.grow">HBar chart Grow</a></li> + <li><a href="#gauge.grow">Gauge chart Grow</a></li> + <li><a href="#radar.grow">Radar chart Grow</a></li> + <li><a href="#waterfall.grow">Waterfall chart Grow</a></li> + </ul> + </li> + <li><a href="animation_segments.html">An animated (interactive) Pie chart</a></li> + <li><a href="#things.to.note">Things to note</a></li> + </ul> + + + <a name="intro"></a> + <h3>Introduction</h3> + <p> + 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. + </p> + + + <a name="example.use"></a> + <h3>Example use</h3> + <p> + To use the effects you simply change your call to the .Draw() method to the appropriate effect function, like this: + </p> + + <pre class="code"> +<script src="RGraph.common.core.js" ></script> +<script src="RGraph.line.js" ></script> +<span style="color: green"><script src="RGraph.common.effects.js" ></script> +<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script></span> + +<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); + + <span style="color: gray">// myLine.Draw();</span> + <span style="color: green">RGraph.Effects.Fade.In(myLine);</span> +</script> +</pre> + + + <a name="css.vs.canvas"></a> + <h3>CSS animation vs <canvas> animation</h3> + <p> + 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. + </p> + + <p> + An alternative to the widely known and understood <i>setTimeout()</i> function is the newer <i>requestAnimationFrame()</i>. + 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. + </p> + + + <a name="combining.effects"></a> + <h3>Combining effects</h3> + <p> + 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. + </p> + +<canvas id="cvs" width="600" height="250">[No canvas support]</canvas><br /> +<script> + myBar = new RGraph.Bar('cvs', [[23,25, 27, 30], [30,25,29, 32], [27,28,35,33], [26,18,29,30], [31,20,25,27], [39,28,28,35], [27,29,28,29], [26,23,26,27], [30,20,19,21], [30,20,19,21], [30,20,19,21]]); + myBar.Set('chart.units.pre', '$'); + myBar.Set('chart.title', 'Sales in the last 8 months'); + myBar.Set('chart.title.vpos', 0.5); + myBar.Set('chart.colors', ['red', 'yellow', 'green', 'orange', 'gray']); + myBar.Set('chart.gutter.left', 40); + myBar.Set('chart.gutter.right', 5); + myBar.Set('chart.gutter.top', 40); + myBar.Set('chart.gutter.bottom', 50); + myBar.Set('chart.shadow', true); + myBar.Set('chart.shadow.color', '#bbb'); + myBar.Set('chart.shadow.blur', 3); + myBar.Set('chart.background.myBarcolor1', 'white'); + myBar.Set('chart.background.myBarcolor2', 'white'); + myBar.Set('chart.background.grid.autofit', true); + myBar.Set('chart.grouping', 'stacked'); + myBar.Set('chart.labels', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December']); + myBar.Set('chart.labels.above', true); + myBar.Set('chart.key', ['Richard', 'Barry', 'Johnny', 'Frederick']); + myBar.Set('chart.key.background', 'rgba(255,255,255,0.7)'); + myBar.Set('chart.key.position', 'gutter'); + myBar.Set('chart.key.position.gutter.boxed', false); + myBar.Set('chart.key.position.y', myBar.Get('chart.gutter.top') - 15); + myBar.Set('chart.key.border', false); + myBar.Set('chart.background.grid.width', 1); // Decimals are permitted + myBar.Set('chart.text.angle', 35); + myBar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + myBar.Set('chart.ymax', 150); + + function ShowCombination(obj) + { + RGraph.Effects.Fade.In(obj); + RGraph.Effects.jQuery.Reveal(obj); + RGraph.Effects.Bar.Grow(obj); + } +</script> +<button onclick="ShowCombination(myBar)" style="width: 500px">Show Combining animations example</button> + + <pre class="code"> +<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> +</pre> + + <p> + There's another example of combined effects on the <a href="combine.html"><b>combined charts page</b></a>. + </p> + + <a name="animate.function"></a> + <h3>The .Animate() function</h3> + <p> + 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: + </p> + + <ul> + <li>The graph object</li> + <li>A map of the target chart properties</li> + <li>(Optional) A function object which is called when the animation is complete (it is passed the chart object)</li> + </ul> + + <p>An example of it use is below. It should be used instead of calling the .Draw() method:</p> + + <canvas id="animateCanvas" width="600" height="200">[No canvas support]</canvas><br /> + <script> + animateObj = new RGraph.Bar('animateCanvas', [3,8,4,5,9,6,3,5,7,3]); + + var grad = animateObj.context.createLinearGradient(0,25,0,300); + grad.addColorStop(0, 'white'); + grad.addColorStop(1, 'blue'); + + animateObj.Set('chart.colors', [grad]); + animateObj.Set('chart.labels', ['Indigo','Kev','Per','Pete','Lou','Joe','Fred','Carol','Lisa','Jeff']); + animateObj.Set('chart.title', 'An example bar chart'); + animateObj.Set('chart.hmargin', 27.5); + animateObj.Set('chart.tooltips', ['Indigo','Kev','Per','Pete','Lou','Joe','Fred','Carol','Lisa','Jeff']); + + function myAnimateCallback () + { + alert('A sample callback using the alert() function'); + } + </script> + + <button onclick="RGraph.Clear(animateObj.canvas);animateObj.Set('chart.hmargin', 27.5);RGraph.Effects.Animate(animateObj, {'chart.hmargin': 3}, myAnimateCallback);">Show example</button> + + <pre class="code"> +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); +</pre> + + <a name="available.effects"></a> + <h3>Available effects</h3> + + <p> + These are the effects available. You can achieve more effects by using the <a href="#animate.function">.Animate()</a> function, + which allows you to animate any numeric RGraph property. + </p> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fadein"></a> + <h4>Fade in</h4> + + <canvas id="myLine" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Fade.In(myLine);" style="width: 500px">Show Fade in effect</button> + + <p /> + + A simple fade in effect where the canvas is initially drawn with an opacity of zero, increasing to one. + + <pre class="code">RGraph.Effects.Fade.In(obj);</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine = new RGraph.Line('myLine', data); + myLine.Set('chart.gutter.top', 35); + myLine.Set('chart.gutter.left', 40 ); + myLine.Set('chart.gutter.right', 5); + myLine.Set('chart.gutter.bottom', 25); + myLine.Set('chart.colors', ['red', 'black']); + myLine.Set('chart.units.post', '%'); + myLine.Set('chart.tickmarks', null); + myLine.Set('chart.shadow', true); + myLine.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine.Set('chart.shadow.blur', 15); + myLine.Set('chart.shadow.color', '#f66'); + myLine.Set('chart.linewidth', 1); + myLine.Set('chart.hmargin', 10); + myLine.Set('chart.background.grid.width', 1); + myLine.Set('chart.background.grid.color', '#ddd'); + myLine.Set('chart.background.barcolor1', 'white'); + myLine.Set('chart.background.barcolor2', 'white'); + myLine.Set('chart.background.grid.autofit', true); + myLine.Set('chart.background.grid.autofit.numvlines', 12); + myLine.Set('chart.background.grid.autofit.numhlines', 5); + myLine.Set('chart.text.color', '#333'); + myLine.Set('chart.noaxes', true); + myLine.Set('chart.text.font', 'Arial'); + myLine.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fadeout"></a> + <h4>Fade out</h4> + + <canvas id="myLine2" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Fade.Out(myLine2);" style="width: 500px">Show Fade out effect</button> + + <p /> + + A simple fade out effect to accompany the fade in, where the canvas initially has an opacity of one, decreasing + to zero. + + <pre class="code">RGraph.Effects.Fade.Out(obj);</pre> + </div> + + <script> + var myLine2 = new RGraph.Line('myLine2', data); + myLine2.Set('chart.gutter.top', 35); + myLine2.Set('chart.gutter.left', 40 ); + myLine2.Set('chart.gutter.right', 5); + myLine2.Set('chart.gutter.bottom', 25); + myLine2.Set('chart.colors', ['red', 'black']); + myLine2.Set('chart.units.post', '%'); + myLine2.Set('chart.tickmarks', null); + myLine2.Set('chart.shadow', true); + myLine2.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine2.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine2.Set('chart.shadow.blur', 15); + myLine2.Set('chart.shadow.color', '#f66'); + myLine2.Set('chart.linewidth', 1); + myLine2.Set('chart.hmargin', 10); + myLine2.Set('chart.background.grid.width', 1); + myLine2.Set('chart.background.grid.color', '#ddd'); + myLine2.Set('chart.background.barcolor1', 'white'); + myLine2.Set('chart.background.barcolor2', 'white'); + myLine2.Set('chart.background.grid.autofit', true); + myLine2.Set('chart.background.grid.autofit.numvlines', 12); + myLine2.Set('chart.background.grid.autofit.numhlines', 5); + myLine2.Set('chart.text.color', '#333'); + myLine2.Set('chart.noaxes', true); + myLine2.Set('chart.text.font', 'Arial'); + myLine2.Set('chart.labels', labels); + myLine2.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="expand"></a> + <h4>Expand</h4> + + <canvas id="myLine3" width="480" height="150" style="float: left">[No canvas support]</canvas> + <br clear="all" /> + <button onclick="RGraph.Effects.jQuery.Expand(myLine3)" style="width: 500px">Show Expand effect</button> + + <p /> + + 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%. + + <pre class="code">RGraph.Effects.jQuery.Expand(obj);</pre> + </div> + + <script> + var myLine3 = new RGraph.Line('myLine3', data); + myLine3.Set('chart.gutter.top', 35); + myLine3.Set('chart.gutter.left', 40 ); + myLine3.Set('chart.gutter.right', 5); + myLine3.Set('chart.gutter.bottom', 25); + myLine3.Set('chart.colors', ['red', 'black']); + myLine3.Set('chart.units.post', '%'); + myLine3.Set('chart.tickmarks', null); + myLine3.Set('chart.shadow', true); + myLine3.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine3.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine3.Set('chart.shadow.blur', 15); + myLine3.Set('chart.shadow.color', '#f66'); + myLine3.Set('chart.linewidth', 1); + myLine3.Set('chart.hmargin', 10); + myLine3.Set('chart.background.grid.width', 1); + myLine3.Set('chart.background.grid.color', '#ddd'); + myLine3.Set('chart.background.barcolor1', 'white'); + myLine3.Set('chart.background.barcolor2', 'white'); + myLine3.Set('chart.background.grid.autofit', true); + myLine3.Set('chart.background.grid.autofit.numvlines', 12); + myLine3.Set('chart.background.grid.autofit.numhlines', 5); + myLine3.Set('chart.text.color', '#333'); + myLine3.Set('chart.noaxes', true); + myLine3.Set('chart.text.font', 'Arial'); + myLine3.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="snap"></a> + <h4>Snap</h4> + + <canvas id="myLine4" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Snap(myLine4);">Show Snap effect</button> + + <p /> + + This effect is similar to the tooltip effect "snap" in that it "snaps" to the correct position, + moving in from the top left. + + <pre class="code">RGraph.Effects.jQuery.Snap(obj);</pre> + </div> + + <script> + var myLine4 = new RGraph.Line('myLine4', data); + myLine4.Set('chart.gutter.top', 35); + myLine4.Set('chart.gutter.left', 40 ); + myLine4.Set('chart.gutter.right', 5); + myLine4.Set('chart.gutter.bottom', 25); + myLine4.Set('chart.colors', ['red', 'black']); + myLine4.Set('chart.units.post', '%'); + myLine4.Set('chart.tickmarks', null); + myLine4.Set('chart.shadow', true); + myLine4.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine4.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine4.Set('chart.shadow.blur', 15); + myLine4.Set('chart.shadow.color', '#f66'); + myLine4.Set('chart.linewidth', 1); + myLine4.Set('chart.hmargin', 10); + myLine4.Set('chart.background.grid.width', 1); + myLine4.Set('chart.background.grid.color', '#ddd'); + myLine4.Set('chart.background.barcolor1', 'white'); + myLine4.Set('chart.background.barcolor2', 'white'); + myLine4.Set('chart.background.grid.autofit', true); + myLine4.Set('chart.background.grid.autofit.numvlines', 12); + myLine4.Set('chart.background.grid.autofit.numhlines', 5); + myLine4.Set('chart.text.color', '#333'); + myLine4.Set('chart.noaxes', true); + myLine4.Set('chart.text.font', 'Arial'); + myLine4.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="reveal"></a> + <h4>Reveal</h4> + + <canvas id="myLine5" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Reveal(myLine5);">Show Reveal effect</button> + + <p /> + + 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). + + <pre class="code">RGraph.Effects.jQuery.Reveal(obj);</pre> + </div> + + <script> + var myLine5 = new RGraph.Line('myLine5', data); + myLine5.Set('chart.gutter.top', 35); + myLine5.Set('chart.gutter.left', 40 ); + myLine5.Set('chart.gutter.right', 5); + myLine5.Set('chart.gutter.bottom', 25); + myLine5.Set('chart.colors', ['red', 'black']); + myLine5.Set('chart.units.post', '%'); + myLine5.Set('chart.tickmarks', null); + myLine5.Set('chart.shadow', true); + myLine5.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine5.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine5.Set('chart.shadow.blur', 15); + myLine5.Set('chart.shadow.color', '#f66'); + myLine5.Set('chart.linewidth', 1); + myLine5.Set('chart.hmargin', 10); + myLine5.Set('chart.background.grid.width', 1); + myLine5.Set('chart.background.grid.color', '#ddd'); + myLine5.Set('chart.background.barcolor1', 'white'); + myLine5.Set('chart.background.barcolor2', 'white'); + myLine5.Set('chart.background.grid.autofit', true); + myLine5.Set('chart.background.grid.autofit.numvlines', 12); + myLine5.Set('chart.background.grid.autofit.numhlines', 5); + myLine5.Set('chart.text.color', '#333'); + myLine5.Set('chart.noaxes', true); + myLine5.Set('chart.text.font', 'Arial'); + myLine5.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="hblinds.open"></a> + <h4>Horizontal Blinds (open)</h4> + + <canvas id="myLine6" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.HBlinds.Open(myLine6)">Show horizontal blinds (open) effect</button> + + <p /> + + This effect gradually reveals the canvas by "opening some horizontal blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.Blinds.Open(obj);</pre> + </div> + + <script> + var myLine6 = new RGraph.Line('myLine6', data); + myLine6.Set('chart.gutter.top', 35); + myLine6.Set('chart.gutter.left', 40 ); + myLine6.Set('chart.gutter.right', 5); + myLine6.Set('chart.gutter.bottom', 25); + myLine6.Set('chart.colors', ['red', 'black']); + myLine6.Set('chart.units.post', '%'); + myLine6.Set('chart.tickmarks', null); + myLine6.Set('chart.shadow', true); + myLine6.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine6.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine6.Set('chart.shadow.blur', 15); + myLine6.Set('chart.shadow.color', '#f66'); + myLine6.Set('chart.linewidth', 1); + myLine6.Set('chart.hmargin', 10); + myLine6.Set('chart.background.grid.width', 1); + myLine6.Set('chart.background.grid.color', '#ddd'); + myLine6.Set('chart.background.barcolor1', 'white'); + myLine6.Set('chart.background.barcolor2', 'white'); + myLine6.Set('chart.background.grid.autofit', true); + myLine6.Set('chart.background.grid.autofit.numvlines', 12); + myLine6.Set('chart.background.grid.autofit.numhlines', 5); + myLine6.Set('chart.text.color', '#333'); + myLine6.Set('chart.noaxes', true); + myLine6.Set('chart.text.font', 'Arial'); + myLine6.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="hblinds.close"></a> + <h4>Horizontal Blinds (close)</h4> + + <canvas id="myLine7" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.HBlinds.Close(myLine7);">Show horizonatal blinds (Close) effect</button> + + <p /> + + This effect gradually conceals the canvas by "closing some horizontal blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.HBlinds.Close(obj);</pre> + </div> + + <script> + var myLine7 = new RGraph.Line('myLine7', data); + myLine7.Set('chart.gutter.top', 35); + myLine7.Set('chart.gutter.left', 40 ); + myLine7.Set('chart.gutter.right', 5); + myLine7.Set('chart.gutter.bottom', 25); + myLine7.Set('chart.colors', ['red', 'black']); + myLine7.Set('chart.units.post', '%'); + myLine7.Set('chart.tickmarks', null); + myLine7.Set('chart.shadow', true); + myLine7.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine7.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine7.Set('chart.shadow.blur', 15); + myLine7.Set('chart.shadow.color', '#f66'); + myLine7.Set('chart.linewidth', 1); + myLine7.Set('chart.hmargin', 10); + myLine7.Set('chart.background.grid.width', 1); + myLine7.Set('chart.background.grid.color', '#ddd'); + myLine7.Set('chart.background.barcolor1', 'white'); + myLine7.Set('chart.background.barcolor2', 'white'); + myLine7.Set('chart.background.grid.autofit', true); + myLine7.Set('chart.background.grid.autofit.numvlines', 12); + myLine7.Set('chart.background.grid.autofit.numhlines', 5); + myLine7.Set('chart.text.color', '#333'); + myLine7.Set('chart.noaxes', true); + myLine7.Set('chart.text.font', 'Arial'); + myLine7.Set('chart.labels', labels); + myLine7.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="vblinds.open"></a> + <h4>Vertical Blinds (open)</h4> + + <canvas id="myLine8" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.VBlinds.Open(myLine8);"">Show vertical blinds (Open) effect</button> + + <p /> + + This effect gradually reveals the canvas by "opening some vertical blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.VBlinds.Open(obj);</pre> + </div> + + <script> + var myLine8 = new RGraph.Line('myLine8', data); + myLine8.Set('chart.gutter.top', 35); + myLine8.Set('chart.gutter.left', 40 ); + myLine8.Set('chart.gutter.right', 5); + myLine8.Set('chart.gutter.bottom', 25); + myLine8.Set('chart.colors', ['red', 'black']); + myLine8.Set('chart.units.post', '%'); + myLine8.Set('chart.tickmarks', null); + myLine8.Set('chart.shadow', true); + myLine8.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine8.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine8.Set('chart.shadow.blur', 15); + myLine8.Set('chart.shadow.color', '#f66'); + myLine8.Set('chart.linewidth', 1); + myLine8.Set('chart.hmargin', 10); + myLine8.Set('chart.background.grid.width', 1); + myLine8.Set('chart.background.grid.color', '#ddd'); + myLine8.Set('chart.background.barcolor1', 'white'); + myLine8.Set('chart.background.barcolor2', 'white'); + myLine8.Set('chart.background.grid.autofit', true); + myLine8.Set('chart.background.grid.autofit.numvlines', 12); + myLine8.Set('chart.background.grid.autofit.numhlines', 5); + myLine8.Set('chart.text.color', '#333'); + myLine8.Set('chart.noaxes', true); + myLine8.Set('chart.text.font', 'Arial'); + myLine8.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="vblinds.close"></a> + <h4>Vertical Blinds (Close)</h4> + + <canvas id="myLine9" width="480" height="150">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.VBlinds.Close(myLine9, {remove: true});">Show vertical blinds (close) effect</button> + + <p /> + + This effect gradually conceals the canvas by "closing some vertical blinds", which are positioned + over the canvas. + + <pre class="code">RGraph.Effects.jQuery.VBlinds.Close(obj);</pre> + </div> + + <script> + var myLine9 = new RGraph.Line('myLine9', data); + myLine9.Set('chart.gutter.top', 35); + myLine9.Set('chart.gutter.left', 40 ); + myLine9.Set('chart.gutter.right', 5); + myLine9.Set('chart.gutter.bottom', 25); + myLine9.Set('chart.colors', ['red', 'black']); + myLine9.Set('chart.units.post', '%'); + myLine9.Set('chart.tickmarks', null); + myLine9.Set('chart.shadow', true); + myLine9.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine9.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine9.Set('chart.shadow.blur', 15); + myLine9.Set('chart.shadow.color', '#f66'); + myLine9.Set('chart.linewidth', 1); + myLine9.Set('chart.hmargin', 10); + myLine9.Set('chart.background.grid.width', 1); + myLine9.Set('chart.background.grid.color', '#ddd'); + myLine9.Set('chart.background.barcolor1', 'white'); + myLine9.Set('chart.background.barcolor2', 'white'); + myLine9.Set('chart.background.grid.autofit', true); + myLine9.Set('chart.background.grid.autofit.numvlines', 12); + myLine9.Set('chart.background.grid.autofit.numhlines', 5); + myLine9.Set('chart.text.color', '#333'); + myLine9.Set('chart.noaxes', true); + myLine9.Set('chart.text.font', 'Arial'); + myLine9.Set('chart.labels', labels); + myLine9.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.grow"></a> + <h4>Pie chart Grow</h4> + + <canvas id="myPie" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.Grow(myPie);">Show Pie chart Grow effect</button> + + <p /> + + This effect gradually increases the radius of the Pie chart, expanding out from the centre. + + <pre class="code">RGraph.Effects.Pie.Grow(obj);</pre> + </div> + + <script> + var myPie = new RGraph.Pie('myPie', [2,3,6,4,45]); + myPie.Set('chart.shadow', true); + myPie.Set('chart.shadow.offsetx', 0); + myPie.Set('chart.shadow.offsety', 0); + myPie.Set('chart.shadow.blur', 15); + myPie.Set('chart.strokestyle', 'white'); + myPie.Set('chart.linewidth', 2); + myPie.Set('chart.exploded', [0,0,0,25,25]); + myPie.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.implode"></a> + <h4>Pie chart Implode</h4> + + <canvas id="myPie2" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.Implode(myPie2);">Show Pie chart Implode effect</button> + + <p /> + + 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. + + <pre class="code"> +RGraph.Effects.Pie.Implode(obj); +//RGraph.Effects.Pie.RoundRobin(obj); +</pre> + </div> + + <script> + var myPie2 = new RGraph.Pie('myPie2', [2,3,6,4,45]); + myPie2.Set('chart.shadow', true); + myPie2.Set('chart.shadow.offsetx', 0); + myPie2.Set('chart.shadow.offsety', 0); + myPie2.Set('chart.shadow.blur', 15); + myPie2.Set('chart.strokestyle', 'white'); + myPie2.Set('chart.linewidth', 2); + myPie2.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie2.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie2.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="pie.roundrobin"></a> + <h4>Pie chart RoundRobin</h4> + + <canvas id="myPie3" width="400" height="300">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Pie.RoundRobin(myPie3)">Show Pie chart RoundRobin effect</button> + + <p /> + + 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. + + <pre class="code"> +RGraph.Effects.Pie.RoundRobin(obj); +//RGraph.Effects.Pie.Implode(obj); +</pre> + </div> + + <script> + var myPie3 = new RGraph.Pie('myPie3', [2,3,6,4,45]); + myPie3.Set('chart.shadow', true); + myPie3.Set('chart.shadow.offsetx', 0); + myPie3.Set('chart.shadow.offsety', 0); + myPie3.Set('chart.shadow.blur', 15); + myPie3.Set('chart.strokestyle', 'white'); + myPie3.Set('chart.linewidth', 2); + myPie3.Set('chart.labels', ['Rod','Jane','Todd','Mark','Freddy']); + myPie3.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']); + myPie3.Set('chart.highlight.style', '2d'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="bar.grow"></a> + <h4>Bar chart Grow</h4> + + <canvas id="myBar" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Bar.Grow(bar);">Show Bar chart Grow effect</button> + + <p /> + + This effect gradually increases the size of the bars on the bar chart until they are at full size. + + <pre class="code">RGraph.Effects.Bar.Grow(obj);</pre> + </div> + + <script> + var bar = new RGraph.Bar('myBar', [45,53,56,64,76,78,79,81,45,43]); + + var grad = bar.context.createLinearGradient(0,0,0,200); + grad.addColorStop(0, 'red'); + grad.addColorStop(1, 'white'); + + bar.Set('chart.labels', ['John','Fred','Lou','Youseff','Kev','Pete','Hoolio','Nevil','Jobe','Ray']); + bar.Set('chart.ymax', 85); // Stops the scale changing + bar.Set('chart.shadow', true); + bar.Set('chart.shadow.offsetx', 0); + bar.Set('chart.shadow.offsety', 0); + bar.Set('chart.shadow.color', '#ccc'); + bar.Set('chart.shadow.blur', 15); + bar.Set('chart.colors', [grad]); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="fuel.grow"></a> + <h4>Fuel chart Grow</h4> + + <canvas id="myFuel" width="200" height="200">[No canvas support]</canvas><br /> + <button onclick="drawFuel()">Show Fuel chart Grow effect</button> + + <p /> + + This effect gradually increases the indicated value until it reaches the correct value. + + <pre class="code">RGraph.Effects.Fuel.Grow(obj);</pre> + </div> + + <script> + function drawFuel () + { + var fuel = new RGraph.Fuel('myFuel', 0, 100, 67); + RGraph.Effects.Fuel.Grow(fuel); + } + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="slideout"></a> + <h4>Slide out</h4> + + <canvas id="myLine10" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Slide.Out(myLine10, {'direction':'left'});">Show slide out effect</button> + + <p /> + + 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. + + <pre class="code">RGraph.Effects.jQuery.Slide.Out(obj, {'direction': 'bottom'});</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine10 = new RGraph.Line('myLine10', data); + + myLine10.Set('chart.gutter.top', 35); + myLine10.Set('chart.gutter.left', 40 ); + myLine10.Set('chart.gutter.right', 5); + myLine10.Set('chart.gutter.bottom', 25); + myLine10.Set('chart.colors', ['red', 'black']); + myLine10.Set('chart.units.post', '%'); + myLine10.Set('chart.tickmarks', null); + myLine10.Set('chart.shadow', true); + myLine10.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine10.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine10.Set('chart.shadow.blur', 15); + myLine10.Set('chart.shadow.color', '#f66'); + myLine10.Set('chart.linewidth', 1); + myLine10.Set('chart.hmargin', 10); + myLine10.Set('chart.background.grid.width', 1); + myLine10.Set('chart.background.grid.color', '#ddd'); + myLine10.Set('chart.background.barcolor1', 'white'); + myLine10.Set('chart.background.barcolor2', 'white'); + myLine10.Set('chart.background.grid.autofit', true); + myLine10.Set('chart.background.grid.autofit.numvlines', 12); + myLine10.Set('chart.background.grid.autofit.numhlines', 5); + myLine10.Set('chart.text.color', '#333'); + myLine10.Set('chart.noaxes', true); + myLine10.Set('chart.text.font', 'Arial'); + myLine10.Set('chart.labels', labels); + myLine10.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="slidein"></a> + <h4>Slide in</h4> + + <canvas id="myLine11" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.jQuery.Slide.In(myLine11, {'direction':'right'})">Show slide in effect</button> + + <p /> + + This effect slides the whole canvas in. As mentioned above you could this effect with the Slinde Out effect to + create a slideshow. + + <pre class="code">RGraph.Effects.jQuery.Slide.In(obj, {'direction': 'right'});</pre> + </div> + + <script> + var data = [1,2,4,6,8,10,12,15,21,29,36,45]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine11 = new RGraph.Line('myLine11', data); + + myLine11.Set('chart.gutter.top', 35); + myLine11.Set('chart.gutter.left', 40 ); + myLine11.Set('chart.gutter.right', 5); + myLine11.Set('chart.gutter.bottom', 25); + myLine11.Set('chart.colors', ['red', 'black']); + myLine11.Set('chart.units.post', '%'); + myLine11.Set('chart.tickmarks', null); + myLine11.Set('chart.shadow', true); + myLine11.Set('chart.shadow.offsety', RGraph.isIE8() ? 3 : 0); + myLine11.Set('chart.shadow.offsetx', RGraph.isIE8() ? 3 : 0); + myLine11.Set('chart.shadow.blur', 15); + myLine11.Set('chart.shadow.color', '#f66'); + myLine11.Set('chart.linewidth', 1); + myLine11.Set('chart.hmargin', 10); + myLine11.Set('chart.background.grid.width', 1); + myLine11.Set('chart.background.grid.color', '#ddd'); + myLine11.Set('chart.background.barcolor1', 'white'); + myLine11.Set('chart.background.barcolor2', 'white'); + myLine11.Set('chart.background.grid.autofit', true); + myLine11.Set('chart.background.grid.autofit.numvlines', 12); + myLine11.Set('chart.background.grid.autofit.numhlines', 5); + myLine11.Set('chart.text.color', '#333'); + myLine11.Set('chart.noaxes', true); + myLine11.Set('chart.text.font', 'Arial'); + myLine11.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="unfold"></a> + <h4>Unfold</h4> + + <canvas id="myLine12" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.Unfold(myLine12)">Show Line chart Unfold effect</button> + + <p /> + + 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 + <a href="combine.html"><b>combined charts page</b></a>. + + <pre class="code">RGraph.Effects.Line.Unfold(obj);</pre> + </div> + + <script> + var data = [43,54,35,36,40,12,26,34]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine12 = new RGraph.Line('myLine12', data); + + myLine12.Set('chart.gutter.top', 35); + myLine12.Set('chart.gutter.left', 40 ); + myLine12.Set('chart.gutter.right', 5); + myLine12.Set('chart.gutter.bottom', 25); + myLine12.Set('chart.colors', ['red', 'black']); + myLine12.Set('chart.units.post', '%'); + myLine12.Set('chart.tickmarks', null); + myLine12.Set('chart.shadow', true); + myLine12.Set('chart.shadow.offsety', 2); + myLine12.Set('chart.shadow.offsetx', 2); + myLine12.Set('chart.shadow.blur', 0); + myLine12.Set('chart.shadow.color', '#999'); + myLine12.Set('chart.linewidth', 2); + myLine12.Set('chart.hmargin', 10); + myLine12.Set('chart.background.grid.width', 1); + myLine12.Set('chart.background.grid.color', '#ddd'); + myLine12.Set('chart.background.barcolor1', 'white'); + myLine12.Set('chart.background.barcolor2', 'white'); + myLine12.Set('chart.background.grid.autofit', true); + myLine12.Set('chart.background.grid.autofit.numvlines', 12); + myLine12.Set('chart.background.grid.autofit.numhlines', 5); + myLine12.Set('chart.text.color', '#333'); + myLine12.Set('chart.noaxes', true); + myLine12.Set('chart.text.font', 'Arial'); + myLine12.Set('chart.labels', labels); + + myLine12.Set('chart.animation.unfold.x', true); + myLine12.Set('chart.animation.unfold.y',true); + myLine12.Set('chart.animation.unfold.initial',0); // Default is 2 + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="unfoldfromcenter"></a> + <h4>UnfoldFromCenter</h4> + + <canvas id="myLine13" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.UnfoldFromCenter(myLine13)">Show Line chart UnfoldFromCenter effect</button> + + <p /> + + This effect "unfolds" the line from the <b>center</b>, gradually increasing or decreasing the Y values as appropriate. + + <pre class="code">RGraph.Effects.Line.UnfoldFromCenter(obj);</pre> + </div> + + <script> + var data = [1,3,5,10,10,8,7,6,9,8,4,7,4,2,3,4]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + var myLine13 = new RGraph.Line('myLine13', data); + + myLine13.Set('chart.gutter.top', 35); + myLine13.Set('chart.gutter.left', 40 ); + myLine13.Set('chart.gutter.right', 5); + myLine13.Set('chart.gutter.bottom', 25); + myLine13.Set('chart.colors', ['red', 'black']); + myLine13.Set('chart.units.post', '%'); + myLine13.Set('chart.tickmarks', null); + myLine13.Set('chart.shadow', true); + myLine13.Set('chart.shadow.offsety', 2); + myLine13.Set('chart.shadow.offsetx', 2); + myLine13.Set('chart.shadow.blur', 3); + myLine13.Set('chart.shadow.color', '#999'); + myLine13.Set('chart.linewidth', 2); + myLine13.Set('chart.hmargin', 10); + myLine13.Set('chart.background.grid.width', 1); + myLine13.Set('chart.background.grid.color', '#ddd'); + myLine13.Set('chart.background.barcolor1', 'white'); + myLine13.Set('chart.background.barcolor2', 'white'); + myLine13.Set('chart.background.grid.autofit', true); + myLine13.Set('chart.background.grid.autofit.numvlines', 12); + myLine13.Set('chart.background.grid.autofit.numhlines', 5); + myLine13.Set('chart.text.color', '#333'); + myLine13.Set('chart.noaxes', true); + myLine13.Set('chart.text.font', 'Arial'); + myLine13.Set('chart.labels', labels); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="foldtocenter"></a> + <h4>FoldTocenter</h4> + + <canvas id="myc" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Line.FoldToCenter(myLinef2c)">Show Line chart FoldTromCenter effect</button> + + <p /> + + This effect "folds" the line to the <b>center</b>, gradually increasing or decreasing the Y values as appropriate. In + effect the opposite of the "unfold" effect. + + <pre class="code">RGraph.Effects.Line.FoldToCenter(obj);</pre> + </div> + + <script> + data = [ + [1,3,5,10,10,8,7,6,9,8,4,7,4,2,3,4], + [4,5,8,6,4,3,9,8,7,5,4,6,5,4,8,9] + ]; + labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec'] + + myLinef2c = new RGraph.Line('myc', data); + myLinef2c.Set('chart.hmargin', 10); + myLinef2c.Set('chart.tickmarks', 'endcircle'); + myLinef2c.Set('chart.shadow', true); + myLinef2c.Set('chart.linewidth', 3); + myLinef2c.Set('chart.labels', labels); + myLinef2c.Set('chart.units.post', '%'); + myLinef2c.Set('chart.shadow', true); + myLinef2c.Set('chart.shadow.offsety', 2); + myLinef2c.Set('chart.shadow.offsetx', 2); + myLinef2c.Set('chart.shadow.blur', 3); + myLinef2c.Set('chart.shadow.color', '#999'); + myLinef2c.Set('chart.gutter.left', 35); + myLinef2c.Draw(); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <div> + <a name="line.trace"></a> + <h4>Line chart Trace</h4> + + <canvas id="myLine14" width="600" height="200">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myLine14.canvas);RGraph.Effects.Line.jQuery.Trace(myLine14)">Show Line chart Trace effect</button> + + <p /> + + 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. + + <pre class="code">RGraph.Effects.Line.jQuery.Trace(myLine14);</pre> + </div> + + <script> + var data1 = [1,3,5,10,10,8,7,6,9,8,4,7]; + var data2 = [4,6,5,9,8,4,8,6,1,2,3,4]; + var labels = ['Jan','Feb','Mar','Apr','May','jun','jul','Aug','Sep','Oct','Nov','Dec']; + + myLine14 = new RGraph.Line('myLine14', [data1, data2]); + myLine14.Set('chart.labels', labels); + myLine14.Set('chart.tooltips', labels); + myLine14.Set('chart.hmargin', 10); + myLine14.Set('chart.linewidth', 3); + myLine14.Set('chart.filled', true); + myLine14.Set('chart.fillstyle', ['red', 'pink']); + myLine14.Set('chart.colors', ['black', 'black']); + </script> + + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="rose.grow"></a> + <h4>Rose chart Grow</h4> + + <canvas id="myRose" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Rose.Grow(myRose)">Show Rose chart Grow effect</button> + + <p /> + + This effect gradually increases the radius and the radius of each segment. It is not available with + <i>non-equi-angular</i> Rose charts. + + <pre class="code">RGraph.Effects.Rose.Grow(obj);</pre> + </div> + + <script> + var myRose = new RGraph.Rose('myRose', [[12,15,13],[13,16,19],[19,12,16],[20,21,24],[22,23,26]]); + myRose.Set('chart.tooltips', [ + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev', + 'John','Fred','Kev' + ]); + myRose.Set('chart.colors.alpha', 0.5); + myRose.Set('chart.margin', 5); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="odo.grow"></a> + <h4>Odometer Grow</h4> + + <canvas id="myOdo" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="myOdo.value = RGraph.random(0, 360);RGraph.Effects.Odo.Grow(myOdo); event.cancelBubble = true; return false">Show Odo chart Grow effect</button> + + <p /> + + 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. + + <pre class="code">RGraph.Effects.Odo.Grow(obj, null, myFunc);</pre> + </div> + + <script> + var myOdo = new RGraph.Odometer('myOdo', 0, 360, 95); + myOdo.Set('chart.needle.color', 'black'); + myOdo.Set('chart.needle.tail', false); + myOdo.Set('chart.label.area', 35); + myOdo.Set('chart.border', RGraph.isIE8() ? false : true); + myOdo.Set('chart.title.vpos', 0.3); + myOdo.Set('chart.labels', ['N','NE','E','SE','S','SW','W','NW']); + myOdo.Set('chart.red.min', 360); + myOdo.Set('chart.red.color', 'gray'); + myOdo.Set('chart.value.text', true); + myOdo.Set('chart.value.text.decimals', 0); + myOdo.Set('chart.value.units.post', '°'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="meter.grow"></a> + <h4>Meter Grow</h4> + + <canvas id="myMeter" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.Meter.Grow(meter, {'frames': 60});">Show Meter chart Grow effect</button> + + <p /> + + 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 <i>frames</i> - 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. + + <pre class="code">RGraph.Effects.Meter.Grow(obj, {'frames': 90});</pre> + </div> + + <script> + var meter = new RGraph.Meter('myMeter', 0, 10, 5); + meter.Set('chart.units.post', 'kg'); + meter.Set('chart.red.start', 0); + meter.Set('chart.red.end', 3); + meter.Set('chart.yellow.start', 3); + meter.Set('chart.yellow.end', 6); + meter.Set('chart.green.start', 6); + meter.Set('chart.green.end', 10); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="hbar.grow"></a> + <h4>HBar Grow</h4> + + <canvas id="myHbar" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Effects.HBar.Grow(hbar); RGraph.Effects.Fade.In(hbar);">Show HBar chart Grow effect</button> + + <p /> + + This effect gradually increase the values of the HBar until it reaches the desired value. + + <pre class="code">RGraph.Effects.HBar.Grow(obj);</pre> + </div> + + <script> + var hbar = new RGraph.HBar('myHbar', [[43,45],[85,4],[46, 34],[52, 12],[62, 35],[63, 24],[45, 41]]); + hbar.Set('chart.grouping', 'stacked'); + hbar.Set('chart.shadow', true); + hbar.Set('chart.shadow.color', '#ccc'); + hbar.Set('chart.shadow.offsetx', 0); + hbar.Set('chart.shadow.offsety', 0); + hbar.Set('chart.shadow.blur', 15); + hbar.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']); + hbar.Set('chart.gutter.left', 100); + hbar.Set('chart.strokestyle', 'rgba(0,0,0,0)'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="gauge.grow"></a> + <h4>Gauge Grow</h4> + + <canvas id="myGauge" width="450" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myGauge.canvas);myGauge.value = RGraph.random(50,100);RGraph.Effects.Gauge.Grow(myGauge);">Show Gauge chart Grow effect</button> + + <p /> + + This effect gradually increases the indicated value until it is correct. It's also shown on the + <a href="../examples/gauge.html">Gauge chart example page</a>. By constantly updating the Gauge (with some AJAX + for example) you could make a control panel of sorts. + + <pre class="code">RGraph.Effects.Gauge.Grow(obj);</pre> + </div> + + <script> + var myGauge = new RGraph.Gauge('myGauge', 0, 100,59); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="radar.grow"></a> + <h4>Radar Grow</h4> + + <canvas id="myRadar" width="350" height="350">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myRadar.canvas);RGraph.Effects.Radar.Grow(myRadar);RGraph.Effects.Fade.In(myRadar)">Show Radar chart Grow effect</button> + + <p /> + + This effect gradually increases the magnitude of the Radar chart, growing outwards from the center. Multiple + data sets are supported. + + <pre class="code">RGraph.Effects.Radar.Grow(obj);</pre> + </div> + + <script> + var myRadar = new RGraph.Radar('myRadar', [4,6,3,5,8,6,9,5,4]); + myRadar.Set('chart.colors.alpha', 0.5); + </script> + + +<!------------------------------------------------------------------------------------------> + + + + <div> + <a name="waterfall.grow"></a> + <h4>Waterfall Grow</h4> + + <canvas id="myWaterfall" width="550" height="250">[No canvas support]</canvas><br /> + <button onclick="RGraph.Clear(myWaterfall.canvas);RGraph.Effects.Waterfall.Grow(myWaterfall);RGraph.Effects.Fade.In(myWaterfall)">Show Waterfall chart Grow effect</button> + + <p /> + + This effect gradually Grows the waterfall chart in both X and Y respects. + + <pre class="code">RGraph.Effects.Waterfall.Grow(obj);</pre> + </div> + + <script> + var myWaterfall = new RGraph.Waterfall('myWaterfall', [4,5,-8,-8,-5,6,4,-4]); + myWaterfall.Set('chart.xaxispos', 'center'); + </script> + + +<!------------------------------------------------------------------------------------------> + + + <a name="things.to.note"></a> + <h3>Things to note</h3> + <ol> + <li> + 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: + <pre class="code">obj.canvas.parentNode.removeChild(obj.canvas);</pre> + + 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 <i>RGraph.Effects.ReplaceCanvasWithDIV(canvas)</i>. As the name + suggests, this function replaces the canvas with a DIV which has the same dimensions meaning your page structure + won't change. + </li> + + <li> + It should be noted that in order to prevent the canvas being constantly drawn on, it is cleared at the + start of the animation. + </li> + + <li> + In the jQuery animations here, the Google hosted jQuery is used: + + <pre class="code"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script></pre> + </li> + + <li> + 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. + </li> + </ol> + +</body> +</html>
\ No newline at end of file |