|
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/advanced/ |
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>Setting backgrounds for charts </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", "Advanced charting", "Set backgrounds for chart" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Setting backgrounds for charts </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT allows you to easily set a background image or movie for your chart. You can use this option to embed background images (GIF, JPEG or PNG), other SWF Files, or data tables (in image format) as your chart background.</p>
<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. Additionally, you can also do a lot more configurations like setting transparency, scale, stretch, tile etc. We will learn about each of these in details soon in this page.</p>
<p 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></p>
<p>Let us first see how we may use the <span class="codeInline">bgImage</span> property in a chart, as shown below:</p></td>
</tr>
<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" style="width:100%; height:450px; overflow:auto;">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><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="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{
"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></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we are:</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 will 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>When you view this chart (with the background image), you will get something as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="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 valign="top" class="text"><p>Simple and effective - isn't it? </p>
<p>In the following sections of this page we will learn how the background image can be configured.</p></td>
</tr>
<tr>
<td class="header">Configuring background image</td>
</tr>
<tr>
<td class="text"><p>FusionCharts XT allows you to configure the background images. You can configure the following:</p>
<ul>
<li><a href="#alpha">Set transparency of the loaded image</a></li>
<li> <a href="#scale">Scale the loaded image</a> </li>
<li> <a href="#alignment">Horizontally or vertically align the image with respect to the chart </a>and </li>
<li><a href="#displaymode">Set the mode in which the image will be displayed (like tile, stretch etc.) </a></li>
</ul>
</td></tr>
<tr>
<td class="text"><p>In the following sections, we will discuss how to implement the above given configurations on the background image.</p>
</td>
</tr>
<tr>
<td class="header"><a name="alpha"></a>Setting the transparency of the background image</td>
</tr>
<tr>
<td class="text"><p>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:</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"><chart <strong>bgImageAlpha='30' bgImage='pizza.jpg'</strong> >
...
</chart></pre>
</div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{
<strong>"bgImage":"pizza.jpg"
"bgImageAlpha":"30"</strong>,
},
...
} </pre>
</div></div></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>
<p> <img src="Images/alpha.jpg" /></p></td></tr>
<tr>
<td class="header"><a name="scale"></a>Setting the scale of the background image </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="#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 caption='Sales Figures' bgImageAlpha='30' bgImage='pizza.jpg' <strong>bgImageScale='50'</strong> >
...
</chart></pre>
</div>
<div id="tab6" 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></td>
</tr>
<tr><td class="text"><p>The chart for the above code will look as under:</p>
<img src="Images/customScale.jpg" /><br/><br/></td></tr>
<tr>
<td> See it <a href="../../Code/MyFirstChart/bgImage-scale.html" target="_blank">live</a>!<br/>
<br/></td>
</tr>
<tr>
<td class="header"><a name="alignment"></a>Vertical & Horizontal alignment of the background image</td>
</tr>
<tr>
<td class="text"><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></td></tr>
<tr>
<td class="text">All possible combinations of vertical and horizontal alignments of the background image are given below:<br/>
<br/></td></tr>
<tr>
<td>
<table width="925">
<tr>
<td width="33%"><img src="Images/topLeft.jpg" /></td>
<td width="33%"><img src="Images/topMiddle.jpg" /></td>
<td width="33%"><img src="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="Images/middleLeft.jpg" /></td>
<td width="33%"><img src="Images/middleMiddle.jpg" /></td>
<td width="33%"><img src="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="Images/bottomLeft.jpg" width="307" height="248" /></td>
<td width="33%"><img src="Images/bottomMiddle.jpg" width="308" height="245" /></td>
<td width="33%"><img src="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>!<br/>
<br/></td>
</tr>
<tr>
<td class="header"><a name="displaymode"></a>Setting the mode of display of the background image</td>
</tr>
<tr>
<td class="text"><p>A background image can be displayed using one of the various modes of display. The form can be changed using the <span class="codeInline">bgImageDisplayMode</span> attribute. The 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="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><tr>
<td align="center" class="text"> </td>
</tr>
<td align="center"><img src="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="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="Images/tileMode.jpg" /></td>
</tr>
<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="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="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>!<br/>
<br/></td>
</tr>
<tr>
<td 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.</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Resizing charts in %|PercentResize.html", "Using charts on SSL/HTTPS|SSL.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>