|
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 Padding</title>
<style type="text/css">
<!--
.style1 {
color: #FF0000;
font-weight: bold;
}
-->
</style>
<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|Background.html", "Chart Paddings & Margins" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">XML/JSON Attributes for Padding</td>
</tr>
<tr>
<td class="text"><p>FusionCharts XT lets you define various paddings and margins. We will see them one-by-one.</p>
<p class="header" style="padding:3px;">Chart Margins</p>
<p>By default, FusionCharts XT provides some padding between the chart border and the canvas. This is called the chart margin and each of the margins - left, right, top, bottom chart can be set individually.</p>
<img alt="image of chart margins" src="Images/padding7.jpg" width="461" height="239"/></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Chart Left Margin</p>
<p class="text">Amount of empty space that you want to put on the left side of your chart is called chart left margin. Nothing is rendered in this space. The XML/JSON used to configure the same is:</p>
</td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart chartLeftMargin="15"></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Chart Right Margin</p>
<p class="text">Amount of empty space that you want to put on the right side of your chart.</p>
</td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart chartRightMargin="15"></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Chart Top Margin</p>
<p class="text">Amount of empty space that you want to put on the top of your chart.</p></td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart chartTopMargin="10"></pre> </td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Chart Bottom Margin</p>
<p class="text">Amount of empty space that you want to put on the bottom of your chart.</p>
</td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart chartBottomMargin="10"></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Caption Padding </p>
<p class="text">This attribute lets you define the space between the caption of the chart and the top of the chart canvas. But when you have a sub-caption defined in the chart, it controls the space between the sub-caption and the top of the chart canvas. </p>
<img src="Images/padding1.jpg" alt="image of caption padding" class="imageBorder"/>
<p><strong>Example:</strong></p></td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart captionPadding="15"></pre> </td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">X-Axis Name Padding</p>
<p class="text">Using this, you can set the distance between the top of X-Axis title and the bottom of data labels (or canvas, if data labels are not shown).</p>
<img src="Images/padding2.jpg" alt="images for XAxisName padding" class="imageBorder"/>
<p><strong>Example:</strong></p></td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart xAxisNamePadding="10"></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Y-Axis Name Padding</p>
<p class="text">The padding that you want to set between the Y-Axis name and values. </p>
<img src="Images/padding3.jpg" alt="image of yAxisnamepadding" />
<p><strong>Example:</strong></p></td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart yAxisNamePadding="10"></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Y-Axis Values Padding</p>
<p class="text">This allows you to set the padding between the left end of the chart canvas and the Y-Axis values.</p>
<img src="Images/padding4.jpg" alt="2D Chart withy Axis value padding" width="175" height="261" />
<p><strong>Example:</strong></p> </td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart yAxisValuesPadding="5"> </pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Label Padding</p>
<p class="text">This attribute sets the vertical space between the canvas bottom edge and the data labels.</p>
<img src="Images/padding5.jpg" alt="2D column with Label Padding" width="362" height="142" />
<p><strong>Example:</strong></p> </td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart labelPadding="3"> </pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Value Padding</p>
<p class="text">It controls the space between your columns/anchors and the value text boxes.</p>
<img height="238" alt="2DChart with valuepadding" src="Images/padding6.jpg" width="234" />
<p><strong>Example:</strong></p> </td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart valuePadding="3" ></pre></td>
</tr>
<tr>
<td><p class="header" style="padding:3px;">Canvas Padding</p>
<p class="text">For a line/area chart, the padding between the canvas border and the position where the line/area chart begins to draw is called canvas padding.</p>
<img alt="2DChart with valuepadding" src="Images/padding8.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td class="text"><p><strong>Example:</strong></p> </td>
</tr>
<tr>
<td class="text"><pre class="prettyprint code_container"><chart canvasPadding="30"></pre></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Tool tip|ToolTip.html", "Vertical Lines|VLines.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>