|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/advanced/number-format/ |
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>Using formatted input numbers </title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "Advanced charting", "Number formatting|Number_Basics.html", "Input number formatting" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Using formatted input numbers </td>
</tr>
<tr>
<td valign="top" class="text"><p>In some countries, commas are used as decimal separators and dots as thousand separators. But, if you directly specify such numbers in FusionCharts XT XML/JSON, it will give an error while converting to number. FusionCharts XT lets you specify numbers in your own format in XML/JSON. </p>
<p>Consider the data below: </p> </td>
</tr>
<tr>
<td valign="top">
<div class="container">
<ul class="tabs">
<li><a href="#tab1">XML</a></li>
<li><a href="#tab2">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><chart <strong>inThousandSeparator='.' inDecimalSeparator=','</strong> formatNumberScale='0'>
<set label='John' <strong>value='420.315,43'</strong> />
<set label='Mary' <strong>value='295.345,98'</strong> />
<set label='Tom' <strong>value='523.323,76'</strong> />
</chart></pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">{<br /> "chart":{<br /> <strong> "inthousandseparator":".",<br /> "indecimalseparator":","</strong>,<br /> "formatnumberscale":"0"<br /> },<br /> "data":[{<br /> "label":"John",<br /> <strong>"value":"420.315,43"</strong><br /> },<br /> {<br /> "label":"Mary",<br /> <strong>"value":"295.345,98"</strong><br /> },<br /> {<br /> "label":"Tom",<br /> <strong>"value":"523.323,76"</strong><br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this data, we are providing the numbers in the non-standard convention - that is, we have used dot as the thousand separator and comma as the decimal separator (as followed in some European countries). Now, to make sure that FusionCharts XT reads these numbers in the right way, we convey our input decimal and thousand separator characters as under:</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 ... inThousandSeparator='.' inDecimalSeparator=',' ...> </pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container"> "chart":{
...<br /> "inthousandseparator":".",<br /> "indecimalseparator":","
...<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text">
<p>This tells FusionCharts XT that it should treat dot in the input numbers as thousands (instead of normal decimals) and comma as decimals. </p>
<p class="highlightBlock">Note that this feature does NOT work in Zoom Line chart to optimize it for high dataset volume. In that chart, you will have to specify numbers in standard format (using . as decimal separator and no commas in number). However, output number formatting (that is, the way numbers are shown on chart) can be configured fully. </p>
<p>When you now view this chart, you will get the following output: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_Input1.jpg" width="307" height="210" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>You can see that FusionCharts XT has interpreted the numbers properly and automatically converted the numbers into the standard format. If you want to output the number again in the non-conventional format, you can use the following XML/JSON: </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 inThousandSeparator='.' inDecimalSeparator=',' <strong>thousandSeparator='.' decimalSeparator=','</strong> formatNumberScale='0'>
<set label='John' value='420.315,43' />
<set label='Mary' value='295.345,98' />
<set label='Tom' value='523.323,76' />
</chart></pre> </div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{<br /> "inthousandseparator":".",<br /> "indecimalseparator":",",<br /> <strong>"thousandseparator":".",<br /> "decimalseparator":","</strong>,<br /> "formatnumberscale":"0"<br /> },<br /> "data":[{<br /> "label":"John",<br /> "value":"420.315,43"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"295.345,98"<br /> },<br /> {<br /> "label":"Tom",<br /> "value":"523.323,76"<br /> }<br /> ]<br />}</pre>
</div></div></div> </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above data we are specifying custom characters for both input and output formats. When you now see the chart, you will get something as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Number_Input2.jpg" width="307" height="210" /></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Number Scaling|Number_Scaling.html","Using special characters - Using Multi-lingual text|../special-chars/SPChar.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>