|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/Styles/ |
Upload File : |
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animation Style Type Parameters</title>
<script type="text/javascript" src="../../Charts/FusionCharts.js" ></script>
<link rel="stylesheet" href="../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify.css" />
<script type="text/javascript" src="../assets/ui/js/jquery.min.js" ></script>
<script type="text/javascript" src="../assets/ui/js/json2.js" ></script>
<style type="text/css">
input { border:1px solid #BBC597 ; background-color:#F5F7EC; padding:3px; cursor:pointer;}
.show-code-block {
position: absolute;
top:0;
left:0;
width:398px;
height:298px;
overflow: auto;
padding: 0;
margin: 0;
display: none;
z-index: 100;
background: #FFFFFF;
opacity: 0.95;
filter: alpha(opacity=95);
border: 1px solid #E6E4E4 !important;
}
.show-code-close-btn {
background-color:#dedede;
border:1px solid #cdcdcd;
float: right;
padding: 2px;
margin: 3px;
position: relative;
z-index: 200;
cursor:pointer;
}
.show-code-close-btn a{
border-bottom:none;
}
#pre.prettyprint {
border:medium none !important;
font-size:100% !important;
margin:5px;
padding:2px;
white-space:normal;
}
</style>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../Introduction/Overview.html", "FusionCharts XT Styles|Styles.html", "Animation Style type" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Animation Style Type Parameters</td>
</tr>
<tr>
<td class="text"><p>One of the best things about FusionCharts XT is the animated
charting sequences that users get to relish. By default, FusionCharts XT animates only the dataplot (columns,
bars, lines etc.). However, FusionCharts XT does not limit your imaginations just there.</p>
<p>The live chart shown below shows a very basic animation on the columns. In case you missed it you can reload the animation clicking on the button below saying - "Click here to animate the chart above".</p>
<div style="position:relative;">
<div class="show-code-block">
<div class="show-code-close-btn"><a class="qua qua-button" href="javascript:void(0)"><span>Close</span></a></div><pre id="pre" class="prettyprint"></pre>
</div>
<div id="chart1Div" style="margin:10px 0;width:400px; height:300px;">The chart is supposed to load here. If you are unable to see the chart here and can see this message, please check <a href="../Debug/Basic.html">Basic Troubleshooting</a> page. </div>
</div>
<input type="button" value="Click here to animate the chart above" onClick="reloadChart();" style="margin:0 0 0 0;" /><input type="button" value="View XML" onClick="viewXML();" style="margin:0 0 0 6px;" /><input type="button" value="View JSON" onClick="viewJSON();" style="margin:0 0 0 6px;" />
<p class="highlightBlock">Note: In JavaScript charts, customized <span class="codeInline">animation</span> styles are not available. </p>
<p class="text">Using the <span class="codeInline">Animation
Style Type</span>, you can virtually animate each and every Object on
the chart. You can define custom animations and apply them to various
objects of the chart. </p>
<p class="text">Each chart object has a list of supported animation
properties that can be set through <span class="codeInline">Animation
Style Type.</span> Before we get to the parameters supported
by the animation style type, let us quickly glance through the properties
of chart objects that we can animate using <span class="codeInline">Animation
Style Type.</span> </p>
<p class="text">The animation style type helps you animate the following properties of chart objects:</p></td>
</tr>
<tr>
<td class="text"><table border="0" cellpadding="3" cellspacing="0" class="table">
<tr class="header">
<td width="127" valign="top" class="header">Property</td>
<td width="751" valign="top" class="header">Description</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_x</td>
<td width="751" valign="top" class="text">Helps
animate the <span class="codeInline">x</span> position of the given
chart object.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_y</td>
<td width="751" valign="top" class="text">Helps
animate the <span class="codeInline">y</span> position of the given
chart object.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_xScale</td>
<td width="751" valign="top" class="text">Using
this property, you can animate the <span class="codeInline">x-scale
</span>(horizontal scale) of the given chart object.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_yScale</td>
<td width="751" valign="top" class="text">Like
<span class="codeInline">xScale</span>, this animates the <span class="codeInline">y-scale.</span></td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_alpha</td>
<td width="751" valign="top" class="text">Helps
<span class="codeInline">alpha</span> transition (transparency fading)
animation effect.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">_rotation</td>
<td width="751" valign="top" class="text">Helps
you animate the pies and doughnuts in circular motion.</td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p class="text">Not all parameters can be applied to all
chart objects. For example, text fields cannot be <span class="codeInline">x-scaled</span>
or <span class="codeInline">y-scaled</span> nor does the rotation effect
apply to them. Similarly, the <span class="codeInline">horizontal div
lines </span>do not support <span class="codeInline">y-scaling</span>
and <span class="codeInline">x-shifting</span>. The list of animation
parameters for each chart object is given in the Chart Specification sheet
of the respective chart.</p>
<p>Multiple animations in combination or multiple animations
in sequence can also be applied to any chart object. For example, you
can opt to <span class="codeInline">y-scale</span> and <span class="codeInline">alpha-fade</span>
the <span class="codeInline">data plot </span>(combination animation)
or you might go for <span class="codeInline">x-scale</span> first and
then<span class="codeInline"> y-scale </span>(sequential animation).</p>
<p>Let us now get to the attributes that<span class="codeInline">
Animation Style Type </span>exposes to help us control the functionalities:</p></td>
</tr>
<tr>
<td class="text"><table class="table" border="0" cellpadding="3" cellspacing="0" >
<tr>
<td width="127" valign="top" class="header">Attribute</td>
<td width="751" valign="top" class="header">Description</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">param</td>
<td width="751" valign="top" class="text">This attribute lets you specify the
property of chart object which you want to animate, for example, <span class="codeInline">_x,
_y, _xscale</span> etc.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">start</td>
<td width="751" valign="top" class="text">The <span class="codeInline">start</span>
value of animation, for example, if you are animating the dataplot for fade
in alpha effect, the start value of <span class="codeInline">alpha</span>
will be 0.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">duration</td>
<td width="751" valign="top" class="text">Using this, you can control the <span class="codeInline">duration</span>
of animation in seconds.</td>
</tr>
<tr>
<td width="127" valign="top" class="codeInline">easing</td>
<td width="751" valign="top" class="text">This attribute lets you specify the
pattern of animation easing. Valid values are<span class="codeInline">
"elastic", "bounce", "regular", "strong"</span> or <span class="codeInline">"none".</span></td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>For the<span class="codeInline"> Animation Style Type</span>,
except <span class="codeInline">Easing</span>, all the above attributes
are <strong>mandatory</strong>.</p>
<p>Before getting to detailed explanations, let us quickly
cruise through a quick animation sample. Let us try and animate our canvas
so that it scales up after the chart is loaded. </p>
<p class="text">To do so, we first need to define our custom style. Since
scaling up involves simultaneous increment of both<span class="codeInline">
_xScale </span>and<span class="codeInline"> _yScale</span>, we'll now
need to define two animation styles and then apply them to Canvas Object.
The style definition goes as under:</p></td>
</tr>
<tr>
<td class="text">
<div class="container">
<ul class="tabs">
<li><a href="#tab1">XML</a></li>
<li><a href="#tab2">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><styles>
<definition>
<strong><style name='MyXScaleAnim' type='ANIMATION' duration='1' start='0' param="_xscale" /></strong>
<strong><style name='MyYScaleAnim' type='ANIMATION' duration='1' start='0' param="_yscale" /></strong>
</definition>
... More XML Here ...
</styles></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">"styles":{<br /> "definition":[<strong>{ "name":"MyXScaleAnim", "type":"ANIMATION", "duration":"1", "start":"0", "param":"_xscale" },<br /> { "name":"MyYScaleAnim", "type":"ANIMATION", "duration":"1", "start":"0", "param":"_yscale" }]</strong><br />
... More JSON Here ...<br /> }</pre>
</div>
</div>
</div></td>
</tr>
<tr>
<td class="text"><p>In the above code, we name the two styles as<span class="codeInline">
MyXScaleAnim</span> and<span class="codeInline"> MyYScaleAnim </span>with
their param (animation parameter) as<span class="codeInline"> _xscale</span>
and<span class="codeInline"> _yscale</span> respectively. We set start
value as 0, we want the canvas to scale up from 0 to 100 (remember that
scales are always from 0-100 in FusionCharts XT). We also specify the duration
as 1 for the animation sequence.</p>
<p>To apply this animation style to canvas, the following code
is used:</p></td>
</tr>
<tr>
<td>
<div class="container">
<ul class="tabs">
<li><a href="#tab3">XML</a></li>
<li><a href="#tab4">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab3" class="tab_content">
<pre class="prettyprint code_container"><styles>
... More XML Here ....
<application>
<strong><apply toObject='Canvas' styles='MyXScaleAnim,MyYScaleAnim' /></strong><br /> </application>
</styles></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container"> "styles":{
... More JSON Here ...<br /> "application":[<strong>{ "toobject":"Canvas", "styles":"MyXScaleAnim,MyYScaleAnim" }]</strong><br /> }</pre>
</div>
</div>
</div></td>
</tr>
<tr>
<td class="text"><p>If you run the above code against a Single-series axis
chart, you will see that the canvas scales up from 0 size to full size,
before the data is animated and rendered. Bingo! Exactly what we needed!
Let us move on to the attributes in details now.</p></td>
</tr>
<tr>
<td class="header"><span class="codeInline"><a name="param"></a>param</span> attribute</td>
</tr>
<tr>
<td><p class="text">The<span class="codeInline"> param </span><span class="text">attribute</span>
specifies the property of chart object, which is to be animated. As earlier
discussed, it can take one of the following values, depending on the chart
object:</p>
<ul type="disc">
<li class="codeInline">_x </li>
<li class="codeInline">_y</li>
<li class="codeInline">_xScale </li>
<li class="codeInline">_yScale</li>
<li class="codeInline">_alpha</li>
<li class="codeInline">_rotation</li>
</ul>
<p class="text">We reiterate that not all chart Objects support all the
above properties. Please refer to the Chart Specification Sheet for the
given chart to get the list of supporter animation parameters for each
chart object.</p></td>
</tr>
<tr>
<td class="header"><a name="start"></a>Setting the start position of animation object</td>
</tr>
<tr>
<td><p class="text">In our above example, where we were scaling the canvas
from 0 to 100, we had set the start value of animation to 0, as we want
the canvas to scale from 0 to 100. You always need to set a start value
for any animation style. The end value is decided by FusionCharts XT based
on the chart object and animation parameter.</p>
<p class="text">For example, if you want to animate the <span class="codeInline">y</span> position of <span class="codeInline">div lines</span> from 0
to their final position (which is within the canvas), you need to set
start position to 0. But since you do not know the end position of individual
<span class="codeInline">div line</span>, it's automatically set by FusionCharts XT.</p>
<p class="text">Similarly, if you want to animate the <span class="codeInline">div lines y</span> position for a chart, whose height is 500 pixels, from
bottom to the respective final position, you'll need to set start position
as 500. The end position again will be decided by FusionCharts XT.</p></td>
</tr>
<td class="header"><a name="macro"></a>Macros in start values</td>
</tr>
<tr>
<td class="text"><p>Often, you might want to specify the start <span class="codeInline">x/y
</span>position for the animation as the start/center/end position of
the canvas or chart. For example, if you want to animate the <span class="codeInline">y
</span>property of <span class="codeInline">div lines</span> from canvas
top to their respective final position, you will need to experiment with
a lot of <span class="codeInline">y</span> values before you can finally
get the start <span class="codeInline">y</span> position of canvas. This
is because the canvas start position is dynamically calculated at run-time
and it depends on a lot of factors like captions, sub captions, chart
padding, margins etc. </p>
<p>FusionCharts XT uses <span class="codeInline">Macros</span>
to bail you out of this trouble. <span class="codeInline">Macros</span>
are pre-defined variables which assume values at run time. For example,
<span class="codeInline">$canvasStartY</span> represents the start <span class="codeInline">y
</span>position of the canvas, and it assumes a value at run-time only.
So, if you need to animate your <span class="codeInline">div lines' y</span>
position from <span class="codeInline">canvas start Y</span> to their final actual positions, all you need to do is:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab5">XML</a></li>
<li><a href="#tab6">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab5" class="tab_content">
<pre class="prettyprint code_container"><style name='DivYAnim' type='ANIMATION' duration='1' start='$canvasStartY' param="_y" /></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container"> "definition":[{ "name":"DivYAnim", "type":"ANIMATION", "duration":"1", "start":"$canvasStartY", "param":"_y" }]</pre>
</div></div></div></td></tr>
<tr>
<td class="text"><p>FusionCharts XT, at run-time, will automatically calculate
and assign the value for this <span class="codeInline">macro </span>and
you will see the animation sequence starting from <span class="codeInline">start Y
</span>Position of canvas. So, now even if you resize the chart or opt
to show or hide captions or change margins, you never need to keep a tab
on the <span class="codeInline">y</span> position of canvas. FusionCharts XT does that for you. </p>
<p class="text">FusionCharts XT supports the following <span class="codeInline">Macro</span>
values for <span class="codeInline">Animation Style Type</span>:</p></td>
</tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
<td width="145" valign="top" class="codeInline">$chartStartX</td>
<td width="578" valign="top" class="text"><span class="codeInline">Chart
Start X </span>Position. It is 0 if you are loading the chart in an
HTML page. However, if you are loading the chart in another Flash
movie, it will take the given<span class="codeInline"> X </span>Position.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartStartY</td>
<td width="578" valign="top" class="text"><span class="codeInline">Chart
Start Y</span> Position. It is 0 if you are loading the chart in an
HTML page. However, if you are loading the chart in another Flash
movie, it will take the given<span class="codeInline"> Y </span>Position.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartWidth</td>
<td width="578" valign="top" class="text">Width
of the chart.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartHeight</td>
<td width="578" valign="top" class="text">Height
of the chart.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartEndX</td>
<td width="578" valign="top" class="text">End
<span class="codeInline">X Position</span> of the chart. Same as
width of chart if you are loading the chart in an HTML page.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartEndY</td>
<td width="578" valign="top" class="text">End<span class="codeInline">
Y Position </span>of the chart. Same as height of chart if you are
loading the chart in an HTML page.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartCenterX</td>
<td width="578" valign="top" class="text"><span class="codeInline">Center
X </span>Position of the chart.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$chartCenterY</td>
<td width="578" valign="top" class="text"><span class="codeInline">Center
Y </span>Position of the chart.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasStartX</td>
<td width="578" valign="top" class="text"><span class="codeInline">Canvas
Start X</span> Position (from left), that is,<span class="codeInline">
x</span> co-ordinate of left side of the canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasStartY</td>
<td width="578" valign="top" class="text"><span class="codeInline">Canvas
Start Y </span>Position (from top), that is, <span class="codeInline">y</span>
co-ordinate of the top of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasWidth</td>
<td width="578" valign="top" class="text">Width
of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasHeight</td>
<td width="578" valign="top" class="text">Height
of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasEndX</td>
<td width="578" valign="top" class="text">End
<span class="codeInline">X</span> Position of Canvas, that is, <span class="codeInline">x</span>
co-ordinate of right side of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasEndY</td>
<td width="578" valign="top" class="text">End
<span class="codeInline">Y</span> Position of Canvas, that is,<span class="codeInline">
y</span> co-ordinate of bottom of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasCenterX</td>
<td width="578" valign="top" class="text">Center
<span class="codeInline">X</span> Position of canvas.</td>
</tr>
<tr>
<td width="145" valign="top" class="codeInline">$canvasCenterY</td>
<td width="578" valign="top" class="text">Center
<span class="codeInline">Y </span>Position of canvas.</td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="highlightBlock"><strong>Macro names are case-sensitive. </strong>As
such, you need to make sure that you are providing the <span class="codeInline">macro</span>
names in proper case, that is, <span class="codeInline">$canvasstarty </span>will not
work and it will log an error in debug window. You will need to correctly
specify it as<span class="codeInline"> $canvasStartY.</span></p></td>
</tr>
<tr>
<td class="textBold">More Example using Macros:</td></tr>
<tr><td height="15"></td></tr>
<tr>
<td class="text">
<div class="container">
<ul class="tabs">
<li><a href="#tab7">XML</a></li>
<li><a href="#tab8">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab7" class="tab_content">
<pre class="prettyprint code_container"><style name='LabelsAnim' type='ANIMATION' duration='1' start='$canvasCenterX' param="_x" />
<style name='YValuesAnim' type='ANIMATION' duration='1' start='$canvasCenterY' param="_y" /></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container"> "definition":[{ "name":"LabelsAnim", "type":"ANIMATION", "duration":"1", "start":"$canvasCenterX", "param":"_x" },<br /> { "name":"YValuesAnim", "type":"ANIMATION", "duration":"1", "start":"$canvasCenterY", "param":"_y" }]</pre>
</div></div>
</div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="header"><a name="createmacro"></a>Creating Macro Expressions </td>
</tr>
<tr>
<td class="text"><p>You can also add numeric (integer) values to pre-defined macros to offset the animation when using macros. For example, if you wanted to animate the div lines from 10 pixels above canvas starting <span class="codeInline">Y</span> position, you could use: </p>
<div class="container">
<ul class="tabs">
<li><a href="#tab9">XML</a></li>
<li><a href="#tab10">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab9" class="tab_content">
<pre class="prettyprint code_container"><style name='DivYAnim' type='ANIMATION' duration='1' start='<strong>$canvasStartY-10</strong>' param="_y" /></pre></div>
<div id="tab10" class="tab_content">
<pre id="pre-datajson5" class="prettyprint code_container"> "definition":[{ "name":"DivYAnim", "type":"ANIMATION", "duration":"1", "start":<strong>"$canvasStartY-10"</strong>, "param":"_y" }]</pre>
</div>
</div>
</div></td></tr>
<tr>
<td class="text"><p>Or, if you wanted to animate from 10 pixels below canvas start position, you could use:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab11">XML</a></li>
<li><a href="#tab12">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab11" class="tab_content">
<pre class="prettyprint code_container"><style name='DivYAnim' type='ANIMATION' duration='1' start='<strong>$canvasStartY+10</strong>' param="_y" /> </pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container"> "definition":[{ "name":"DivYAnim", "type":"ANIMATION", "duration":"1", "start":<strong><strong>"$canvasStartY+10"</strong></strong>, "param":"_y" }]</pre>
</div></div></div>
</td></tr>
<tr>
<td class="text">
<p>Currently, FusionCharts XT allows only + (addition) and - (subtraction) operation in Macro expressions. </p></td>
</tr>
<tr>
<td class="header"><a name="easing"></a>Specifying the easing for animation</td>
</tr>
<tr>
<td class="text"><p><span class="codeInline">Easing</span> refers to gradual
acceleration or deceleration during an animation. For example, a chart
object might gradually increase its speed near the beginning of an animation,
but slow down right at the end of the animation before it arrives at a
full stop. There are many different equations for the acceleration and
deceleration, which change the easing animation accordingly. Easing helps
your animations appear more realistic. </p>
<p>FusionCharts XT supports the following easing methods:</p></td>
</tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
<td width="187" valign="top" class="header">Methods</td>
<td width="691" valign="top" class="header">Description</td>
</tr>
<tr>
<td width="187" valign="top" class="codeInline">Elastic</td>
<td width="691" valign="top" class="text">Adds
an elastic effect that falls outside the transition range at one
or both ends. The amount of elasticity is unaffected by the duration.</td>
</tr>
<tr>
<td width="187" valign="top" class="codeInline">Bounce</td>
<td width="691" valign="top" class="text">Adds
a bouncing effect within the transition range at one or both ends.
The number of bounces relates to the duration—longer durations
produce more bounces.</td>
</tr>
<tr>
<td width="187" valign="top" class="codeInline">Strong</td>
<td width="691" valign="top" class="text">Adds
slower movement at one or both ends. This effect is similar to Regular
easing, but it is more pronounced.</td>
</tr>
<tr>
<td width="187" valign="top" class="codeInline">Regular</td>
<td width="691" valign="top" class="text">Adds
slower movement at one or both ends. This feature enables you to
add a speeding-up effect, a slowing-down effect, or both.</td>
</tr>
<tr>
<td width="187" valign="top" class="codeInline">None</td>
<td width="691" valign="top" class="text">Adds
an equal movement from start to end without effects, slowing, or
speeding up. This transition is also referred to as a linear transition.</td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>For any of the above easing method, FusionCharts XT provides
the easing effect at the end of the transition. For example, if you animate
the columns from <span class="codeInline">0 _yscale</span> to <span class="codeInline">100
_yscale</span>, you will see that the columns animated very fast in the
start (they grow up very soon) but the animation at the end part is slow.</p>
<p>You can use any of the above easing methods for any animation
style that you define.</p></td>
</tr>
</table>
<script type="text/javascript"><!--
function reloadChart()
{
var dataString ='<chart showvalues="0" bgcolor="FFFFFF" showalternatehgridcolor="0" numdivlines="0" showyaxisvalues="0" plotgradientcolor="" showplotborder="0" showshadow="1" showborder="1" canvasborderalpha="0" canvasbordercolor="800080" canvasbgratio="0" canvasbgalpha="100" bordercolor="8F8F8F" borderalpha="50" bgratio="0" bgalpha="50" >\n\
<set value="490000" color="64810A" label="China"/>\n\
<set value="340000" color="7B9F0C" label="USA"/>\n\
<set value="160000" color="90BC0E" label="Brazil"/>\n\
<set value="220000" color="B7D702" label="Spain"/>\n\
<set value="123000" color="DFEB55" label="India"/>\n\
<styles>\n\
<definition>\n\
<style name="Animation_0" type="ANIMATION" duration="2" start="0" param="_y"/>\n\
<style name="Animation_1" type="ANIMATION" duration="2" start="0" param="_x" easing="Regular"/>\n\
</definition>\n\
<application>\n\
<apply toObject="DATALABELS" styles="Animation_0"/>\n\
<apply toObject="DATAPLOT" styles="Animation_1"/>\n\
</application>\n\
</styles>\n\
</chart>';
if(FusionCharts("myChartId") && FusionCharts("myChartId").setXMLData)
FusionCharts("myChartId").setXMLData(dataString);
else
var animChart = FusionCharts.render( { swfUrl : "../../Charts/Column2D.swf", dataSource : dataString, dataFormat : "xml" , renderAt : "chart1Div" , id: "myChartId" , width:400, height:300 } );
}
function viewXML()
{
var chartDATA = '';
chartDATA = FusionCharts("myChartId").getChartData('xml').replace(/\</gi, "<").replace(/\>/gi, ">");
$('#pre.prettyprint').html( chartDATA );
$('.show-code-block').css('height', "100%" ).show();
prettyPrint();
}
function viewJSON()
{
var chartDATA = '';
chartDATA = JSON.stringify( FusionCharts("myChartId").getChartData('json') ,null, 2);
$('#pre.prettyprint').html( chartDATA );
$('.show-code-block').show();
prettyPrint();
}
window.onload = function() { reloadChart(); };
$(document).ready(function()
{
$('.show-code-close-btn').click(function() {
$('.show-code-block').hide();
});
$('.show-code-close-btn a').click(function() {
$('.show-code-block').hide();
});
});
// --></script>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Font Style type|Font.html","Shadow Style type|Shadow.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>