|
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>Number Formatting in FusionCharts XT </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", "Number formatting basics" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Number Formatting in FusionCharts XT</td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT offers a lot of options to format numbers on the chart. You can configure number prefixes & suffixes, decimal places, and scaling of numbers based on a pre-defined scale. In this section, we'll see the number formatting properties supported by FusionCharts XT and look into number scaling in the next section.</p>
<p>We'll start with setting decimal precisions for the numbers on chart. </p> </td>
</tr>
<tr>
<td valign="top" class="header">Configuring decimal places (rounding) </td>
</tr>
<tr>
<td valign="top" class="text"><p>All the charts in FusionCharts XT support the attribute <span class="codeInline">decimals</span>. This single attribute lets you control the decimal precision of all the numbers on the chart. Using this attribute, you can globally set the number of decimal places of ALL numbers of the chart.</p>
<p> For example, if you have numbers on your chart as 12.432, 13.4 and 13 and you set <span class="codeInline"><chart ... decimals='2' ></span>, the numbers will be converted to 12.43, 13.4 and 13 respectively.</p> </td>
</tr>
<tr>
<td valign="top" class="text"><table width="600px" border="0">
<tr>
<td><div align="center"><img src="Images/Number_1.jpg" width="258" height="208" /></div></td>
<td><div align="center"><img src="Images/Number_2.jpg" width="256" height="210" /></div></td>
</tr>
<tr>
<td valign="top"><div align="center" class="imageCaption">Chart without any decimal formatting applied </div></td>
<td valign="top"><div align="center" class="imageCaption">With decimals set to 2 (see the first column value) </div></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="text"><p>Similarly, if you had data as 0.12352, 0.134 and 0.13, and you set decimals as 3, FusionCharts XT will output 0.124, 0.134 and 0.13 respectively. Note that even though we've set decimals to 3, FusionCharts XT now doesn't forcibly add the 0 padding to 0.13 to form 0.130, as the trailing 0 is un-necessary.</p>
<p>However, if you want your numbers on the chart to have trailing zeroes too, you can set <span class="codeInline"><chart ... forceDecimals='1' ></span> and now the numbers will show as 0.124, 0.134 and 0.130 respectively. Shown below are examples: </p></td>
</tr>
<tr>
<td valign="top" class="text"><table width="600px" border="0">
<tr>
<td><div align="center"><img src="Images/Number_3.jpg" width="255" height="205" /></div></td>
<td><div align="center"><img src="Images/Number_4.jpg" width="257" height="206" /></div></td>
</tr>
<tr>
<td valign="top"><div align="center" class="imageCaption">Trailing zeroes missing in last column's value </div></td>
<td valign="top"><div align="center" class="imageCaption">Forcing trailing zeroes by setting <span class="codeInline">forceDecimals='1'</span> </div></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" class="text"><p>On <strong>dual y-axis charts</strong>, you've to set decimals and configuration per-axis. So, the XML/JSON will look like: </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">
<div id="tab1" class="tab_content"><pre class="prettyprint code_container"><chart decimals='3' sDecimals='2' forceDecimals='1' ></pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container"> "chart":{<br /> "decimals":"3",<br /> "sdecimals":"2",<br /> "forcedecimals":"1"<br /> }</pre>
</div></div></div><div style="clear:both"></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, <span class="codeInline">sDecimals</span> refers to the decimal places to be added to any data point plotted against secondary axis (hence the prefix <span class="codeInline">s</span> before decimals). </p></td>
</tr>
<tr>
<td valign="top" class="header">Automatic number formatting </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT automatically formats your numbers by adding K,M (Kilo, Million) and proper commas to the numbers. Shown below is an example:</p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_5.jpg" width="307" height="208" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above image, the data for chart is 12500, 13400 and 13300. FusionCharts XT automatically formats the number scaling to convert to K (Thousands) & M (Millions). If you do not wish to truncate numbers in this manner, just use:</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 formatNumberScale='0'...></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container"> "chart":{<br /> "formatnumberscale":"0"
...<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text">
<p>When you now view the chart, you'll get the following output: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_6.jpg" alt="" width="306" height="207" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>You can see above that FusionCharts XT is now showing full numbers on the chart. It has also added commas to the numbers at the required places. If you do not need the commas too, set <span class="codeInline">formatNumber=0</span>. But, setting <span class="codeInline">formatNumber=0</span> will not format any decimal places too (even if explicitly specified in your data). </p>
<p>Shown below is an example with <span class="codeInline"><chart ... formatNumber='0' formatNumberScale='0' ..></span> : </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_7.jpg" width="304" height="206" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>You can see that the commas have been removed from numbers. </p>
<p>Again, for <strong>dual y-axis charts</strong>, you'll have to set it explicitly for secondary axis using the XML/JSON below. While the primary axis, by default, scales numbers to <span class="codeInline">K,M</span>, the secondary axis does not. For the secondary axis to scale to K,M, you'll have to explicitly define number scaling for the axis. </p></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 ... formatNumber='0' formatNumberScale='0' sFormatNumber='0' sFormatNumberScale='0'...></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container"> "chart":{
...<br /> "formatnumber":"0",<br /> "formatnumberscale":"0",<br /> "sformatnumber":"0",<br /> "sformatnumberscale":"0"
...<br /> }</pre>
</div></div></div><div style="clear:both;"></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, the prefix <span class="codeInline">s</span> represents secondary axis. </p></td>
</tr>
<tr>
<td valign="top" class="header">Setting custom thousand and decimal separator character</td>
</tr>
<tr>
<td valign="top" class="text"><p>By default, FusionCharts XT uses . (dot) as decimal separator and , (comma) as thousand separator character. However, you can customize this character depending on your requirements. </p>
<p>To do so, use the <span class="codeInline">decimalSeparator</span> and <span class="codeInline">thousandSeparator</span> attribute. For example, let's set our thousands separator as dot and decimal separator as comma. To do so, you'll have to use the following data: </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"><chart ... decimalSeparator=',' thousandSeparator='.' > </pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">"chart":{
...<br /> "decimalseparator":",",<br /> "thousandseparator":"."<br /> }</pre>
</div></div></div><div style="clear:both;"></div></td>
</tr>
<tr>
<td class="text">
<p>Shown below is the output. </p></td>
</tr>
<tr>
<td valign="top" class="text"><table width="600px" border="0">
<tr>
<td><div align="center"><img src="Images/Number_8.jpg" alt="" width="261" height="215" /></div></td>
<td><div align="center"><img src="Images/Number_9.jpg" width="257" height="209" /></div></td>
</tr>
<tr>
<td valign="top"><div align="center" class="imageCaption">Chart with default decimal and thousand separators. FusionCharts XT by default separates thousands using commas and decimals using dots. </div></td>
<td valign="top"><div align="center" class="imageCaption">Chart with swapped decimal and thousands separator character</div></td>
</tr>
</table><br /></td>
</tr>
<tr>
<td valign="top" class="header"><a name="thousandSeparatorPosition"></a>Configuring thousand separator position </td>
</tr>
<tr>
<td class="text"><p>FusionCharts XT automatically decides the position of the thousand separator. By default, the thousand separator is placed after every three digits from right. A chart with default thousand separator position will look as under:<br/>
<br/>
<img src="Images/thousandSeparatorPos.jpg" width="254" height="208" class="imageBorder"/>
</p>
<p>Starting FusionCharts XT -Service Release 3, you can customize the position of the thousand separator and place it as required. To place the thousand separator in custom positions you need to use the <span class="codeInline">thousandSeparatorPosition</span> attribute. Shown below is a chart with the thousand separator placed after four digits from right: <br/>
<br/>
<img src="Images/thousandSeparatorPos1.jpg" width="248" height="203" class="imageBorder"/> </p>
<p>In the above chart, the attribute <span class="codeInline">thousandSeparatorPosition</span> is set to <span class="codeInline">'4'</span>. So, the thousand separator (,) is placed after every four digits starting from right. </p>
<p>You can also set multiple values (separated by comma) to this attribute, instead of a single value. Thus, you can specify complex thousand separator positions. For example, specifying multiple values, you can display numbers in Indian currency format, where the first thousand separator (for thousand) is placed after three digits from right and then onwards the thousand separator is placed after every two digits. Shown below is an example chart displaying Indian currency format:<br/><br/>
<img src="Images/thousandSeparatorPos2.jpg" width="247" height="200" class="imageBorder"/> </p>
<p>In the above chart, we have set <span class="codeInline">thousandSeparatorPosition='2,3'</span>. So, the thousand separator is first placed after 3 digits starting from right and then onwards after every two digits. Given below are some sample combinations of values which can be set to this attribute: </p>
</td></tr>
<tr>
<td valign="top" class="text">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table">
<tr>
<td width="300" valign="top" class="header">Value set</td>
<td valign="top" class="header">Description</td>
<td width="150" valign="top" class="header">Example</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="0"</span></td>
<td valign="top"> When this attribute is set to 0, it takes the default value, which is 3, and places the separator after every three digits starting from right.
<p class="highlightBlock">Rule: When zero is specified as the thousand separator position, it assumes the default value, which is 3. </p>
</td>
<td valign="top">1,344,317,518</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="2"</span></td>
<td valign="top">When this attribute is set to 2, the thousand separator is placed after every two digits starting from right. </td>
<td valign="top">13,44,31,75,18</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="4"</span></td>
<td valign="top">When this attribute is set to 4, the thousand separator is placed after every four digits starting from right. </td>
<td valign="top">13,4431,7518</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="1,2"</span></td>
<td valign="top">In this case, first the thousand separator is placed after two digits from right. Then onwards the separator will be placed after every digit.</td>
<td valign="top">1,3,4,4,3,1,7,5,18</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="1,2,3"</span></td>
<td valign="top">In this scenario, first the separator will be placed after three digits from right, then the separator will be placed after two digits and then onwards it will be placed after every digit. </td>
<td valign="top">1,3,4,4,3,17,518</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="3,1,0"</span></td>
<td valign="top"> In this scenario, the value 0 will be replaced by the default value 3. So, the thousand separator will be first placed after three digits from right. Then the separator is placed after one digit. Then onwards it will be placed after every three digits.
<p class="highlightBlock">Rule: When zero is specified as the first thousand separator position in a comma separated list of thousand separator positions, it assumes the default value, which is 3.</p>
</td>
<td valign="top">134,431,7,518</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="1,0,2"</span></td>
<td valign="top"> This is a special case where 0 is used as the second value. In this scenario, first the thousand separator is placed after two digits. Next, the value 0 assumes the previous value, which is 2. Hence, the separator will again be placed after two digits and then onwards it will be placed after every digit.
<p class="highlightBlock">Rule: When zero is specified NOT as the first thousand separator position in a comma separated list of thousand separator positions, it assumes the previous value from the list.</p>
</td>
<td valign="top">1,3,4,4,3,1,75,18</td>
</tr>
<tr>
<td valign="top"><span class="codeInline">thousandSeparatorPosition="0,1,3"</span></td>
<td valign="top">In this scenario, first the thousand separator is placed after three digits. Then it is placed after every digit. Now, the value 0 assumes the previous value, 1 and rest of the separators are placed after every digit.
<p class="highlightBlock">Rule: When zero is specified NOT as the first thousand separator position in a comma separated list of thousand separator positions, it assumes the previous value from the list.</p></td>
<td valign="top">1,3,4,4,3,1,7,518</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="text"> </td></tr>
<tr>
<td class="highlightBlock">Note: Any negative value set to this attribute will be converted to a positive value. For example, <span class="codeInline">thousandSeparator="-2"</span> will be converted to <span class="codeInline">thousandSeparator="2"</span>.</td>
</tr>
<tr>
<td class="text"> </td></tr>
<tr>
<td valign="top" class="header">Adding number prefix and suffix </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT allows you to add a prefix or suffix to all numbers on the chart. You can use the following attributes of <span class="codeInline"><chart></span> element to attain the same:</p>
<ul>
<li><span class="codeInline">numberPrefix="$"</span> : Using this attribute, you could add prefix to all the numbers visible on the graph (plotted on primary axis). For example, to represent all dollars figure on the chart, you could specify this attribute to ' $' to show like $40000, $50000. </li>
<li><span class="codeInline">numberSuffix="p.a"</span> : 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. </li>
<li><span class="codeInline">sNumberPrefix="$"</span> : Using this attribute, you could add prefix to all the numbers visible on the graph (plotted against secondary axis, in case of dual y-axis charts).</li>
<li><span class="codeInline">sNumberSuffix="p.a"</span> : Using this attribute, you could add a suffix to all the numbers visible on the graph (plotted against secondary axis, in case of dual y-axis charts).</li>
</ul>
<p class="highlightBlock">To know more on how to use currency symbols (£, €, ¥ etc.) refer to <a href="../advanced/special-chars/SpCharAll.html">Using Currency Symbols</a> page. If you intended to use special punctuations or characters like &, <, >, % etc. refer to <a href="../advanced/special-chars/SpPunctuation.html">Using Special Punctuation</a> page. </p> </td>
</tr>
<tr>
<td valign="top" class="text">Examples:
<table width="600p" border="0">
<tr>
<td width="50%"><div align="center"><img src="Images/Number_12.jpg" width="257" height="206" /></div></td>
<td><div align="center"><img src="Images/Number_13.jpg" width="254" height="208" /></div></td>
</tr>
<tr>
<td width="50%" valign="top"><div align="center" class="imageCaption">Number Prefix set as $ for the chart </div></td>
<td valign="top"><div align="center" class="imageCaption">Number Suffix Set as % </div></td>
</tr>
</table><br /></td>
</tr>
<tr>
<td valign="top" class="header">Decimal formatting for y-axis values when automatic adjustment of div-lines is off </td>
</tr>
<tr>
<td valign="top" class="text"><p>If you've opted to manually set the number of divisional lines on chart, you can also control the decimals of y-axis values separately. For example, consider the following data and chart:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab11">XML</a></li>
<li><a href="#tab12">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab11" class="tab_content">
<pre class="prettyprint code_container"><chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' >
<set label='John' value='125' />
<set label='Mary' value='134' />
<set label='Andy' value='131' />
</chart></pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">{<br /> "chart":{<br /> "yaxisminvalue":"115",<br /> "yaxismaxvalue":"140",<br /> "adjustdiv":"0",<br /> "numdivlines":"3"<br /> },<br /> "data":[{<br /> "label":"John",<br /> "value":"125"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"134"<br /> },<br /> {<br /> "label":"Andy",<br /> "value":"131"<br /> }<br /> ]<br />}</pre>
</div></div></div><div style="clear:both;"></div></td>
</tr>
<tr>
<td class="text"><p>The chart for this XML/JSON looks as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_10.jpg" width="256" height="208" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this chart, we've manually fixed the chart lower limit, upper limit and number of divisional lines. We've also asked FusionCharts XT not to automatically adjust divisional lines. Now, if you see the chart, you'll find that FusionCharts XT has truncated decimals from y-axis values, as it couldn't find any other decimal values on the chart. </p>
<p>You can, however, opt to just show decimals on y-axis values in this case (when <span class="codeInline">adjustDiv</span> is false) using <span class="codeInline">forceYAxisValueDecimals='1' </span>and <span class="codeInline">yAxisValueDecimals='number'</span> attribute. </p>
<p>Example:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab13">XML</a></li>
<li><a href="#tab14">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab13" class="tab_content">
<pre class="prettyprint code_container"><chart yAxisMinValue='115' yAxisMaxValue='140' adjustDiv='0' numDivLines='3' forceYAxisValueDecimals='1' yAxisValueDecimals='2' decimals='0' > </pre></div>
<div id="tab14" class="tab_content">
<pre id="pre-datajson7" class="prettyprint code_container"> "chart":{<br /> "yaxisminvalue":"115",<br /> "yaxismaxvalue":"140",<br /> "adjustdiv":"0",<br /> "numdivlines":"3",<br /> "forceyaxisvaluedecimals":"1",<br /> "yaxisvaluedecimals":"2",<br /> "decimals":"0"<br /> }</pre>
</div></div></div><div style="clear:both;"></div></td>
</tr>
<tr>
<td class="text">
<p>When you now see the chart, you'll get 2 decimal places on y-axis values. </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_11.jpg" alt="Forced decimals on y-axis values" width="304" height="204" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>For charts with dual y-axis, the XML/JSON will be:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab15">XML</a></li>
<li><a href="#tab16">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab15" class="tab_content">
<pre class="prettyprint code_container"><chart ... forceSYAxisValueDecimals='1' SYAxisValueDecimals='2' ...> </pre></div>
<div id="tab16" class="tab_content">
<pre id="pre-datajson8" class="prettyprint code_container">"chart":{
...<br /> "forcesyaxisvaluedecimals":"1",<br /> "syaxisvaluedecimals":"2"
...<br /> }</pre>
</div></div></div><div style="clear:both;"></div></td></tr>
<tr>
<td class="text">
<p>Next, we'll see how to utilize the new number scale formatting properties provided in FusionCharts XT. </p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Legend|Legend.html", "Number Scaling|Number_Scaling.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>