|
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 Canvas </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|Background.html", "Chart Canvas" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">XML/JSON Attributes for Chart Canvas </td>
</tr>
<tr>
<td valign="top" class="text"><p>Canvas refers to the area in which the chart is plotted. </p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Canvas_1.jpg" width="410" height="230" />
<p><img src="Images/Canvas_2.jpg" width="410" height="230" /></p></td>
</tr>
<tr>
<td valign="top" class="header">Changing Canvas Fill Color </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can fill the canvas with solid or gradient color. The following attributes let you fill a solid color in the canvas:</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" valign="top" class="header">Attribute</td>
<td width="60%" class="header" valign="top">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">canvasbgColor</td>
<td width="60%" valign="top" class="text">Lets you set the background color for the Canvas. Use hex color code without #. To use a gradient fill, specify all the colors of the gradient separated by comma.</td>
<td width="25%" valign="top" class="codeInline">canvasbgColor='1D8BD1'</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">canvasbgAlpha</td>
<td width="60%" valign="top" class="text">Lets you set the alpha (transparency) for canvas. </td>
<td width="25%" valign="top" class="codeInline style5">canvasbgAlpha='60'</td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Example:</p>
<pre class="prettyprint code_container"><chart ... canvasBgColor='CCCCCC' canvasBgAlpha='80' ...></pre> <br />
</td>
</tr>
<tr>
<td valign="top" class="header">Customizing Canvas Border </td>
</tr>
<tr>
<td valign="top" class="text"><p>The 2D Charts have a border around the canvas as shown below:</p>
<img src="Images/Canvas_3.jpg" width="410" height="230" />
<p> You can customize the canvas border using the attributes below:</p></td>
</tr>
<tr>
<td valign="top" class="text">
<table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" valign="top" class="header">Attribute</td>
<td width="50%" class="header">Description</td>
<td width="25%" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">canvasBorderColor </td>
<td class="text">Lets you set the color for canvas border.</td>
<td valign="top" class="codeInline">canvasBorderColor='1D8BD1'</td>
</tr>
<tr>
<td valign="top" class="codeInline">canvasBorderThickness </td>
<td class="text">Lets you set the thickness of canvas border (in pixels)</td>
<td valign="top" class="codeInline">canvasBorderThickness='2'</td>
</tr>
<tr>
<td valign="top" class="codeInline">canvasBorderAlpha</td>
<td class="text">Lets you set the alpha for canvas border.</td>
<td valign="top" class="codeInline">canvasBorderAlpha='60'</td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top" class="text"><p>Example:</p>
<pre class="prettyprint code_container"><chart ... canvasBorderColor='666666' canvasBorderThickness='1' canvasBorderAlpha='80' ...></pre><br /> </td>
</tr>
<tr>
<td valign="top" class="header">Using gradient fills for canvas </td>
</tr>
<tr>
<td valign="top" class="text"><p>You can also use gradients to fill the canvas. The following attributes let you do so:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<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">canvasBgColor</td>
<td width="60%" valign="top" class="text">To fill the canvas 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">canvasBgColor='1D8BD1,FFFFFF' </td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">canvasBgAlpha</td>
<td width="60%" valign="top" class="text">For each color code that you've specified in <span class="codeInline">canvasbgColor</span> attribute, you need to specify a respective alpha (transparency). Separate the alphas by comma. </td>
<td width="25%" valign="top" class="codeInline">canvasBgAlpha='40,100'</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">canvasBgRatio</td>
<td width="60%" valign="top" class="text">Ratio of each color in the gradient on a scale of 100. The total ratios specified as this attribute should sum up to 100. For example, if you want to plot an equidistant gradient for 2 colors, specify <span class="codeInline">canvasbgRatio</span> as "0,100". </td>
<td width="25%" valign="top" class="codeInline">canvasBgRatio='40,60'</td>
</tr>
<tr>
<td width="15%" valign="top" class="codeInline">canvasBgAngle</td>
<td width="60%" valign="top" class="text">Angle of the gradient fill (in degrees - 0-360). </td>
<td width="25%" valign="top" class="codeInline">canvasBgAngle='270' </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="text"><p>Example:</p>
<pre class="prettyprint code_container"><chart canvasBgColor='FFFFFF,FF5904' canvasBgAlpha='100,40' canvasBgRatio='0,100' canvasBgAngle='180'></pre><br />
</td>
</tr>
<tr>
<td valign="top" class="header">Configuration Options for 3D Canvas </td>
</tr>
<tr>
<td valign="top" class="text"><p>For 3D charts (and canvas), you've the following configuration properties:</p></td>
</tr>
<tr>
<td valign="top" class="text">
<table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" valign="top" class="header">Attribute</td>
<td width="50%" valign="top" class="header">Description</td>
<td width="25%" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top" class="codeInline">showCanvasBg</td>
<td valign="top" class="text">Whether to show canvas background</td>
<td valign="top" class="codeInline">showCanvasBg='1'</td>
</tr>
<tr>
<td valign="top" class="codeInline">showCanvasBase </td>
<td valign="top" class="text">Whether to show canvas base</td>
<td valign="top" class="codeInline">showCanvasBase='1'</td>
</tr>
<tr>
<td valign="top" class="codeInline">canvasBaseDepth </td>
<td valign="top" class="text">Height of canvas base (in pixels) </td>
<td valign="top" class="codeInline">canvasBaseDepth='10' </td>
</tr>
<tr>
<td valign="top" class="codeInline">canvasBgDepth </td>
<td valign="top" class="text">Depth of Canvas Background </td>
<td valign="top" class="codeInline">canvasBgDepth='3' </td>
</tr>
</table> </td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td valign="top" class="header">Applying effects to Canvas </td>
</tr>
<tr>
<td valign="top" class="text"><p>Using Styles, you can apply effects like bevel, shadow, glow & blur to canvas. Shown below is an example where bevel (right side only) and shadow have been applied to canvas:</p>
<img src="Images/Canvas_4.jpg" width="414" height="209" />
<p>And the data for this can be listed as below:</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"><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' angle='0' />
<style name='myShadow' type='Shadow' distance='5' angle='45'/>
</definition>
<application>
<apply toObject='Canvas' styles='myBevel,myShadow' />
</application>
</styles></strong>
</chart></pre></div>
<div id="tab2" 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"
}
],
"styles": {
"definition": [
{
"name": "myBevel",
"type": "Bevel",
"angle": "0"
},
{
"name": "myShadow",
"type": "Shadow",
"distance": "5",
"angle": "45"
}
],
"application": [
{
"toobject": "Canvas",
"styles": "myBevel,myShadow"
}
]
}
}</pre></div>
</div>
</div><div style="clear:both"></div>
<p>You can similarly apply other effects too.</p> </td>
</tr>
<tr>
<td valign="top" class="header">Animating the Canvas </td>
</tr>
<tr>
<td valign="top" class="text"><p>Using Styles, you can also animate the chart canvas. For example, the XML/JSON below renders the grow-effect to the 2D canvas. For 3D canvas, you can animate only <span class="codeInline">_alpha</span> property.</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"><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='myCanvasAnimX' type='Animation' param='_xScale' start='0' duration='1' />
<style name='myCanvasAnimY' type='Animation' param='_yScale' start='0' duration='1' />
</definition>
<application>
<apply toObject='Canvas' styles='myCanvasAnimX,myCanvasAnimY' />
</application>
</styles> </strong>
</chart></pre></div>
<div id="tab4" 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": "myCanvasAnimX",
"type": "Animation",
"param": "_xScale",
"start": "0",
"duration": "1"
},
{
"name": "myCanvasAnimY",
"type": "Animation",
"param": "_yScale",
"start": "0",
"duration": "1"
}
],
"application": [
{
"toobject": "Canvas",
"styles": "myCanvasAnimX,myCanvasAnimY"
}
]
}</strong>
}</pre>
</div>
</div>
</div><div style="clear:both"></div>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Similarly, you can apply other animation effects to 2D canvas.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Chart border & background|Background.html", "Loading external logo|Logo.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>