|
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 Scatter and Bubble 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","Quick Chart Configuration|Background.html", "Bubble & Scatter chart" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">XML/JSON Attributes for Scatter and Bubble Charts</td>
</tr>
<tr>
<td valign="top" class="text"><p>Bubble and scatter charts are used for plotting data that can be defined in terms of multiple numeric parameters. In these charts, both X and Y axes are numeric. So, the position of a data point is an indicator of two distinct numeric values. </p>
<p>The scatter chart is used for plotting data which is defined in terms of two numeric parameters.</p>
<p><img src="Images/ScatterSample.jpg" width="500" height="300" alt="" /></p>
<p>Scatter charts are multi-series charts, but their data format is slightly different from that of conventional multi-series charts. Following is the data for the above chart:</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 lang-xml"><chart caption='Income Expenditure Analysis' subcaption='(sample survey done among buyers of LCD TV)'
xAxisName='Salary' yAxisName='Amount spent on LCD TV'>
<categories>
<category x='0' />
<category label='$2000' x='2000' />
<category label='$4000' x='4000' />
<category label='$6000' x='6000' />
<category label='$8000' x='8000' />
<category x='10000'/>
</categories>
<dataset color='000000'>
<set x='2500' y='350' />
<set x='2200' y='240' />
<set x='3000' y='380' />
<set x='2800' y='325' />
<set x='3250' y='650' />
<set x='3200' y='541' />
. . .
</dataset>
</chart> </pre>
</div>
<div id="tab8" class="tab_content">
<pre class="prettyprint code_container">{
"chart":{
"caption":"Income Expenditure Analysis",
"subcaption":"(sample survey done among buyers of LCD TV)",
"xaxisname":"Salary",
"yaxisname":"Amount spent on LCD TV"
},
"categories":[{
"category":[{
"x":"0"
},
{
"name":"$2000",
"x":"2000"
},
{
"name":"$4000",
"x":"4000"
},
{
"name":"$6000",
"x":"6000"
},
{
"name":"$8000",
"x":"8000"
},
{
"x":"10000"
}
]
}
],
"dataset":[{
"color":"000000",
"data":[{
"x":"2500",
"y":"350"
},
{
"x":"2200",
"y":"240"
},
{
"x":"3000",
"y":"380"
},
{
"x":"2800",
"y":"325"
},
{
"x":"3250",
"y":"650"
},
{
"x":"3200",
"y":"541"
}
]
}
]
...
}</pre>
</div>
</div>
</div>
<div style="clear:both"></div><div style="clear:both"></div>
<p>The bubble chart is used for plotting data, which is defined in terms of three numeric parameters. The third numeric parameter is indicated by the diameter of the bubble.</p>
<p><img src="Images/BubbleSample.jpg" width="500" height="300" alt="Sample bubble chart" /></p>
<p>The XML/JSON format of a bubble chart is slightly different from that of a scatter chart, this is because the bubble chart plots an additional numeric parameter. Following is the data for the above chart:</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 lang-xml"><chart caption='Portfolio of Investments in Equity'
subcaption='(diameter of bubble indicates quantity of equities held)'
xAxisName='Acquisition Price' yAxisName='Current Price' >
<categories>
<category x='0' />
<category label='$20' x='20' />
<category label='$40' x='40' />
<category label='$60' x='60' />
<category label='$80' x='80' />
<category label='$100' x='100' />
<category x='120' />
</categories>
<dataset>
<set x='7' y='30' z='1000' name='A' />
<set x='45' y='100' z='1500' name='B' />
<set x='72' y='100' z='500' name='C' />
<set x='95' y='40' z='800' name='D' />
<set x='105' y='150' z='900' name='E' />
<set x='25' y='35' z='600' name='F' />
<set x='15' y='50' z='800' name='G' />
</dataset>
</chart></pre>
</div>
<div id="tab10" class="tab_content">
<pre class="prettyprint code_container">{
"chart":{
"caption":"Portfolio of Investments in Equities",
"subcaption":"(diameter of bubble indicates quantity of equities held)",
"xaxisname":"Acquisition Price",
"yaxisname":"Current Price"
},
"categories":[{
"category":[{
"x":"0"
},
{
"label":"$20",
"x":"20"
},
{
"label":"$40",
"x":"40"
},
{
"label":"$60",
"x":"60"
},
{
"label":"$80",
"x":"80"
},
{
"label":"$100",
"x":"100"
},
{
"x":"120"
}
]
}
],
"dataset":[{
"data":[{
"x":"7",
"y":"30",
"z":"1000",
"name":"A"
},
{
"x":"45",
"y":"100",
"z":"1500",
"name":"B"
},
{
"x":"72",
"y":"100",
"z":"500",
"name":"C"
},
{
"x":"95",
"y":"40",
"z":"800",
"name":"D"
},
{
"x":"105",
"y":"150",
"z":"900",
"name":"E"
},
{
"x":"25",
"y":"35",
"z":"600",
"name":"F"
},
{
"x":"15",
"y":"50",
"z":"800",
"name":"G"
}
]
}
]
}</pre>
</div>
</div>
</div>
<div style="clear:both"></div>
<div style="clear:both"></div>
<div style="clear:both"></div>
<p class="highlightBlock">In case of bubble and scatter charts categories are optional, since the X axis is numeric. So, categories can be used to define customized X axis labels at any location in the X scale. A category can define numeric or non-numeric labels for the X axis. Unlike other multi-series charts where each dataset contains the same number of <span class="codeInline"><set></span> elements as the number of categories, scatter and bubble charts can have varying number of <span class="codeInline"><set></span> elements under each dataset. In case categories are not defined, the X axis displays an automatically calculated numeric scale with vertical divisional lines and values of the divisional lines as X axis labels. However, you can also explicitly define categories of your choice and show only those categories as X axis labels. Moreover, you can also combine the categories and automatically generated X axis labels using a mixed mode. Read <a href="#xaxislables"> Configuring the X axis labels of bubble/scatter charts</a> to learn more on how to use these modes. </p>
</td>
</tr>
<tr>
<td valign="top" class='header'><a name="displayingLabels" id="displayingLabels"></a>Displaying labels on bubbles</td>
</tr>
<tr>
<td valign='top' class='text'><p>Labels can be displayed on each bubble of a bubble chart. For this, however, every <span class="codeInline"><set></span> element must be allotted a label or an identifier using <span class="codeInline">name</span> attribute:</p>
<pre class="prettyprint code_container lang-xml"><set x='45' y='100' z='1500' name='B' /></pre>
<p>To make the labels visible over the bubbles, <span class="codeInline">showValues</span> attribute must be declared in the <span class="codeInline"><chart></span> element:</p>
<pre class="prettyprint code_container"><chart showValues='1' . . . /></pre>
<p><img src="Images/BubbleLabel.jpg" width="500" height="300" alt="Showing lbubbles with labels" /></p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="drawingQuadrants" id="drawingQuadrants"></a>Drawing quadrants on bubble and scatter charts</td>
</tr>
<tr>
<td valign="top" class="text"><p>Dividing the canvas of a bubble/scatter chart into quadrants makes analysis of the chart easier. Quadrant lines can be added to the chart by declaring <span class="codeInline">drawQuadrant</span> attribute of the <span class="codeInline"><chart></span> element.</p>
<pre class="prettyprint code_container"><chart drawQuadrant='1' . . . ></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p><img src="Images/SimpleQuadrants.jpg" width="500" height="300" alt="Chart with default quadrant" /></p>
<p>By default, the quadrant lines appear at the center of the canvas, but their position can be customized using <span class="codeInline">quadrantXVal</span> and <span class="codeInline">quadrantYVal</span> attributes. <span class="codeInline">quadrantXVal</span> sets the position of the vertical quadrant line relative to the X axis and <span class="codeInline">quadrantYVal </span>sets the position of the horizontal quadrant line relative to the Y axis. The value of these attributes must be within the range of their corresponding relative axis (and not pixels). In the chart above, since both X and Y axis ranges from 0-120, the following data is used to customize the position of the quadrant lines: </p>
<pre class="prettyprint code_container"><chart quadrantXVal='70' quadrantYVal='70' . . . ></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p><img src="Images/QuadrantsCustom.jpg" width="500" height="300" alt="Customized quadrant position" /></p>
<p>Each quadrant can have its own title in the form of a label. The attributes for defining labels for the upper quadrants are <span class="codeInline">quadrantLabelTL</span> and <span class="codeInline">quadrantLabelTR</span> (<span class="codeInline">TL</span> for top-left and <span class="codeInline">TR</span> for top-right quadrant). Similarly, the attributes for defining the labels for the lower quadrants are <span class="codeInline">quadrantLabelBL</span> and <span class="codeInline">quadrantLabelBR</span> (<span class="codeInline">BL</span> for bottom-left and <span class="codeInline">BR</span> for bottom-right quadrant).</p>
<pre class="prettyprint code_container"><chart quadrantLabelTL='Good' quadrantLabelTR='Moderate' quadrantLabelBL='Stagnant' quadrantLabelBR='Bad' . . . ></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p><img src="Images/QuadrantLabel.jpg" width="500" height="300" alt="Quadrant label" /></p>
<p>Customization of quadrant lines and labels can be done using following attributes:</p>
<table class="table" cellpadding="0" cellspacing="0" border="0" width="98%">
<tr>
<td class="header" width="25%">Attribute Name</td>
<td class="header" width="15%">Type</td>
<td class="header" width="15%">Range</td>
<td class="header" width='45%'>Description</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineColor</td>
<td class="text" width="15%" valign="top">Color</td>
<td class="text" width="15%" valign="top">Hex Code</td>
<td class="text" width='45%' valign='top'>Lets you set the color of the quadrant lines</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineThickness</td>
<td class="text" width="15%" valign="top">Number</td>
<td class="text" width="15%" valign="top">In Pixels</td>
<td class="text" width='45%' valign='top'>Lets you set the thickness of the quadrant lines</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineAlpha </td>
<td class="text" width="15%" valign="top">Number</td>
<td class="text" width="15%" valign="top">0-100</td>
<td class="text" width='45%' valign='top'>Lets you control the transparency of the quadrant lines</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineIsDashed</td>
<td class="text" width="15%" valign="top">Boolean</td>
<td class="text" width="15%" valign="top">1/0</td>
<td class="text" width='45%' valign='top'>Whether the quadrant lines should appear as dashed</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineDashLen </td>
<td class="text" width="15%" valign="top">Number</td>
<td class="text" width="15%" valign="top">In Pixels</td>
<td class="text" width='45%' valign='top'>If you've opted to show quadrant lines as dashed, this attribute lets you specify the length of the dash.</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLineDashGap</td>
<td class="text" width="15%" valign="top">Number</td>
<td class="text" width="15%" valign="top">In Pixels</td>
<td class="text" width='45%' valign='top'>If you've opted to show quadrant lines as dashed, this attribute lets you specify the length of the gap between two dash.</td>
</tr>
<tr>
<td class="codeInline" width="25%" valign="top">quadrantLabelPadding</td>
<td class="text" width="15%" valign="top">Number</td>
<td class="text" width="15%" valign="top">In Pixels</td>
<td class="text" width='45%' valign='top'>This attribute lets you control the space between quadrant labels and the canvas border.</td>
</tr>
</table></td>
</tr>
<tr>
<td class="text"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="segmentingXAxis" id="segmentingXAxis"></a>Segmenting the X axis of bubble/scatter charts into categorical zones</td>
</tr>
<tr>
<td valign="text" class="text"><p>The X-axis of bubble/scatter chart can be segmented into categorical zones using vertical trend lines.</p>
<img src="Images/TrendLineExample.jpg" width="493" height="295" class="imageBorder"/>
<p>Segmentation of the X-axis is done in the following manner:</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">
<vTrendLines>
<line startValue='1000' endValue='3000' displayValue='Low Income' isTrendZone='1' color='FF0000' alpha='5'/>
<line startValue='3000' endValue='7000' displayValue='Middle Income' isTrendZone='1' color='5B5B00' alpha='5'/>
<line startValue='7000' endValue='10000' displayValue='High Income' isTrendZone='1' color='009900' alpha='5'/>
</vTrendLines></pre>
</div>
<div id="tab12" class="tab_content">
<pre class="prettyprint code_container">"vtrendlines":[{
"line":[{
"startvalue":"1000",
"endvalue":"3000",
"displayvalue":"Low Income",
"istrendzone":"1",
"color":"FF0000",
"alpha":"5"
},
{
"startvalue":"3000",
"endvalue":"7000",
"displayvalue":"Middle Income",
"istrendzone":"1",
"color":"5B5B00",
"alpha":"5"
},
{
"startvalue":"7000",
"endvalue":"10000",
"displayvalue":"High Income",
"istrendzone":"1",
"color":"009900",
"alpha":"5"
}
]
}
]
</pre>
</div>
</div>
</div>
<div style="clear:both"></div></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="xaxislables" id="xaxislables"></a>Configuring the X axis labels of bubble/scatter charts</td>
</tr>
<tr>
<td class="text"><p>Starting FusionCharts XT, you can configure the display mode of the x-axis labels in scatter and bubble charts. You can either choose to make the chart automatically generate the X Axis labels along with vertical divisional lines or you can explicitly define each X Axis label. Additionally, you can also opt to mix these two modes. The attribute which takes care of these modes is <span class="codeInline">xAxisLabelMode</span>. </p>
<p>There are three different modes in which you can display the x-axis labels. These are as follows:</p>
<ul>
<li><strong>Auto mode</strong> - In auto mode, the chart automatically calculates and displays the x-axis labels. In this mode, the chart ignores the <span class="codeInline"><categories></span> element and allows the x-axis to inherit the properties similar to that of the vertical Y-Axis. </li>
<li><strong>Categories mode</strong> - In this mode, the x-axis displays labels explicitly defined through the <span class="codeInline"><category></span> elements within <span class="codeInline"><categories></span> element. </li>
<li><strong>Mixed mode</strong> - This mode is a combination of auto mode and category mode. It allows the x-axis to display both automatically calculated x-axis labels and the explicitly defined x-axis labels simultaneously. </li>
</ul>
<p>In the section below, we will learn how to apply any of these modes.</p></td>
</tr>
<tr>
<td class="text">Let's apply the same example of scatter chart which is provided at the beginning of this page.
</td>
</tr>
<tr>
<td class="text"><p><strong>Auto mode:</strong> (<span class="codeInline">xAxisLabelMode='auto'</span>) </p></td>
</tr>
<tr>
<td><pre class="prettyprint code_container" style="overflow:auto; height:300px;"><chart <strong>xAxisLabelMode='auto' </strong>
caption='Income Expenditure Analysis'
subcaption='(sample survey done among buyers of LCD TV)'
xAxisName='Salary' yAxisName='Amount spent on LCD TV'>
<dataset color='000000'>
<set x='9200' y='1600' />
<set x='9900' y='1800' />
<set x='9500' y='1510' />
<set x='9700' y='1400' />
<set x='8100' y='1500' />
<set x='8600' y='1300' />
<set x='8300' y='1220' />
<set x='7800' y='1300' />
<set x='7800' y='1220' />
<set x='7000' y='1210' />
<set x='6000' y='1140' />
<set x='6000' y='1000' />
<set x='6200' y='950' />
<set x='5300' y='940' />
<set x='4700' y='1000' />
<set x='4800' y='947' />
<set x='4500' y='850' />
<set x='4000' y='870' />
<set x='3700' y='800' />
<set x='3100' y='800' />
<set x='4500' y='600' />
<set x='4000' y='660' />
<set x='3600' y='500' />
<set x='3400' y='450' />
<set x='3100' y='650' />
<set x='3100' y='600' />
<set x='3100' y='540' />
<set x='2800' y='460' />
<set x='2400' y='650' />
<set x='2300' y='540' />
<set x='3000' y='340' />
<set x='2000' y='280' />
<set x='2200' y='340' />
<set x='2000' y='180' />
</dataset>
</chart>
</pre></td>
</tr>
<tr>
<td class="text"><p>The chart for the above data will look as under:</p></td>
</tr>
<tr>
<td><img src="Images/autoMode.jpg" class="imageBorder"/>
<p class="highlightBlock"> <strong>Note</strong>: In auto mode none of the <a href="DataLabels.html#advancedLabel">advanced label management</a> features will be applicable to the X axis labels.</p>
<p>In the above chart, you can see that the x-axis labels are automatically calculated and displayed. These x-axis labels are based on x-axis values which in turn are generated using the x values of the chart data. Additionally, along with each label a vertical divisional line is also rendered. You can also configure these vertical divisional lines. Please read <span class="codeInline">Quick Chart Configuration</span> > <a href="DivLines.html#vdivlines">Div Lines & Grids</a> to know more on how to configure these vertical divisional lines. </p> </td>
</tr>
<tr>
<td class="text"><strong>Categories mode:</strong> (<span class="codeInline">xAxisLabelMode='categories'</span>)
<p>For this example, we have modified the data used in the above sample. We have explicitly added some <span class="codeInline"><category></span> elements in the data as shown below: </p></td>
</tr>
<tr>
<td><pre class="prettyprint code_container" style="overflow:auto; height:300px;"><chart <strong>xAxisLabelMode='categories'</strong>
caption='Income Expenditure Analysis'
subcaption='(sample survey done among buyers of LCD TV)'
xAxisName='Salary' yAxisName='Amount spent on LCD TV'>
<strong><categories>
<category label='Low' x='1200' showVerticalLine='1' lineDashed='1'/>
<category label='Avg' x='5000' showVerticalLine='1' lineDashed='1'/>
<category label='High' x='9000' showVerticalLine='1' lineDashed='1'/>
</categories></strong>
<dataset color='000000'>
<set x='9200' y='1600' />
<set x='9900' y='1800' />
<set x='9500' y='1510' />
<set x='9700' y='1400' />
<set x='8100' y='1500' />
<set x='8600' y='1300' />
<set x='8300' y='1220' />
<set x='7800' y='1300' />
<set x='7800' y='1220' />
<set x='7000' y='1210' />
<set x='6000' y='1140' />
<set x='6000' y='1000' />
<set x='6200' y='950' />
<set x='5300' y='940' />
<set x='4700' y='1000' />
<set x='4800' y='947' />
<set x='4500' y='850' />
<set x='4000' y='870' />
<set x='3700' y='800' />
<set x='3100' y='800' />
<set x='4500' y='600' />
<set x='4000' y='660' />
<set x='3600' y='500' />
<set x='3400' y='450' />
<set x='3100' y='650' />
<set x='3100' y='600' />
<set x='3100' y='540' />
<set x='2800' y='460' />
<set x='2400' y='650' />
<set x='2300' y='540' />
<set x='3000' y='340' />
<set x='2000' y='280' />
<set x='2200' y='340' />
<set x='2000' y='180' />
</dataset>
</chart>
</pre></td>
</tr>
<tr>
<td class="text"><p>The chart for the above data will look as under:</p></td>
</tr>
<tr>
<td><img src="Images/categoryMode.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td class="text"><p>In the above chart, you can see that the <span class="codeInline">labels </span>explicitly defined in the <span class="codeInline"><category></span> elements within the <span class="codeInline"><categories></span> element are displayed. Note, that the automatically calculated labels are not displayed.
</p></td>
</tr>
<tr>
<td class="text"><strong>Mixed mode:</strong>
<p>To display mixed mode, we have set <span class="codeInline">xAxisLabelMode='mixed'</span> in the above data. </p></td>
</tr>
<tr>
<td><pre class="prettyprint code_container"><chart caption='Income Expenditure Analysis' <strong>xAxisLabelMode='mixed'</strong>... >
</pre></td>
</tr>
<tr>
<td class="text"><p> The chart for the above data will look as under:</p></td>
</tr>
<tr>
<td><img src="Images/mixedMode.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td class="text"><p>In the above chart, you can see that the x-axis displays both automatically calculated labels and the explicitly defined labels through the <span class="codeInline"><category></span> elements. </p>
<p class="highlightBlock">NOTE: By default, when <span class="codeInline">xAxisLabelMode</span> attribute is not defined and when categories are not explicitly defined in the data, the chart displays X axis labels using <span class="codeInline">auto</span> mode. In case, categories are defined ( and <span class="codeInline">xAxisLabelMode</span> attribute is not defined), the chart switches to <span class="codeInline">categories </span>mode. You can also force any of the above three modes by explicitly defining the mode using the <span class="codeInline">xAxisLabelMode</span> attribute. </p>
</td>
</tr>
<tr>
<td class="header"><a name="vdivlines" id="vdivlines"></a>Configuring x-axis vertical divisional lines</td>
</tr>
<tr>
<td class="text"> <p>Starting FusionCharts XT, you can configure the vertical divisional lines related to the x-axis. The attributes used are as follows:</p></td></tr>
<tr>
<td>
<table width="100%" border="0" class="table" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="header">Attribute Name</td>
<td valign="top" class="header">Range</td>
<td valign="top" class="header">Description</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td valign="top"><span>adjustVDiv</span><div class="version-info">Since v3.2.2</div></td>
<td valign="top">Boolean</td>
<td valign='top'>FusionCharts XT automatically tries to adjust divisional lines and limit values of the x-axis based on the data provided. However, if you want to set your explicit lower and upper limit values and number of divisional lines for the x-axis, first set this attribute to 0. That will disable automatic adjustment of divisional lines. </td>
</tr>
<tr>
<td valign="top"><span>showXAxisValues</span>
<div class="version-info">Since v3.2.2</div></td>
<td valign="top">Boolean</td>
<td valign='top'>The x-axis is divided into horizontal sections using div (divisional) lines. Each div line assumes a value based on its position. Using this attribute you can set whether to show those div line (x-axis) values or not. This attribute shows or hides the x-axis divisional lines and limits. </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
numVDivlines </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
Numeric Value > 0 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Number of vertical axis division lines that you want to display on the chart. </span> </td>
</tr>
<tr >
<td valign="top"><span>xAxisValuesStep</span><div class="version-info">Since v3.2.2</div></td>
<td valign="top">Number 1 or above </td>
<td valign='top'>By default, all div lines show their values. However, you can opt to skip every x(th) div line value using this attribute. </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
vDivlineColor </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text"> </span>Hex Code </td>
<td width='45%' valign='top'>
<span class="text">
Color for vertical divisional lines. </span> </td>
</tr>
<tr>
<td width="25%" valign="top">
<span class="text">
vDivlineThickness </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
1-5 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Thickness of vertical divisional lines. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
vDivlineAlpha </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
0-100 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Transparency of the vertical divisional lines. </span> </td>
</tr>
<tr>
<td width="25%" valign="top">
<span class="text">
vDivlineIsDashed </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
0/1 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Whether the vertical divisional lines should display as dash. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
vDivlineDashLen </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
In Pixels </span> </td>
<td width='45%' valign='top'>
<span class="text">
If the vertical divisional lines are to be displayed as dash, this attribute lets you control the length of each dash. </span> </td>
</tr>
<tr>
<td width="25%" valign="top">
<span class="text">
vDivlineDashGap </span><div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
In Pixels </span> </td>
<td width='45%' valign='top'>
<span class="text">
If the vertical divisional lines are to be displayed as dash, this attribute lets you control the length of each gap between two dashes. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
showAlternateVGridColor </span>
<div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
0/1 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Whether to show alternate colored vertical grid bands. </span> </td>
</tr>
<tr>
<td width="25%" valign="top">
<span class="text">
alternateVGridColor </span>
<div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
Hex Code </span> </td>
<td width='45%' valign='top'>
<span class="text">
Color of the alternate vertical grid bands. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
alternateVGridAlpha </span>
<div class="version-info">Since v3.2.2</div> </td>
<td width="15%" valign="top">
<span class="text">
0-100 </span> </td>
<td width='45%' valign='top'>
<span class="text">
Transparency of the alternate vertical grid bands. </span> </td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td class="header"><a name="numberformat" id="numberformat"></a>Number formatting for Scatter and Bubble charts</td>
</tr>
<tr>
<td class="text"> <p> Starting FusionCharts XT, you can configure the formatting of the numbers present on the y-axis and x-axis individually. You can also opt to use the same number formatting on both the axes. The attributes used for formatting the numbers are as follows:</p>
</td></tr> <tr>
<td>
<table width="100%" border='0' class="table" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="header">
<span class="textBold">
Attribute Name
</span>
</td>
<td valign="top" class="header">
<span class="textBold">
Type
</span>
</td>
<td valign="top" class="header">
<span class="textBold">
Range
</span>
</td>
<td valign="top" class="header">
<span class="textBold">
Description
</span>
</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
formatNumber
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
This configuration determines whether the numbers displayed on the chart will be formatted using commas, e.g., 40,000 if <span class="codeInline">formatNumber='1'</span> and 40000 if <span class="codeInline">formatNumber='0'</span>. The value of this attribute works only if </span><span class="codeInline">yFormatNumber</span><span class="text"> and </span><span class="codeInline">xFormatNumber</span><span class="text"> attributes are not specifically mentioned. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
yFormatNumber
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
This configuration determines whether the numbers displayed on the y-axis of the chart will be formatted using commas, e.g., 40,000 if <span class="codeInline">formatNumber='1'</span> and 40000 if <span class="codeInline">formatNumber='0'</span>. If this attribute is not specifically mentioned, the chart inherits the default value from </span><span class="codeInline">formatNumber</span><span class="text"> attribute. </span></td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
xFormatNumber
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
This configuration determines whether the numbers displayed on the x-axis of the chart will be formatted using commas, e.g., 40,000 if <span class="codeInline">formatNumber='1'</span> and 40000 if <span class="codeInline">formatNumber='0'</span>. If this attribute is not specifically mentioned, the chart inherits the default value from </span><span class="codeInline">formatNumber</span><span class="text"> attribute. </span></td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
formatNumberScale
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it - e.g., if <span class="codeInline">formatNumberScale</span> is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will be added at the end. The value of this attribute works only if <span class="codeInline">yFormatNumberScale</span> and <span class="codeInline">xFormatNumberScale</span> attributes are not specifically mentioned.For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
yFormatNumberScale
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it on the y-axis - e.g., if </span><span class="codeInline">yFormatNumberScale</span><span class="text"> is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will be added at the end. </span><span class="text">If this attribute is not specifically mentioned, the chart inherits the default value from </span><span class="codeInline">formatNumberScale</span><span class="text"> attribute.</span></td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
xFormatNumberScale
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
Boolean
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0/1
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it on the x-axis - e.g., if </span><span class="codeInline">xFormatNumberScale</span><span class="text"> is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will be added at the end. </span><span class="text">If this attribute is not specifically mentioned, the chart inherits the default value from </span><span class="codeInline">formatNumberScale</span><span class="text"> attribute</span></td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
defaultNumberScale
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
The default unit of the numbers that you're providing to the chart. The value of this attribute works only if <span class="codeInline">yDefaultNumberScale</span> and <span class="codeInline">xDefaultNumberScale</span> attributes are not specifically mentioned.For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
yDefaultNumberScale
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
The default unit of the numbers of the y-axis that you're providing to the chart. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">DefaultNumberScale</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
xDefaultNumberScale
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
The default unit of the numbers of the x-axis that you're providing to the chart. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">DefaultNumberScale</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
numberScaleUnit
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Unit of each block of the scale. The value of this attribute works only if <span class="codeInline">yNumberScaleUnit</span> and <span class="codeInline">xNumberScaleUnit</span> attributes are not specifically mentioned. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
yNumberScaleUnit
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Unit of each block of the scale of the y-axis. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberScaleUnit</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
xNumberScaleUnit
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Unit of each block of the scale of the x-axis. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberScaleUnit</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
numberScaleValue
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Range of the various blocks that constitute the scale. The value of this attribute works only if <span class="codeInline">yNumberScaleValue</span> and <span class="codeInline">xNumberScaleValue</span> attributes are not specifically mentioned. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
yNumberScaleValue
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Range of the various blocks that constitute the y-axis scale. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberScaleValue</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
xNumberScaleValue
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Range of the various blocks that constitute the x-axis scale. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberScaleValue</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
numberPrefix
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this attribute to ' $' to show like $40000, $50000. The value of this attribute works only if <span class="codeInline">yNumberPrefix</span> and <span class="codeInline">xNumberPrefix</span> attributes are not specifically mentioned. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
yNumberPrefix
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add prefix to all the numbers visible on the y-axis. For example, to represent all dollars figure on the y-axis, you could specify this attribute to ' $' to show like $40000, $50000. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberPrefix</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
xNumberPrefix
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add prefix to all the numbers visible on the x-axis. For example, to represent all dollars figure on the x-axis, you could specify this attribute to ' $' to show like $40000, $50000. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberPrefix</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
numberSuffix
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add a suffix to all the numbers visible on the graph. For example, to represent all figure quantified as per annum on the chart, you could specify this attribute to ' /a' to show like 40000/a, 50000/a. The value of this attribute works only if <span class="codeInline">yNumberSuffix</span> and <span class="codeInline">xNumberSuffix</span> attributes are not specifically mentioned. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
yNumberSuffix
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add a suffix to all the numbers visible on the y-axis. For example, to represent all figure quantified as per annum on the y-axis, you could specify this attribute to ' /a' to show like 40000/a, 50000/a. If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberSuffix</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
xNumberSuffix
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Using this attribute, you could add a suffix to all the numbers visible on the x-axis. For example, to represent all figure quantified as per annum on the x-axis, you could specify this attribute to ' /a' to show like 40000/a, 50000/a.If this attribute is not specifically mentioned, the chart inherits the default value from <span class="codeInline">NumberSuffix</span> attribute. For more details, please see Advanced Number Formatting section. </span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
decimalSeparator
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
This option helps you specify the character to be used as the decimal separator in a number. For more details, please see Advanced Number Formatting section.
</span>
</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
thousandSeparator
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
This option helps you specify the character to be used as the thousands separator in a number. For more details, please see Advanced Number Formatting section.
</span>
</td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
inDecimalSeparator
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give an error while converting to number. So, FusionCharts XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the decimal separator. For more details, please see Advanced Number Formatting section.
</span>
</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
inThousandSeparator
</span>
</td>
<td width="15%" valign="top">
<span class="text">
String
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Character
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give an error while converting to number. So, FusionCharts XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the thousand separator. For more details, please see Advanced Number Formatting section.
</span>
</td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
decimals
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Number
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0-10
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
Number of decimal places to which all numbers on the chart will be rounded to.
</span>
</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">forceDecimals</span></td>
<td width="15%" valign="top"><span class="text">Boolean</span></td>
<td width="15%" valign="top">
<span class="text">
0-10
</span>
</td>
<td width='45%' valign='top'>
<span class="text">Whether to add 0 padding at the end of decimal numbers. For example, If you limit the maximum number of decimal digits to 2, a number like 55.345 will be rounded to 55.34. This does not mean that all numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. In order to have fixed number of decimal places attached to all the numbers, set this attribute to 1.</span></td>
</tr>
<tr class='trLightBlueBg'>
<td class="text" width="25%" valign="top"><span class="text">forceYAxisValueDecimals</span>
<div class="version-info">Since v 3.2</div></td>
<td class="text" width="15%" valign="top"><span class="text">Boolean</span></td>
<td class="text" width="15%" valign="top"><span class="text">0/1</span></td>
<td class="text" width='45%' valign='top'><span class="text">Whether to forcefully attach decimal places to all y-axis values. For example, If you limit the maximum number of decimal digits to 2, a number like 55.345 will be rounded to 55.34. This does not mean that all y-axis numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. In order to have fixed number of decimal places attached to all y-axis numbers, set this attribute to 1.</span> </td>
</tr>
<tr class='trVeryLightYellowBg'>
<td class="text" width="25%" valign="top"><span class="text">forceXAxisValueDecimals</span>
<div class="version-info">Since v3.2.2</div></td>
<td class="text" width="15%" valign="top"><span class="text">Boolean</span></td>
<td class="text" width="15%" valign="top"><span class="text">0/1</span></td>
<td class="text" width='45%' valign='top'><span class="text">Whether to forcefully attach decimal places to all x-axis values. For example, If you limit the maximum number of decimal digits to 2, a number like 55.345 will be rounded to 55.34. This does not mean that all x-axis numbers will be displayed with a fixed number of decimal places. For instance 55 will not be displayed as 55.00 and 55.1 will not become 55.10. In order to have fixed number of decimal places attached to all x-axis numbers, set this attribute to 1.</span> </td>
</tr>
<tr class='trLightBlueBg'>
<td width="25%" valign="top">
<span class="text">
yAxisValueDecimals
</span>
</td>
<td width="15%" valign="top">
<span class="text">
Number
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0-10
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
If you've opted to not adjust div lines, you can specify the div line values decimal precision using this attribute.
</span>
</td>
</tr>
<tr class='trVeryLightYellowBg'>
<td width="25%" valign="top">
<span class="text">
xAxisValueDecimals
</span> <div class="version-info">Since v3.2.2</div>
</td>
<td width="15%" valign="top">
<span class="text">
Number
</span>
</td>
<td width="15%" valign="top">
<span class="text">
0-10
</span>
</td>
<td width='45%' valign='top'>
<span class="text">
If you've opted not to adjust vertical div lines, you can specify the decimal precision of the div line values using this attribute. </span> </td>
</tr>
</table>
</td></tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="scatteplots" id="scatteplots"></a>Connecting scatter plots by a line in XY (Scatter) chart </td>
</tr>
<tr>
<td valign="text" class="text"><p>In scatter charts, all the data points can be connected by a line. This can be done by declaring <span class="codeInline">drawLine</span> attribute of the <span class="codeInline"><dataset></span> element as under: </p>
<pre class="prettyprint code_container"><dataset drawLine="1" . . . ></pre>
<p>Following scatter chart shows a line connecting all the data plots of a scatter chart. </p>
<p><img src="Images/ScatterLine.jpg" alt="Scatter Chart with a line" class="imageBorder"/></p></td>
</tr>
<tr>
<td class="header"><a name="regressionLine" id="regressionLine"></a><a name="regression"></a>Regression Line in Scatter and Bubble charts</td>
</tr>
<tr>
<td class="text"><p>Starting FusionCharts XT, scatter and bubble charts can draw regression lines based on the values provided to the charts. </p>
<p>In a scatter or a bubble chart, each data point has two distinct numeric values, one (x value) with respect to the X axis and the other (y value) with respect to the Y axis. A regression line shows the trend of the y values with respect to the x values or the trend of the x values with respect to the y values. Hence, a regression line can be used to derive a particular trend from the scattered data points in the chart canvas and predict values accordingly. </p>
<p>The regression line is shown as a straight line.</p>
<p> Regression line can be used to find trend and predict future sales, stock prices, currency exchange rates, productivity gains resulting from a training program etc. </p>
<p class="highlightBlock">There are several methods to calculate and draw regression lines. The scatter and bubble charts of FusionCharts XT uses <strong>Linear Regression</strong> and <strong>least-squares or least absolute deviation method</strong>. This method calculates the best-fitting straight-line for the observed data by minimizing the sum of the squares of the vertical deviations from each data point to the line (if a point lies on the fitted line exactly, then its vertical deviation is 0). Because the deviations are first squared, then summed, there are no cancellations between positive and negative values. </p>
<p>To show the regression line you will need to declare <span class="codeInline">showRegressionLine='1'</span> in <span class="codeInline"><chart></span> or <span class="codeInline"><dataset></span> element. </p>
<p>To display regression lines of all the datasets of a chart you need to declare <span class="codeInline">showRegressionLine='1'</span> in the <span class="codeInline"><chart></span> element. You can show the regression line for a particular <span class="codeInline"><dataset></span> element declaring <span class="codeInline">showRegressionLine='1'</span> in that particular <span class="codeInline"><dataset></span> element.</p></td>
</tr>
<tr>
<td><pre class="prettyprint code_container"><chart showRegressionLine="1" . . . ></pre></td>
</tr>
<tr>
<td>or</td>
</tr>
<tr>
<td><pre class="prettyprint code_container"><dataset showRegressionLine="1" . . . ></pre> </td>
</tr>
<tr>
<td class="text"><p>Following scatter chart shows a regression line:
</p></td>
</tr>
<tr>
<td><img src="Images/RegressionLine.jpg" class="imageBorder"/><br/><br/></td>
</tr>
<tr>
<td class="header"><a name="regressionmodes" id="regressionmodes"></a>Modes of Regression</td>
</tr>
<tr>
<td class="text">
<p>The chart uses one of the two modes to display a regression line:</p>
<ul>
<li><strong>Y on X</strong> : When y values are predicted or a trend of y values are calculated based on the x values</li>
<li><strong>X on Y</strong> : When x values are predicted or a trend of x values are calculated based on the y values</li>
</ul>
<p>By default, scatter and bubble charts use <strong>Y on X</strong> mode to draw the regression lines. However, you can select the <strong>X on Y</strong> mode setting <span class="codeInline">showYOnX = '0'</span> in <span class="codeInline"><chart></span> or <span class="codeInline"><dataset></span> element.</p>
<div class="highlightBlock">
The formulae used to draw the regression lines for both the modes are given below:<br />
<br />
<strong>Y on X</strong> – The regression equation of <strong>Y on X</strong> is the equation of the best fitting straight line in the form <span class="codeInline">y= a+bx</span>, where <span class="codeInline">x</span> is the explanatory variable and <span class="codeInline">y</span> is the dependent variable.<br />
When, <span class="codeInline">b = ( n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σx² – (Σx)² )</span><br />
<br />
<strong>X on Y</strong> - The regression equation of <strong>X on Y</strong> is the equation of the best fitting straight line in the form<span class="codeInline"> x= a+by</span>, where <span class="codeInline">y</span> is the explanatory variable and <span class="codeInline">x</span> is the dependent variable. <br />
When, <span class="codeInline">b = ( n . Σ (x.y) - (Σ x).(Σ y) )/ (n Σy² – (Σy)² ) </span></div>
<p>A chart shown below draws a regression line to show the trend of the amount spent on LCD TV (y values) with relation to buyer's salary brackets (x value). Hence, this is using <strong>Y on X</strong> mode.</p>
</td>
</tr>
<tr>
<td><img src="Images/RegressionLine.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td class="text">
<p>Another chart below shows the regression trend of buyer's economic status (salary as x values) with relation to price of LCD TV (amount spent on y values). Hence, this is using <strong>X on Y</strong> mode. </p>
</td>
</tr>
<tr>
<td><img src="Images/regressionXonY.jpg" class="imageBorder"/><br/>
<br/></td>
</tr>
<tr>
<td class="highlightBlock"><div class="msg_handler_slider"><a>Click here to view the XML data for the above chart</a> »</div>
<div class="msg_body">
<pre class="prettyprint code_container"><chart <strong>showRegressionLine='1' showYOnX='0</strong>' xAxisLabelmode='auto'
caption='Income Expenditure Analysis'
subcaption='(sample survey done among buyers of LCD TV)'
xAxisName='Salary' yAxisName='Amount spent on LCD TV' >
<dataset color='000000'>
<set x='4900' y='1600' />
<set x='4800' y='1800' />
<set x='5000' y='1510' />
<set x='4700' y='1400' />
<set x='4500' y='1500' />
<set x='4300' y='1300' />
<set x='4400' y='1220' />
<set x='4200' y='1300' />
<set x='4100' y='1220' />
<set x='4000' y='1210' />
<set x='4500' y='1140' />
<set x='4500' y='1000' />
<set x='4300' y='950' />
<set x='3900' y='940' />
<set x='3700' y='1000' />
<set x='3800' y='947' />
<set x='3500' y='850' />
<set x='4000' y='870' />
<set x='3700' y='800' />
<set x='3100' y='800' />
<set x='4500' y='600' />
<set x='4000' y='660' />
<set x='3600' y='500' />
<set x='3400' y='450' />
<set x='3100' y='650' />
<set x='3100' y='600' />
<set x='3100' y='540' />
<set x='2800' y='460' />
<set x='2300' y='650' />
<set x='2200' y='540' />
<set x='2900' y='370' />
<set x='2000' y='380' />
<set x='1800' y='330' />
<set x='2500' y='350' />
<set x='2200' y='270' />
</dataset>
</chart>
</pre>
</div></td>
</tr>
<tr>
<td class="text"><p> You can configure the cosmetics of the regression lines using the following attributes:</p></td>
</tr>
<tr>
<td><table border="0" class="table" cellpadding="0" cellspacing="0">
<tr class="trAttHeader">
<td width="20%" class="header">Attribute Name</td>
<td width="20%" class="header">Range</td>
<td width="60%" class="header">Description</td>
</tr>
<tr>
<td width="25%" valign="top"><span class="text">regressionLineColor</span>
<div class="version-info">Since v3.2.2</div></td>
<td width="15%" valign="top">Hex Color</td>
<td width='45%' valign='top'><span class="text"> This attribute allows you to set the color of the regression line </span></td>
</tr>
<tr class="trLightBlueBg">
<td width="25%" valign="top"><span class="text">regressionLineThickness</span>
<div class="version-info">Since v3.2.2</div></td>
<td width="15%" valign="top">Number</td>
<td width='45%' valign='top'><span class="text"> This attribute allows you to set the thickness of the regression line </span></td>
</tr>
<tr>
<td width="25%" valign="top"><span class="text">regressionLineAlpha</span>
<div class="version-info">Since v3.2.2</div></td>
<td width="15%" valign="top"><span class="text">0-100</span></td>
<td width='45%' valign='top'><span class="text"> This attribute allows you to set the transparency of the regression line </span></td>
</tr>
</table></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Pie & Doughnut charts|Pie_DoughnutChartAtrributes.html", "Stacked chart|StackedChartAttributes.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>