|
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/AttDesc/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XML/JSON Attributes for Chart Border & Background </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", "Quick Chart Configuration","Chart border & background" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">XML/JSON Attributes for Chart Border & Background </td>
</tr>
<tr>
<td valign="top" class="text"><p>Background refers to the entire background of the chart.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Bg_1.jpg" width="410" height="230" /></td>
</tr>
<tr>
<td valign="top" class="text"><p><img src="Images/Bg_2.jpg" width="410" height="230" /></p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="backgroundColor"></a>Customizing Background colors </td>
</tr>
<tr>
<td valign="top" class="text"><p>The background color of the chart is fully customizable. You can use either a solid or a gradient fill using the attributes below:</p></td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="table">
<tr bordercolor="f1f1f1">
<td width="15%" valign="top" class="header">Attribute</td>
<td width="60%" valign="top" class="header">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">bgColor</td>
<td width="60%" class="text">Lets you set the background color for the chart. Use hex color code without #. To use a gradient fill, specify all the colors required for the gradient fill separated by commas here. </td>
<td width="25%" valign="top" class="codeInline">bgColor="647881"<br /></td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">bgAlpha</td>
<td width="60%" class="text">Lets you set the alpha (transparency) for the background. Valid range is from 0-100. </td>
<td width="25%" valign="top" class="codeInline">bgAlpha="40"</td>
</tr>
</table>
<tr>
<td valign="top" class="text"><p>Example:</p>
<pre class="prettyprint code_container"><chart bgColor='999999,FFFFFF' bgAlpha='50' ...></pre> <br />
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="customChartBorder"></a>Customizing Chart Border </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also have a border around the chart. By default, the border is displayed in 2D charts. In 3D charts by default the border is not displayed. To display the border you need to set the <span class="codeInline">showBorder</span> attribute to '1'. </p>
<p>Shown below is a chart with a border around the chart.</p>
<p><img src="Images/Title_5.jpg" width="406" height="208" /></p>
<p>The following attributes let you control the cosmetic properties of the chart border: </p> </td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr bordercolor="f1f1f1">
<td width="15%" valign="top" class="header">Attribute</td>
<td width="60%" valign="top" class="header">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">showBorder</td>
<td width="60%" valign="top" class="text">Whether to show a border around the chart or not. By default, it's set to 1 in 2D charts and 0 in 3D charts. </td>
<td width="25%" valign="top" class="codeInline">showBorder="1"<br /></td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">borderColor</td>
<td width="60%" valign="top" class="text">Border color of the chart.</td>
<td width="25%" valign="top" class="codeInline">borderColor="1D8BD1"</td>
</tr>
<tr>
<td valign="top" class="codeInline">borderThickness</td>
<td width="60%" valign="top" class="text">Border thickness of the chart (in pixels) </td>
<td valign="top" class="codeInline">borderThickness="2"</td>
</tr>
<tr>
<td valign="top" class="codeInline">borderAlpha</td>
<td width="60%" valign="top" class="text">Border alpha of the chart.</td>
<td valign="top" class="codeInline">borderAlpha="60"</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="text"><p> Example:</p>
<pre class="prettyprint code_container"><chart ... showBorder='1' borderColor='FF0000' borderThickness='2' borderAlpha='50' ..> </pre><br />
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="backgroundGradient"></a>Using gradient fill for background </td>
</tr>
<tr>
<td valign="top" class="text">
<p>When using a gradient fill for the background, you can set the alpha and ratio in which colors are to be distributed, and the angle at which you want the gradient to be. The following attributes help you do the same:</p>
</td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" class="table" cellpadding="0" cellspacing="0" >
<tr bordercolor="f1f1f1">
<td width="15%" valign="top" class="header">Attribute</td>
<td width="60%" valign="top" class="header">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">bgColor</td>
<td width="60%" valign="top" class="text">To fill the background as gradient, you need to define two (or more) colors separated by comma. Use hex code of colors without specifying #. </td>
<td width="25%" valign="top" class="codeInline">bgColor="99CCFF,FFFFFF" <br />
or bgColor="FF5904,FFFDDD,FFFFFF" </td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">bgAlpha</td>
<td width="60%" valign="top" class="text">For each color code that you've specified in <span class="codeInline">bgColor</span> attribute, you need to specify a respective alpha (transparency). Separate the alphas by comma. </td>
<td width="25%" valign="top" class="codeInline">bgAlpha="40,100" or bgAlpha="100,60,100" </td>
</tr>
<tr>
<td valign="top" class="codeInline">bgRatio</td>
<td valign="top" class="text">Ratio of each color in the gradient on a scale of 100. The total of the ratios specified through this attribute should sum up to 100. For example, if you want to plot an equidistant gradient for 2 colors, specify <span class="codeInline">bgRatio</span> as "0,100". </td>
<td valign="top" class="codeInline">bgRatio="40,60" </td>
</tr>
<tr>
<td valign="top" class="codeInline">bgAngle</td>
<td valign="top" class="text">Angle of the gradient fill (in degrees - 0-360). </td>
<td valign="top" class="codeInline">bgAngle="180"</td>
</tr>
</table></td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td valign="top" class="header"><a name="externalImage"></a>External Image or SWF File as Background </td>
</tr>
<tr>
<td valign="top" class="text">
<p>You can also specify an external image (GIF,JPEG or PNG only) or an SWF file as the background of the chart. You can also specify a display mode like <span class="codeInline">stretch</span>, <span class="codeInline">tile</span> etc. and the vertical/horizontal alignment of the image. The scale of the image can also be customized. A chart with a background image is shown below:</p>
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="../advanced/Images/bgSWF.jpg" /><br/><br/></td>
</tr>
<tr>
<td> See it <a href="../../Code/MyFirstChart/pizza-consumption-using-background-image.html" target="_blank">live</a>!</td>
</tr>
<tr>
<td>
<p>To embed an image, all you need to do is set <span class="codeInline">bgImage</span> property of <span class="codeInline"><chart></span> element. The code to embed the image is as shown below: </p>
<tr>
<td valign="top">
<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"><chart <strong>bgImage='pizza.jpg'</strong> >
...
</chart></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{
<strong>"bgImage":"pizza.jpg"</strong>
},
...
} </pre>
</div></div></div><div style="clear:both"></div></td>
</tr>
<tr><td><p>The complete data for the above chart is given below: </p></td>
</tr>
<tr>
<td valign="top">
<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" style="height:450px; overflow:auto;"><chart caption='Pizza Mania' subcaption='Consumption' <strong>bgImage='pizza.jpg'</strong>
canvasBorderAlpha='0' canvasbgAlpha='0' numDivlines='0' showYAxisValues='0'
numberPrefix='' paletteColors='880000' plotgradientcolor='fba71a'
showLabels='0' placevaluesinside='1' showplotBorder='0' plotfillalpha='90,90' >
<set label='Joel' value='900' displayValue=' Joel'/>
<set label='Tyler' value='500' displayValue=' Tyler'/>
<set label='Clarke' value='700' displayValue=' Clarke'/>
<set label='Pablo' value='1000' displayValue=' Pablo'/>
<set label='Carl' value='500' displayValue=' Carl'/>
<set label='Regina' value='200' displayValue=' Regina'/>
<set label='Craig' value='400' displayValue=' Craig' />
<styles>
<definition>
<style name='myAnimation' type='animation' DURATION='3' easing='bounce' start='0' param='_xscale'/>
<style name='myFont' type='font' color='ffffff'/>
<style name='myFontCaption' type='font' size='18' color='ffffff' />
<style name='myFontSubCaption' type='font' size='12' color='ffffff'/>
<style name='myShadow' type='shadow' color='333333' angle='45' strength='3'/>
</definition>
<application>
<apply toObject='Dataplot' styles='myAnimation'/>
<apply toObject='Datavalues' styles='myFont,myShadow'/>
<apply toObject='caption' styles='myFontCaption,myShadow'/>
<apply toObject='subcaption' styles='myFontSubCaption,myShadow'/>
</application>
</styles>
</chart></pre>
</div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container" style="height:450px; overflow:auto;">{
"chart": {
"caption": "Pizza Mania",
"subcaption": "Consumption",
"bgimage": "pizza.jpg",
"canvasborderalpha": "0",
"canvasbgalpha": "0",
"numdivlines": "0",
"showyaxisvalues": "0",
"numberprefix": "",
"palettecolors": "880000",
"plotgradientcolor": "fba71a",
"showlabels": "0",
"placevaluesinside": "1",
"showplotborder": "0",
"plotfillalpha": "90,90"
},
"data": [
{
"label": "Joel",
"value": "900",
"displayvalue": " Joel"
},
{
"label": "Tyler",
"value": "500",
"displayvalue": " Tyler"
},
{
"label": "Clarke",
"value": "700",
"displayvalue": " Clarke"
},
{
"label": "Pablo",
"value": "1000",
"displayvalue": " Pablo"
},
{
"label": "Carl",
"value": "500",
"displayvalue": " Carl"
},
{
"label": "Regina",
"value": "200",
"displayvalue": " Regina"
},
{
"label": "Craig",
"value": "400",
"displayvalue": " Craig"
}
],
"styles": {
"definition": [
{
"name": "myAnimation",
"type": "animation",
"duration": "3",
"easing": "bounce",
"start": "0",
"param": "_xscale"
},
{
"name": "myFont",
"type": "font",
"color": "ffffff"
},
{
"name": "myFontCaption",
"type": "font",
"size": "18",
"color": "ffffff"
},
{
"name": "myFontSubCaption",
"type": "font",
"size": "12",
"color": "ffffff"
},
{
"name": "myShadow",
"type": "shadow",
"color": "333333",
"angle": "45",
"strength": "3"
}
],
"application": [
{
"toobject": "Dataplot",
"styles": "myAnimation"
},
{
"toobject": "Datavalues",
"styles": "myFont,myShadow"
},
{
"toobject": "caption",
"styles": "myFontCaption,myShadow"
},
{
"toobject": "subcaption",
"styles": "myFontSubCaption,myShadow"
}
]
}
}</pre>
</div>
</div></div><div style="clear:both"></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we're:</p>
<ul>
<li>Loading a background image <span class="codeInline">pizza.jpg</span> by setting it as the value of the <span class="codeInline">bgImage</span> attribute. If your image file is in a different location, you'll need to specify the relative path. Note that due to security restrictions, your image file has to reside on the same sub-domain as that of the chart SWF File and a relative path to the same has to be specified.</li>
<li>Setting canvas background of the chart as transparent to get a full view of the background image</li>
<li>Defining styles for formatting of other chart elements</li>
</ul>
<p>Simple and effective - isn't it? </p>
</td>
</tr>
<tr>
<td class="text">
You can set the transparency of the image using the <span class="codeInline">bgImageAlpha</span> attribute.The default value of this attribute is '100'. The image remains fully opaque when 100 is set. 0 (zero) turns the image completely transparent. An example code setting the background image 30% transparent is shown as under:
</td></tr>
<tr>
<td class="text"> </td></tr>
<tr>
<td valign="top">
<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"><chart <strong>bgImageAlpha='30' bgImage='pizza.jpg'</strong> >
...
</chart></pre>
</div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{
<strong>"bgImage":"pizza.jpg"
"bgImageAlpha":"30"</strong>,
},
...
} </pre>
</div>
</div></div><div style="clear:both"></div></td>
</tr>
<tr>
<td class="text"><p> In the above code, we have added the attribute <span class="codeInline">bgImageAlpha='30'</span>. The chart will look as under:</p>
<img src="../advanced/Images/alpha.jpg" /></td></tr>
<tr><td class="text"> <p>You can also increase or decrease the magnification of the background image. To customize the magnification of the background image the attribute <span class="codeInline">bgImageScale</span> is used. The value of this attribute can be anything between<span class="codeInline"> 0-300</span>. The default value of the attribute is <span class="codeInline">100</span>. Any value less than <span class="codeInline">100</span> will reduce the size of the background image and any value more than <span class="codeInline">100</span> will increase the size of the background image. </p>
</td></tr>
<tr>
<td class="text"> In this example below, the value of the <span class="codeInline">bgImageScale</span> attribute is set to <span class="codeInline">50</span>. Hence, the size of the background image will be reduced to half of its size.<br/>
<br/></td>
</tr>
<tr>
<td valign="top">
<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"><chart caption='Sales Figures' bgImageAlpha='30' bgImage='pizza.jpg' <strong>bgImageScale='50'</strong> >
...
</chart></pre>
</div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{<br /> "caption":"Sales Figures",
"bgImage":"pizza.jpg"
"bgImageAlpha":"30"
<strong>"bgImageScale":"50"</strong>,
},
...
} </pre>
</div></div></div><div style="clear:both"></div></td>
</tr>
<tr><td class="text"><p>The chart for the above code will look as under:</p>
<img src="../advanced/Images/customScale.jpg" />
<p>See it <a href="../../Code/MyFirstChart/bgImage-scale.html" target="_blank">live</a>!</p>
<p>You can set the position of the background image on the chart according to your choice by altering the vertical and horizontal alignments of the background image. The two attributes used to set the alignments are <span class="codeInline">bgImageVAlign</span> (top, middle, bottom) and <span class="codeInline">bgImageHAlign </span>(left, middle, right). The default value of these two attributes are <span class="codeInline">bgImageVAlign='top'</span> and <span class="codeInline">bgImageHALign='left'</span>.
By default, the background image will appear on the top-left position of the chart. </p>
<p>All possible combinations of vertical and horizontal alignments of the background image are given below:</p>
</td></tr>
<tr>
<td>
<table width="925">
<tr>
<td width="33%"><img src="../advanced/Images/topLeft.jpg" /></td>
<td width="33%"><img src="../advanced/Images/topMiddle.jpg" /></td>
<td width="33%"><img src="../advanced/Images/topRight.jpg" /></td>
</tr>
<tr align="center">
<td class="text"><span class="codeInline">bgImageVAlign='top'</span> <br />
<span class="codeInline">bgImageHAlign='left'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='top'</span> <span class="codeInline"><br />
bgImageHAlign='middle'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='top'</span> <span class="codeInline"><br />
bgImageHAlign='right'</span></td>
</tr>
<tr>
<td> </td></tr>
<tr>
<td width="33%"><img src="../advanced/Images/middleLeft.jpg" /></td>
<td width="33%"><img src="../advanced/Images/middleMiddle.jpg" /></td>
<td width="33%"><img src="../advanced/Images/middleRight.jpg" /></td>
</tr>
<tr align="center">
<td class="text"><span class="codeInline">bgImageVAlign='middle'</span> <br />
<span class="codeInline">bgImageHAlign='left'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='middle'</span> <span class="codeInline"><br />
bgImageHAlign='middle'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='middle'</span> <span class="codeInline"><br />
bgImageHAlign='right'</span></td>
</tr>
<tr>
<td> </td></tr>
<tr>
<td width="33%"><img src="../advanced/Images/bottomLeft.jpg" width="307" height="248" /></td>
<td width="33%"><img src="../advanced/Images/bottomMiddle.jpg" width="308" height="245" /></td>
<td width="33%"><img src="../advanced/Images/bottomRight.jpg" width="307" height="246" /></td>
</tr>
<tr align="center">
<td class="text"><span class="codeInline">bgImageVAlign='bottom'</span>
<span class="codeInline"><br />
bgImageHAlign='left'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='bottom'</span> <br />
<span class="codeInline">bgImageHAlign='middle'</span></td>
<td class="text"><span class="codeInline">bgImageVAlign='bottom'</span> <br />
<span class="codeInline">bgImageHAlign='right'</span></td>
</tr>
<tr>
<td> </td></tr>
</table>
</td>
</tr>
<tr>
<td> See the samples <a href="../../Code/MyFirstChart/bgImage-align.html" target="_blank">live</a>!
</td>
</tr>
<tr>
<td class="text">
<p>A background image can also be displayed using one of the various modes of display. The display mode can be changed using the <span class="codeInline">bgImageDisplayMode</span> attribute. The acceptable values of this attribute are <span class="codeInline">none</span>, <span class="codeInline">center</span>, <span class="codeInline">stretch</span>, <span class="codeInline">tile</span>, <span class="codeInline">fit</span> and <span class="codeInline">fill</span>. By default, the value of the attribute is set to <span class="codeInline">none</span>. Examples with different display modes are shown below:</p>
</td></tr>
<tr>
<td>
<table width="658" height="1832" >
<tr>
<td align="center"><img src="../advanced/Images/noneMode.jpg" /></td>
</tr>
<tr align="center">
<td align="center"><span class="codeInline">none </span>- The original image is placed at the top left corner of the background (default mode)</td>
</tr>
<tr>
<tr>
<td align="center" class="text"> </td>
</tr>
<td align="center"><img src="../advanced/Images/center.jpg" /></td>
</tr>
<tr align="left">
<td align="center"><span class="codeInline">Center </span>- The image is positioned at the center of the chart area</td>
</tr>
<tr>
<td align="center" class="text"> </td>
</tr>
<tr>
<td align="center"><img src="../advanced/Images/stretchMode.jpg" /></td>
</tr>
<tr align="left">
<td align="center"><span class="codeInline">Stretch </span>- Expands the image to fit the entire chart area, without maintaining original image constraints</td>
</tr>
<tr>
<td align="center" class="text"> </td>
</tr>
<tr>
<td align="center"><img src="../advanced/Images/tileMode.jpg" /></td>
</tr>
<tr>
<tr align="left">
<td align="center"><span class="codeInline">Tile</span> - The image is repeated as a pattern on the entire chart area</td>
</tr>
<td align="center" class="text"> </td>
</tr>
<tr>
<td align="center"><img src="../advanced/Images/fitMode.jpg" /></td>
</tr>
<tr align="left">
<td align="center"><span class="codeInline">Fit </span>- Fits the image proportionately on the chart area</td>
</tr>
<tr>
<td align="center" class="text"> </td>
</tr>
<tr>
<td align="center"><img src="../advanced/Images/fillMode.jpg" /></td>
</tr>
<tr align="left">
<td align="center"><span class="codeInline">Fill </span>- Proportionately fills the entire chart area with the image</td>
</tr>
<tr>
<td align="center" class="text"> </td>
</tr>
</table></td></tr>
<tr>
<td>See the samples <a href="../../Code/MyFirstChart/bgImage-mode.html" target="_blank">live</a>!
<p class="highlightBlock">Note: Alignment attributes are ignored for <span class="codeInline">center</span> and <span class="codeInline">stretch</span> display modes and <span class="codeInline">bgImageScale</span> attribute works only for <span class="codeInline">none</span>, <span class="codeInline">center</span> and <span class="codeInline">tile</span> display modes.</p>
<p>The attributes discussed are given below:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<table width="100%" border="0" class="table" cellpadding="2" cellspacing="0">
<tr bordercolor="f1f1f1">
<td width="15%" valign="top" class="header">Attribute</td>
<td width="60%" valign="top" class="header">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td width="15%" valign="top" ><div class="codeInline">bgImage</div><div class="version-info">Since v3.2.2</div>
<p>or</p>
<div class="codeInline">bgSWF <span class="version-info">- deprecated</span> </div></td>
<td width="60%" class="text" valign="top"> Lets you specify the URL (with full path) of the background image / SWF file. Make sure that the image and the chart SWF file are in the same sub-domain and you're providing a relative path. Absolute paths will be ignored and logged in debug window.
<p class="highlightBlock">Please note that due to security reasons Flash Player does not allow you to load cross-domain files or files having absolute path. Hence, your bgImage files should be of the same domain as the chart and should load from relative paths.</p>
</td>
<td width="25%" valign="top" class="codeInline">bgImage="FruitsPic.jpg"</td>
</tr>
<tr>
<td width="15%" valign="top"><div class="codeInline">bgImageAlpha</div>
<p>or</p>
<div class="codeInline">bgSWFAlpha <span class="version-info">- deprecated</span></div></td>
<td width="60%" class="text" valign="top">Configures the transparency/alpha of the background image loaded using this property. The value can range from 0 to 100 where 0 is fully transparent and 100 is fully opaque. </td>
<td width="25%" valign="top" class="codeInline">bgImageAlpha="40"</td>
</tr>
<tr>
<td width="15%" valign="top"><div class="codeInline">bgImageValign</div><div class="version-info">Since v3.2.2</div></td>
<td width="60%" class="text" valign="top">Allows you to vertically align the image. Possible values of this attribute are <span class="codeInline">top</span>, <span class="codeInline">middle</span> and <span class="codeInline">bottom</span>. </td>
<td width="25" class="codeInline" valign="top">bgImageVAlign="bottom"</td>
</tr>
<tr>
<td width="15%" valign="top"><div class="codeInline">bgImageHalign</div><div class="version-info">Since v3.2.2</div></td>
<td width="60%" class="text" valign="top">Allows you to horizontally align the image. Possible values of this attribute are <span class="codeInline">left</span>, <span class="codeInline">middle</span> and <span class="codeInline">right</span>.</td>
<td width="25" class="codeInline" valign="top">bgImageHAlign="left"</td>
</tr>
<tr>
<td width="15%" valign="top"><div class="codeInline">bgImageDisplayMode</div><div class="version-info">Since v3.2.2</div></td>
<td width="60%" class="text" valign="top">Helps you specify the mode in which the background image is to be displayed.
The values of this attribute are:<br/><br/>
<ul>
<li ><span class="codeInline">Stretch</span> - expands the image to fit the entire chart area, without maintaining original image constraints</li>
<li ><span class="codeInline">Tile</span> - the image is repeated as a pattern on the entire chart area </li>
<li ><span class="codeInline">Fit</span> - fits the image proportionately on the chart area </li>
<li ><span class="codeInline">Fill</span> -proportionately fills the entire chart area with the image </li>
<li><span class="codeInline">Center</span> - the image is positioned at the center of the chart area </li>
<li><span class="codeInline">None</span> - Default mode. None of the above modes are applied </li>
</ul></td>
<td width="25" class="codeInline" valign="top">bgImageDisplayMode="Stretch"</td>
</tr>
<tr>
<td width="15%" valign="top"><div class="codeInline">bgImageScale</div><div class="version-info">Since v3.2.2</div></td>
<td width="60%" class="text" valign="top">Allows you to increase or decrease the scale of the image. Possible values of this attribute lie between 0-300. When 300 is specified the image is 300% magnified, whereas, 0 will reduce the image to an invisible entity. 100 will produce the image with actual or 100% size. Anything lower than 100 will reduce the size of the image. </td>
<td width="25" class="codeInline" valign="top">bgImageScale="80"</td>
</tr>
</table><br/> </td>
</tr>
<tr>
<td valign="top" class="highlightBlock"><a href="../../Code/JavaScript/bgImageTryout/index.html" target="_blank">Click here to explore all the configurable options of background image using an interactive demo.</a></td>
</tr>
<tr>
<td valign="top"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="imageAlpha"></a>Setting background as transparent </td>
</tr>
<tr>
<td valign="top" class="text"><p>If you wish to set your chart background as transparent in the HTML page, you need to follow these steps:</p>
<ol>
<li>You need to configure chart's data as following:
<ul>
<li>If you are feeding data in XML format, set <span class="codeInline"><chart ... bgAlpha='0,0' ...></span></li>
<li>If you are feeding data in JSON format, set
<span class="codeInline"> "chart":{ ... "bgalpha":"0,0", ...}</span></li>
</ul>
</li>
<li>In the HTML code that embeds the chart, set <span class="codeInline">myChart.setTransparent(true)</span> as under:</li>
</ol><br />
<pre class="prettyprint code_container"><div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "1");
myChart.setXMLUrl("Data.xml");
<strong>myChart.setTransparent(true);</strong>
myChart.render("chartdiv");
</script>
</div></pre>
<p>Shown below is an example, where a 2D Column Chart has been embedded in an HTML page with background image. Also, the canvas has been made transparent to highlight the effect. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/TransChart.jpg" width="462" height="355" /></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header"><a name="backgroundEffects"></a>Applying effects to background </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also apply effects to background using Styles. Shown below is an example where we've applied Bevel effect to the background:</p>
<img src="Images/Bg_3.jpg" width="412" height="213" />
<p>Data for this can be listed 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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<strong><styles>
<definition>
<style name='myBevel' type='Bevel'/>
</definition>
<application>
<apply toObject='Background' styles='myBevel' />
</application>
</styles></strong>
</chart></pre></div>
<div id="tab10" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
],
<strong>"styles": {
"definition": [
{
"name": "myBevel",
"type": "Bevel"
}
],
"application": [
{
"toobject": "Background",
"styles": "myBevel"
}
]
}</strong>
}</pre>
</div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header"><a name="backgroundAnim"></a>Applying animation to background </td>
</tr>
<tr>
<td valign="top" class="text"><p>Using Styles, you can also apply animation to background. For example, the data below creates a fade-in effect for the background.</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"><chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
<set label='Quarter 1' value='420500' />
<set label='Quarter 2' value='295400' />
<set label='Quarter 3' value='523400' />
<set label='Quarter 4' value='465400' />
<strong><styles>
<definition>
<style name='myBgAnim' type='Animation' param='_alpha' start='0' duration='1'/>
</definition>
<application>
<apply toObject='Background' styles='myBgAnim' />
</application>
</styles></strong>
</chart></pre> </div>
<div id="tab12" class="tab_content"><pre class="prettyprint code_container">{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"Figures in $",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[{
"label":"Quarter 1",
"value":"420500"
},
{
"label":"Quarter 2",
"value":"295400"
},
{
"label":"Quarter 3",
"value":"523400"
},
{
"label":"Quarter 4",
"value":"465400"
}
],
<strong>"styles": {
"definition": [
{
"name": "myBgAnim",
"type": "Animation",
"param": "_alpha",
"start": "0",
"duration": "1"
}
],
"application": [
{
"toobject": "Background",
"styles": "myBgAnim"
}
]
}
</strong>}</pre>
</div>
</div>
</div><div style="clear:both"></div><div style="clear:both"></div>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("JSON for <i>LinkedCharts</i>|../DataFormats/JSON/LinkedCharts.html","Chart canvas|Canvas.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>