1712 lines
78 KiB
HTML
1712 lines
78 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|||
|
|
<!--
|
|||
|
|
/**
|
|||
|
|
* o------------------------------------------------------------------------------o
|
|||
|
|
* | This file is part of the OfficeExcel package - you can learn more at: |
|
|||
|
|
* | |
|
|||
|
|
* | http://www.OfficeExcel.net |
|
|||
|
|
* | |
|
|||
|
|
* | This package is licensed under the OfficeExcel 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.OfficeExcel.net/LICENSE.txt |
|
|||
|
|
* o------------------------------------------------------------------------------o
|
|||
|
|
*/
|
|||
|
|
-->
|
|||
|
|
<title>The OfficeExcel animation and visual effects</title>
|
|||
|
|
|
|||
|
|
<meta name="keywords" content="OfficeExcel html5 canvas charts animation visual effects" />
|
|||
|
|
<meta name="description" content="Documentation about the animation and visual effects that are available to you in OfficeExcel" />
|
|||
|
|
<meta name="googlebot" content="NOODP">
|
|||
|
|
|
|||
|
|
<meta property="og:title" content="OfficeExcel: 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.OfficeExcel.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/OfficeExcel.common.core.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.common.tooltips.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.common.effects.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.common.key.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.bar.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.fuel.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.gantt.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.line.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.pie.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.rose.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.odo.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.meter.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.hbar.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.gauge.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.radar.js" ></script>
|
|||
|
|
<script src="../libraries/OfficeExcel.waterfall.js" ></script>
|
|||
|
|
<script src="../libraries/jquery.min.js" ></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<?php PrintAnalyticsCode() ?>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- Social networking buttons -->
|
|||
|
|
<?php
|
|||
|
|
$prefix = substr($_SERVER['SERVER_NAME'], 0, 3);
|
|||
|
|
require("/OfficeExcel.{$prefix}/social.html");
|
|||
|
|
?>
|
|||
|
|
<!-- Social networking buttons -->
|
|||
|
|
|
|||
|
|
<div id="breadcrumb">
|
|||
|
|
<a href="../index.html">OfficeExcel: HTML5 Javascript charts library</a>
|
|||
|
|
>
|
|||
|
|
<a href="./index.html">Documentation</a>
|
|||
|
|
>
|
|||
|
|
Animation and visual effects
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h1>Animation <span>and visual effects</span></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>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
<div style="width: 900px">
|
|||
|
|
|
|||
|
|
<div style="float: right; width: 300px">
|
|||
|
|
<ul>
|
|||
|
|
<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="#rose.explode">Rose chart Explode</a></li>
|
|||
|
|
<li><a href="#rose.implode">Rose chart Implode</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>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="float: left; width: 300px">
|
|||
|
|
<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="#conceal">Conceal</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>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-left: 300px; width: 300px">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#pie.implode">Pie chart Implode</a></li>
|
|||
|
|
<li><a href="#pie.roundrobin">Pie chart RoundRobin</a></li>
|
|||
|
|
<li><a href="#pie.wave">Pie chart Wave</a></li>
|
|||
|
|
<li><a href="#bar.grow">Bar chart Grow</a></li>
|
|||
|
|
<li><a href="#bar.wave">Bar chart Wave</a></li>
|
|||
|
|
<li><a href="#gantt.grow">Gantt 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>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<br clear="all" />
|
|||
|
|
</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 OfficeExcel 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="OfficeExcel.common.core.js" ></script>
|
|||
|
|
<script src="OfficeExcel.line.js" ></script>
|
|||
|
|
<span style="color: green"><script src="OfficeExcel.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 OfficeExcel.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">OfficeExcel.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. OfficeExcel 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 OfficeExcel.Bar('cvs', [30, 32, 33, 30, 27, 30, 29, 27, 21, 21, 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.text.angle', 35);
|
|||
|
|
myBar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
|
|||
|
|
|
|||
|
|
function ShowCombination(obj)
|
|||
|
|
{
|
|||
|
|
OfficeExcel.Effects.Fade.In(obj);
|
|||
|
|
OfficeExcel.Effects.jQuery.Reveal(obj);
|
|||
|
|
OfficeExcel.Effects.Bar.Grow(obj);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<button onclick="ShowCombination(myBar)" style="width: 500px">Show Combining animations example</button>
|
|||
|
|
|
|||
|
|
<pre class="code">
|
|||
|
|
<script>
|
|||
|
|
function ShowCombination(obj)
|
|||
|
|
{
|
|||
|
|
OfficeExcel.Effects.Fade.In(obj);
|
|||
|
|
OfficeExcel.Effects.jQuery.Reveal(obj);
|
|||
|
|
OfficeExcel.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 OfficeExcel
|
|||
|
|
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 OfficeExcel 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 OfficeExcel.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="OfficeExcel.Clear(animateObj.canvas);animateObj.Set('chart.hmargin', 27.5);OfficeExcel.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();
|
|||
|
|
OfficeExcel.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 OfficeExcel 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="OfficeExcel.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">OfficeExcel.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 OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.Fade.Out(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine2 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine2.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.Expand(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine3 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine3.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.Snap(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine4 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine4.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.Reveal(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine5 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine5.Set('chart.shadow.offsetx', OfficeExcel.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="conceal"></a>
|
|||
|
|
<h4>Conceal</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myLine_conceal" width="480" height="150">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Clear(myLine_conceal.canvas); myLine_conceal.Draw();OfficeExcel.Effects.jQuery.Conceal(myLine_conceal);">Show Conceal effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect is a reversal of the above Reveal effect - it gradually covers the canvas with DIVs. Combining
|
|||
|
|
it with the above Reveal effect can make an effective transition.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.jQuery.Conceal(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine_conceal = new OfficeExcel.Line('myLine_conceal', data);
|
|||
|
|
myLine_conceal.Set('chart.gutter.top', 35);
|
|||
|
|
myLine_conceal.Set('chart.gutter.left', 40 );
|
|||
|
|
myLine_conceal.Set('chart.gutter.right', 5);
|
|||
|
|
myLine_conceal.Set('chart.gutter.bottom', 25);
|
|||
|
|
myLine_conceal.Set('chart.colors', ['red', 'black']);
|
|||
|
|
myLine_conceal.Set('chart.units.post', '%');
|
|||
|
|
myLine_conceal.Set('chart.tickmarks', null);
|
|||
|
|
myLine_conceal.Set('chart.shadow', true);
|
|||
|
|
myLine_conceal.Set('chart.shadow.offsety', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine_conceal.Set('chart.shadow.offsetx', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine_conceal.Set('chart.shadow.blur', 15);
|
|||
|
|
myLine_conceal.Set('chart.shadow.color', '#f66');
|
|||
|
|
myLine_conceal.Set('chart.linewidth', 1);
|
|||
|
|
myLine_conceal.Set('chart.hmargin', 10);
|
|||
|
|
myLine_conceal.Set('chart.background.grid.width', 1);
|
|||
|
|
myLine_conceal.Set('chart.background.grid.color', '#ddd');
|
|||
|
|
myLine_conceal.Set('chart.background.barcolor1', 'white');
|
|||
|
|
myLine_conceal.Set('chart.background.barcolor2', 'white');
|
|||
|
|
myLine_conceal.Set('chart.background.grid.autofit', true);
|
|||
|
|
myLine_conceal.Set('chart.background.grid.autofit.numvlines', 12);
|
|||
|
|
myLine_conceal.Set('chart.background.grid.autofit.numhlines', 5);
|
|||
|
|
myLine_conceal.Set('chart.text.color', '#333');
|
|||
|
|
myLine_conceal.Set('chart.noaxes', true);
|
|||
|
|
myLine_conceal.Set('chart.text.font', 'Arial');
|
|||
|
|
myLine_conceal.Set('chart.labels', labels);
|
|||
|
|
myLine_conceal.Draw();
|
|||
|
|
</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="OfficeExcel.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">OfficeExcel.Effects.jQuery.Blinds.Open(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine6 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine6.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.HBlinds.Close(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine7 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine7.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.VBlinds.Open(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine8 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine8.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.jQuery.VBlinds.Close(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myLine9 = new OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine9.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.Effects.Pie.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myPie = new OfficeExcel.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="OfficeExcel.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">
|
|||
|
|
OfficeExcel.Effects.Pie.Implode(obj);
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myPie2 = new OfficeExcel.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="OfficeExcel.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">
|
|||
|
|
OfficeExcel.Effects.Pie.RoundRobin(obj);
|
|||
|
|
//OfficeExcel.Effects.Pie.Implode(obj);
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myPie3 = new OfficeExcel.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.key', ['Rod','Jane','Todd','Mark','Freddy']);
|
|||
|
|
myPie3.Set('chart.tooltips', ['Rod','Jane','Tod','Mark','Freddy']);
|
|||
|
|
myPie3.Set('chart.highlight.style', '2d');
|
|||
|
|
myPie3.Set('chart.align', 'left');
|
|||
|
|
myPie3.Set('chart.centerx', 150);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="pie.wave"></a>
|
|||
|
|
<h4>Pie chart Wave</h4>
|
|||
|
|
|
|||
|
|
<canvas id="pie_wave" width="550" height="250">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Clear(pie_wave.canvas);OfficeExcel.Effects.Pie.Wave(pie_wave);">Show Pie chart Wave effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect is vaguely similar to the RoundRobin effect, and slowly shrinks the segments to the correct size.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Pie.Wave(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var pie_wave = new OfficeExcel.Pie('pie_wave', [6,12,15,8,4,3,2]);
|
|||
|
|
mypie.Set('chart.shadow', true);
|
|||
|
|
mypie.Set('chart.shadow.offsetx', 0);
|
|||
|
|
mypie.Set('chart.shadow.offsety', 0);
|
|||
|
|
mypie.Set('chart.shadow.blur', 15);
|
|||
|
|
</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="OfficeExcel.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">OfficeExcel.Effects.Bar.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var bar = new OfficeExcel.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="bar.wave"></a>
|
|||
|
|
<h4>Bar chart Wave</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myBar_wave_c" width="550" height="250">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Clear(myBar_wave.canvas);OfficeExcel.Effects.Bar.Wave(myBar_wave);">Show Bar chart Wave effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect gradually increases the values of the Bar chart in a wave motion until they are correct.
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<b>Note:</b>
|
|||
|
|
</p>
|
|||
|
|
Some features of OfficeExcel that use extra processing (eg the 3D effect) will cause this effect to have a slow frame rate.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Bar.Wave(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
myBar_wave = new OfficeExcel.Bar('myBar_wave_c', [1,3,4,5,6,8,9,7,6,4,4,3]);
|
|||
|
|
myBar_wave.Set('chart.colors', ['red']);
|
|||
|
|
myBar_wave.Set('chart.labels.above', true);
|
|||
|
|
myBar_wave.Set('chart.variant', '3d');
|
|||
|
|
myBar_wave.Set('chart.strokestyle', '#d00');
|
|||
|
|
myBar_wave.Set('chart.gutter.top', 40);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="bar.wave2"></a>
|
|||
|
|
<h4>Bar chart Wave2</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myBar_wave2_c" width="550" height="250">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Clear(myBar_wave2.canvas);OfficeExcel.Effects.Bar.Wave2(myBar_wave2);">Show Bar chart Wave2 effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect is much the same as the previous, except that this effect uses the Javascript 1.8.5 .bind()
|
|||
|
|
method, so is slower in browsers that don't support it natively.
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
<b>Note:</b>
|
|||
|
|
</p>
|
|||
|
|
Some features of OfficeExcel that use extra processing (eg the 3D effect) will cause this effect to have a slow frame rate.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Bar.Wave2(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
myBar_wave2 = new OfficeExcel.Bar('myBar_wave2_c', [1,3,4,5,6,8,9,7,6,4,4,3]);
|
|||
|
|
myBar_wave2.Set('chart.colors', ['red']);
|
|||
|
|
myBar_wave2.Set('chart.labels.above', true);
|
|||
|
|
myBar_wave2.Set('chart.variant', '3d');
|
|||
|
|
myBar_wave2.Set('chart.strokestyle', '#d00');
|
|||
|
|
myBar_wave2.Set('chart.gutter.top', 40);
|
|||
|
|
</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="fuel.value = OfficeExcel.random(0, 100); OfficeExcel.Effects.Fuel.Grow(fuel)">Show Fuel chart Grow effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect gradually increases the indicated value until it reaches the correct value.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Fuel.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var fuel = new OfficeExcel.Fuel('myFuel', 0, 100, 12);
|
|||
|
|
if (navigator.userAgent.indexOf('Chrome/15')> 0) {
|
|||
|
|
fuel.Set('chart.icon', null);
|
|||
|
|
}
|
|||
|
|
OfficeExcel.Effects.Fuel.Grow(fuel);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="warning">
|
|||
|
|
<b>Note:</b>
|
|||
|
|
In some browsers (particularly Chrome 15) the icon causes the canvas to flicker. To stop this you must get rid of the
|
|||
|
|
image, which you can do by setting <i>chart.icon</i> to <i>null</i>.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="slideout"></a>
|
|||
|
|
<h4>Slide out</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myLine10" width="600" height="200">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Effects.jQuery.Slide.Out(myLine10, {'to':'bottom'});">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">OfficeExcel.Effects.jQuery.Slide.Out(obj, {'to': '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 OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine10.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.Effects.jQuery.Slide.In(myLine11, {'from':'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">OfficeExcel.Effects.jQuery.Slide.In(obj, {'from': '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 OfficeExcel.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', OfficeExcel.isIE8() ? 3 : 0);
|
|||
|
|
myLine11.Set('chart.shadow.offsetx', OfficeExcel.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="OfficeExcel.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">OfficeExcel.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 OfficeExcel.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="OfficeExcel.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">OfficeExcel.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 OfficeExcel.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="OfficeExcel.Effects.Line.FoldToCenter(myLinef2c)">Show Line chart FoldToCenter 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">OfficeExcel.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 OfficeExcel.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="OfficeExcel.Clear(myLine14.canvas);OfficeExcel.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
|
|||
|
|
work with this effect.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.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 OfficeExcel.Line('myLine14', [data1, data2]);
|
|||
|
|
myLine14.Set('chart.labels', labels);
|
|||
|
|
myLine14.Set('chart.tooltips', labels);
|
|||
|
|
myLine14.Set('chart.hmargin', 0);
|
|||
|
|
myLine14.Set('chart.linewidth', 3);
|
|||
|
|
myLine14.Set('chart.filled', true);
|
|||
|
|
myLine14.Set('chart.fillstyle', ['rgba(255,0,0,0.7)', 'rgba(255,136,255,0.8)']);
|
|||
|
|
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="OfficeExcel.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">OfficeExcel.Effects.Rose.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myRose = new OfficeExcel.Rose('myRose', [13,19,16,24,26,24,16,18,19]);
|
|||
|
|
//myRose.Set('chart.tooltips', ['John','Fred','Alice','Rosie','Jim']);
|
|||
|
|
myRose.Set('chart.colors.alpha', 0.5);
|
|||
|
|
myRose.Set('chart.margin', 5);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="rose.explode"></a>
|
|||
|
|
<h4>Rose chart Explode</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myRose_explode" width="350" height="350">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Effects.Rose.Explode(myRose_explode, {'frames': 60})">Show Rose chart Explode effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect gradually increases the <i>chart.exploded</i> property of the Rose chart. Combining it with the Implode
|
|||
|
|
effect could make an effective transition to a new chart.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Rose.Explode(obj, {'frames': 60});</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myRose_explode = new OfficeExcel.Rose('myRose_explode', [13,19,16,24,26,24,16,18,19]);
|
|||
|
|
myRose_explode.Set('chart.colors.alpha', 0.5);
|
|||
|
|
myRose_explode.Set('chart.margin', 5);
|
|||
|
|
myRose_explode.Draw();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="rose.implode"></a>
|
|||
|
|
<h4>Rose chart Implode</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myRose_implode" width="350" height="350">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Effects.Rose.Implode(myRose_implode)">Show Rose chart Implode effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect gradually decreases the exploded factor of the chart. Combined with the above Exploded effect could
|
|||
|
|
make an effective transition to a new chart.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Rose.Implode(obj, {frames: 60});</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myRose_implode = new OfficeExcel.Rose('myRose_implode', [13,19,16,24,26,24,16,18,19]);
|
|||
|
|
myRose_implode.Set('chart.colors.alpha', 0.5);
|
|||
|
|
myRose_implode.Set('chart.margin', 5);
|
|||
|
|
myRose_implode.Set('chart.exploded', 350);
|
|||
|
|
myRose_implode.Draw();
|
|||
|
|
</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 = OfficeExcel.random(0, 100);OfficeExcel.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">OfficeExcel.Effects.Odo.Grow(obj, null, myFunc);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myOdo = new OfficeExcel.Odometer('myOdo', 0, 100, 65);
|
|||
|
|
myOdo.Set('chart.needle.color', 'black');
|
|||
|
|
myOdo.Set('chart.needle.tail', false);
|
|||
|
|
myOdo.Set('chart.label.area', 35);
|
|||
|
|
myOdo.Set('chart.border', OfficeExcel.isIE8() ? false : true);
|
|||
|
|
myOdo.Set('chart.title.vpos', 0.3);
|
|||
|
|
myOdo.Set('chart.value.text', true);
|
|||
|
|
myOdo.Set('chart.value.text.decimals', 0);
|
|||
|
|
myOdo.Set('chart.value.units.post', '<27>');
|
|||
|
|
myOdo.Set('chart.tickmarks', false);
|
|||
|
|
myOdo.Set('chart.tickmarks.highlighted', true);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="warning">
|
|||
|
|
<b>Warning:</b>
|
|||
|
|
Note that disabling tickmarks can significantly increase the Grow animation frame rate (particularly in Chrome 15).
|
|||
|
|
You can do this with <i>obj.Set('chart.tickmarks', false);</i>, optionally replacing them with coloured bands
|
|||
|
|
(as above) with <i>obj.Set('chart.tickmarks.highlighted', true);</i>.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="meter.grow"></a>
|
|||
|
|
<h4>Meter Grow</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myMeter" width="450" height="250">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Effects.Meter.Grow(meter1);setInterval(function (){meter1.value = OfficeExcel.random(min,max);OfficeExcel.Effects.Meter.Grow(meter1);}, 5000);">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">OfficeExcel.Effects.Meter.Grow(obj, {'frames': 90});</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var min = 0;
|
|||
|
|
var max = 100;
|
|||
|
|
|
|||
|
|
var meter1 = new OfficeExcel.Meter('myMeter', min, max, OfficeExcel.random(min, max));
|
|||
|
|
|
|||
|
|
var grad1 = meter1.context.createRadialGradient(meter1.canvas.width / 2,meter1.canvas.height - 25,0,meter1.canvas.width / 2,meter1.canvas.height - 25,200);
|
|||
|
|
grad1.addColorStop(0, 'green');
|
|||
|
|
grad1.addColorStop(1, 'white');
|
|||
|
|
|
|||
|
|
var grad2 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200);
|
|||
|
|
grad2.addColorStop(0, 'yellow');
|
|||
|
|
grad2.addColorStop(1, 'white');
|
|||
|
|
|
|||
|
|
var grad3 = meter1.context.createRadialGradient(meter1.canvas.width / 2, meter1.canvas.height - 25,0,meter1.canvas.width / 2, meter1.canvas.height - 25,200);
|
|||
|
|
grad3.addColorStop(0, 'red');
|
|||
|
|
grad3.addColorStop(1, 'white');
|
|||
|
|
|
|||
|
|
meter1.Set('chart.labels.position', 'inside');
|
|||
|
|
meter1.Set('chart.title', 'A sample measurement');
|
|||
|
|
meter1.Set('chart.title.vpos', 0.5);
|
|||
|
|
meter1.Set('chart.title.color', 'black');
|
|||
|
|
meter1.Set('chart.green.color', grad1);
|
|||
|
|
meter1.Set('chart.yellow.color', grad2);
|
|||
|
|
meter1.Set('chart.red.color', grad3);
|
|||
|
|
meter1.Set('chart.border', false);
|
|||
|
|
meter1.Set('chart.needle.linewidth', 5);
|
|||
|
|
meter1.Set('chart.needle.tail', true);
|
|||
|
|
meter1.Set('chart.tickmarks.big.num', 0);
|
|||
|
|
meter1.Set('chart.tickmarks.small.num', 0);
|
|||
|
|
meter1.Set('chart.segment.radius.start', 100);
|
|||
|
|
meter1.Set('chart.needle.radius', 80);
|
|||
|
|
meter1.Set('chart.needle.linewidth', 2);
|
|||
|
|
meter1.Set('chart.linewidth.segments', 15);
|
|||
|
|
meter1.Set('chart.strokestyle', 'white');
|
|||
|
|
meter1.Set('chart.text.size', 14);
|
|||
|
|
|
|||
|
|
</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="OfficeExcel.Effects.HBar.Grow(hbar); OfficeExcel.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">OfficeExcel.Effects.HBar.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var hbar = new OfficeExcel.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="OfficeExcel.Clear(myGauge.canvas);myGauge.value = OfficeExcel.random(50,100);OfficeExcel.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">OfficeExcel.Effects.Gauge.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myGauge = new OfficeExcel.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="OfficeExcel.Clear(myRadar.canvas);OfficeExcel.Effects.Radar.Grow(myRadar);OfficeExcel.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">OfficeExcel.Effects.Radar.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myRadar = new OfficeExcel.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="OfficeExcel.Clear(myWaterfall.canvas);OfficeExcel.Effects.Waterfall.Grow(myWaterfall);OfficeExcel.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">OfficeExcel.Effects.Waterfall.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myWaterfall = new OfficeExcel.Waterfall('myWaterfall', [4,5,-8,-8,-5,6,4,-4]);
|
|||
|
|
myWaterfall.Set('chart.xaxispos', 'center');
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!------------------------------------------------------------------------------------------>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<a name="gantt.grow"></a>
|
|||
|
|
<h4>Gantt Grow</h4>
|
|||
|
|
|
|||
|
|
<canvas id="myGantt" width="550" height="250">[No canvas support]</canvas><br />
|
|||
|
|
<button onclick="OfficeExcel.Clear(myGantt.canvas);OfficeExcel.Effects.Gantt.Grow(myGantt);">Show Gantt chart Grow effect</button>
|
|||
|
|
|
|||
|
|
<p />
|
|||
|
|
|
|||
|
|
This effect gradually Grows the Gantt chart in the respect of the X size of the bars.
|
|||
|
|
|
|||
|
|
<pre class="code">OfficeExcel.Effects.Gantt.Grow(obj);</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var myGantt = new OfficeExcel.Gantt('myGantt');
|
|||
|
|
myGantt.Set('chart.xmax', 365);
|
|||
|
|
myGantt.Set('chart.labels', ['Jan','Feb','Mar','Apr','May','Jun','Jul', 'Aug','Sep','Oct','Nov','Dec']);
|
|||
|
|
myGantt.Set('chart.events', [
|
|||
|
|
[0,31,null, 'Bob', 'red'],
|
|||
|
|
[59,270,75, 'Bob', 'yellow'],
|
|||
|
|
[215,70,null, 'Bob', '#0f0'],
|
|||
|
|
[45,200,null, 'Bob', 'blue']
|
|||
|
|
]);
|
|||
|
|
</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 .removeChild 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 OfficeExcel API function <i>OfficeExcel.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>
|