|
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>Shadow Style Type</title>
<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>
<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", "Shadow Style type" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Shadow Style Type</td>
</tr>
<tr>
<td class="text"><p>The <span class="codeInline">Shadow Style Type </span>helps
you apply shadow effect to any of the chart objects.</p>
<img src="Images/Styles/style_21.jpg"/>
<p>See it <a href="../../Code/Styles/shadow.html" target="_blank">live</a>!</p>
<p class="highlightBlock">Note: In JavaScript charts, customized <span class="codeInline">shadow</span> style type is not available. </p>
<p>It extends the following configurable properties:</p></td>
</tr>
<tr>
<td><table border="0" class="table" cellpadding="3" cellspacing="0" width="85%">
<tr>
<td width="15%" valign="top" class="header">Properties</td>
<td width="70%" valign="top" class="header">Description</td>
</tr>
<tr>
<td valign="top" class="codeInline">distance</td>
<td valign="top" class="text">The
offset distance for the shadow (in pixels). The default value is 4.</td>
</tr>
<tr>
<td valign="top" class="codeInline">angle</td>
<td valign="top" class="text">The
angle of the shadow. Valid values are 0 to 360˚. The default
value is 45.</td>
</tr>
<tr>
<td valign="top" class="codeInline">color</td>
<td valign="top" class="text">The
color of the shadow in hex code (without #). The default value is
CCCCCC.</td>
</tr>
<tr>
<td valign="top" class="codeInline">alpha</td>
<td valign="top" class="text">The
alpha transparency value for the shadow color. Valid values are
0 to 100. For example, 25 sets a transparency value of 25%.</td>
</tr>
<tr>
<td valign="top" class="codeInline">blurX</td>
<td valign="top" class="text">The
amount of horizontal blur. Valid values are 0 to 255. The default
value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and
32) are optimized to render more quickly than other values.</td>
</tr>
<tr>
<td valign="top" class="codeInline">blurY</td>
<td valign="top" class="text">The
amount of vertical blur. Valid values are 0 to 255. The default
value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and
32) are optimized to render more quickly than other values.</td>
</tr>
<tr>
<td valign="top" class="codeInline">strength</td>
<td valign="top" class="text">The
strength of the imprint or spread. The higher the value, the more
color is imprinted and the stronger the contrast between the shadow
and the background. Valid values are from 0 to 255. The default
is 1.</td>
</tr>
<tr>
<td valign="top" class="codeInline">quality</td>
<td valign="top" class="text">The
number of times to apply the shadow effect. Valid values are 0 to
15. The default value is 1, which is equivalent to low quality.
A value of 2 is medium quality, and a value of 3 is high quality.
Shadow with lower values are rendered quicker.</td>
</tr>
</table><br></td>
</tr>
<tr>
<td class="header"><a name="distance"></a><a name="angle"></a>Setting Shadow distance and angle</td>
</tr>
<tr>
<td class="text"><p>The following code helps set the shadow distance and angle:</p>
<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"><style name='MyFirstShadow' type='Shadow' <strong>distance='6' angle='45'</strong>/></pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">"definition":[{ "name":"MyFirstShadow", "type":"Shadow", <strong>"distance":"6"</strong>, <strong>"angle":"45"</strong> }]</pre>
</div></div></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table" width="65%">
<tr>
<td width="15%" valign="top" class="header">Property</td>
<td width="35%" valign="top" class="header">Format</td>
<td width="15%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">distance </td>
<td valign="top" class="codeInline">distance=<span class="codeInline">'value
in pixels' </span></td>
<td valign="top" class="codeInline">distance=<span class="codeInline">'6'</span></td>
</tr>
<tr>
<td valign="top" class="codeInline">angle</td>
<td valign="top" class="codeInline">angle=<span class="codeInline">'value
between 0 to 360'</span></td>
<td valign="top" class="codeInline">angle=<span class="codeInline">'45'</span></td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>When applied on the columns of a 2D Column Chart, as under:</p>
<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"><apply toObject='DataPlot' styles='MyFirstShadow' /></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container"> "application":[{ "toobject":"DataPlot", "styles":"MyFirstShadow" }]</pre>
</div></div></div></td></tr>
<tr>
<td class="text">
<p> It gives the following output:</p></td>
</tr>
<tr>
<td><table width="95%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><img src="Images/Styles/style_3.jpg" /></td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="text">You can set any distance (in pixels) and any angle between
0-360. </p></td>
</tr>
<tr>
<td class="header"><a name="cosmetics"></a>Setting shadow cosmetics</td>
</tr>
<tr>
<td class="text"><p>You can configure shadow color and alpha as under:</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='MyFirstShadow' type='Shadow' <strong>color='D72060' alpha='30'</strong> distance='6' angle='45' /></pre>
</div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">"definition":[{ "name":"MyFirstShadow", "type":"Shadow", <strong>"color":"D72060"</strong>, <strong>"alpha":"30"</strong>, "distance":"6", "angle":"45" }]</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table" width="65%">
<tr>
<td width="15%" valign="top" class="header">Property</td>
<td width="35%" valign="top" class="header">Format</td>
<td width="15%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">color </td>
<td valign="top" class="codeInline">color='Hex value (without #)'</td>
<td valign="top" class="codeInline">color='D72060'</td>
</tr>
<tr>
<td valign="top" class="codeInline">alpha</td>
<td valign="top" class="codeInline">alpha='value (between 0 to 100)'</td>
<td valign="top" class="codeInline">alpha='30'</td>
</tr>
</table></td>
</tr>
<tr>
<td><p class="text">The above code changes shadow color to pink <span class="codeInline">(D72060)</span>
with a transparency of 30% as under:</p></td>
</tr>
<tr>
<td><img src="Images/Styles/style_4.jpg" /></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="header"><a name="blur"></a>Configuring shadow blur</td>
</tr>
<tr>
<td class="text"><p>You can configure the blur amount of shadow as under:</p>
<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='MyFirstShadow' type='Shadow' distance='6' angle='45' <strong>blurX='14' blurY='14'</strong>/></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">"definition":[{ "name":"MyFirstShadow", "type":"Shadow", "distance":"6", "angle":"45", <strong>"blurx":"14"</strong>, <strong>"blury":"14"</strong> }]</pre>
</div></div></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table" width="65%">
<tr>
<td width="15%" valign="top" class="header">Property</td>
<td width="35%" valign="top" class="header">Format</td>
<td width="15%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">blurX </td>
<td valign="top" class="codeInline">blurX='value'</td>
<td valign="top" class="codeInline">blurX='14'</td>
</tr>
<tr>
<td valign="top" class="codeInline">blurY</td>
<td valign="top" class="codeInline">blurY='value'</td>
<td valign="top" class="codeInline">blurY='14'</td>
</tr>
</table><br></td>
</tr>
<tr>
<td><table width="55%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><div align="center"><img src="Images/Styles/style_3.jpg" /></div></td>
<td><div align="center"><img src="Images/Styles/style_5.jpg" /></div></td>
</tr>
<tr>
<td><div align="center"><span class="imageCaption">(Original shadow
– without any blur)</span></div></td>
<td><div align="center"><span class="imageCaption">(With blurX and blurY
as 14)</span></div></td>
</tr>
</table></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td class="header"><a name="strength"></a><a name="quality"></a>Controlling strength and quality</td>
</tr>
<tr>
<td class="text"><p>The shadow's strength and quality can be controlled as under:</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='MyFirstShadow' type='Shadow' distance='6' angle='45' <strong>quality='10'</strong>/></pre></div>
<div id="tab10" class="tab_content">
<pre id="pre-datajson5" class="prettyprint code_container">"definition":[{ "name":"MyFirstShadow", "type":"Shadow", "distance":"6", "angle":"45", <strong>"quality":"10"</strong> }]</pre>
</div></div></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td><table border="0" cellpadding="3" cellspacing="0" class="table" width="65%">
<tr>
<td width="15%" valign="top" class="header">Property</td>
<td width="35%" valign="top" class="header">Format</td>
<td width="15%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">quality </td>
<td valign="top" class="codeInline">quality='value' </td>
<td valign="top" class="codeInline">quality='10' </td>
</tr>
<tr>
<td valign="top" class="codeInline">strength</td>
<td valign="top" class="codeInline">strength='value'</td>
<td valign="top" class="codeInline">strength='3'</td>
</tr>
</table><br></td>
</tr>
<tr>
<td><table width="55%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><div align="center"><img src="Images/Styles/style_3.jpg" /></div></td>
<td><div align="center"><img src="Images/Styles/style_6.jpg" /></div></td>
</tr>
<tr>
<td><div align="center"><span class="imageCaption">(With default quality)</span></div></td>
<td><div align="center"><span class="imageCaption">(With quality set
as 10)</span></div></td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>You can also set the strength of the shadow as under:</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='MyFirstShadow' type='Shadow' distance='6' angle='45' <strong>strength='3'</strong>/></pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">"definition":[{ "name":"MyFirstShadow", "type":"Shadow", "distance":"6", "angle":"45",<strong> "strength":"3" </strong>}]</pre>
</div></div></div></td></tr>
<tr><td class="text"><p>This yields the following:</p></td></tr>
<tr>
<td><table width="55%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><div align="center"><img src="Images/Styles/style_3.jpg"/></div></td>
<td><div align="center"><img src="Images/Styles/style_7.jpg" /></div></td>
</tr>
<tr>
<td><div align="center"><span class="imageCaption">(With default strength)</span></div></td>
<td><div align="center"><span class="imageCaption">(With strength set
as 3)</span></div></td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"><p>Using a combination of the above discussed attributes,
you can create shadow effects the way you like it! </p>
<p>Let us now shift focus to <span class="codeInline">Glow Style Type</span>.</p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Animation Style type|Animation.html","Glow Style type|Glow.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>