|
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 Scaling </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 Scaling" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Number Scaling </td>
</tr>
<tr>
<td valign="top" class="text"><p>Number scaling lets you shorten the numbers on charts using commonly used scales (like K,M etc.). You can define your own scales for numbers and then apply it to all numbers on the chart. </p></td>
</tr>
<tr>
<td valign="top" class="header">Basic Example </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let's start with the most basic example which is already defined in FusionCharts XT- thousands (K) and millions (M) scale. </p>
<p>By default, if your numbers on the chart are greater than 1000, FusionCharts XT scales them to K (Thousands) or M (Millions). For example, if you plot a chart with data as 12500, 13400 and 13300, you'll see the following chart: </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>As you can see above, FusionCharts XT has scaled the numbers down to K. By default, FusionCharts XT has the K,M (1000,1000) scaling defined for each chart. If you do not want this scaling to be applied by default, you can set:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">XML</a></li>
<li><a href="#tab2">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><chart formatNumberScale='0' ...> </pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">"chart":{<br /> "formatnumberscale":"0"
...<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text"><p>You can, however, change it to anything you wish. Let's see it in the next example. </p></td>
</tr>
<tr>
<td valign="top" class="header">Adding billions to default scaling </td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT, by default, has 1000,1000 (K,M) scaling defined for all charts. It doesn't have the scaling for billions defined. Let's modify the number scaling to add billion so that the final scale looks like 1000,1000,1000 (K,M,B). </p>
<p>This scale, in human terms, will look something as under:</p>
<p>1000 = 1 K<br />
1000 K = 1 M<br />
1000 M = 1 B</p>
<p>Now, to convert this scale into FusionCharts XT XML/JSON format, you'll have to do the following: </p>
<ol>
<li>Define your own scale for the chart as under:<br /><br />
<div class="container" style="overflow:hidden;">
<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 numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' ></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container"> "chart":{<br /> "numberscalevalue":"1000,1000,1000",<br /> "numberscaleunit":"K,M,B"<br /> }</pre>
</div></div></div>
<p>If you carefully see this and match it with previous table, you'll find that whatever numeric figure was present on the left hand side of the table is put in <span class="codeInline">numberScaleValue</span> and whatever unit was present on the right side of the scale table has been put under <span class="codeInline">numberScaleUnit</span> - all separated by commas.</p> </li>
<li>Set the chart formatting flags to on as under:<br /><br />
<div class="container" style="overflow:hidden;">
<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='1' formatNumberScale='1' ...></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container"> "chart":{<br /> "formatnumber":"1",<br /> "formatnumberscale":"1"
...<br /> }</pre>
</div></div></div></li>
</ol>
<p>When you now view a chart containing data in billions, you'll see as under. Note that the chart now contains figure both in millions and billions. </p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Scale_1.jpg" width="256" height="208" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>The XML/JSON for this chart can be listed as under:</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 numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' numberPrefix='$'>
<set label='John' value='986000000' />
<set label='Mary' value='3134000000' />
<set label='Andy' value='3245000000' />
</chart></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">{<br /> "chart":{<br /> "numberscalevalue":"1000,1000,1000",<br /> "numberscaleunit":"K,M,B",<br /> "numberprefix":"$"<br /> },<br /> "data":[{<br /> "label":"John",<br /> "value":"986000000"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"3134000000"<br /> },<br /> {<br /> "label":"Andy",<br /> "value":"3245000000"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>In case of <strong>dual y-axis charts</strong>, to apply this scaling to the secondary axis, you will need to write the following XML/JSON (note the <span class="codeInline">s</span> prefix before each attribute indicating secondary axis).</p> </td>
</tr>
<tr>
<td valign="top" class="text">
<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"><chart sFormatNumberScale='1' sNumberScaleValue='1000,1000,1000' sNumberScaleUnit='K,M,B' sNumberPrefix='$'>
<set label='John' value='986000000' />
<set label='Mary' value='3134000000' />
<set label='Andy' value='3245000000' />
</chart></pre></div>
<div id="tab10" class="tab_content">
<pre id="pre-datajson5" class="prettyprint code_container">{<br /> "chart":{<br /> "sformatnumberscale":"1",<br /> "snumberscalevalue":"1000,1000,1000",<br /> "snumberscaleunit":"K,M,B",<br /> "snumberprefix":"$"<br /> },<br /> "data":[{<br /> "label":"John",<br /> "value":"986000000"<br /> },<br /> {<br /> "label":"Mary",<br /> "value":"3134000000"<br /> },<br /> {<br /> "label":"Andy",<br /> "value":"3245000000"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Another Example - Putting time in scale </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let's consider another example where we intend to plot time related figures on the chart. Say we're plotting a chart which indicates the time taken by a list of automated processes. Each process in the list can take time ranging from a few seconds to few days. And we've the data for each process in seconds itself. Now, if we were to show all the data on the chart in seconds only, it won't appear too legible. What we can do is build a scale indicating time and then specify it to the chart. This scale, in human terms, will look something as under:</p>
<p>60 seconds = 1 minute<br />
60 minute = 1 hr<br />
24 hrs = 1 day<br />
7 days = 1 week</p>
<p>Now, to convert this scale into FusionCharts XT XML/JSON format, you'll have to do it as under:</p>
<ol>
<li>First you will need to define the unit of the data which you're providing. Like, in this example, you're providing all data in seconds. So, default number scale will be represented in seconds. We can represent it as under:<br />
<br />
<div class="container" style="overflow:hidden;">
<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 defaultNumberScale='s' ...> </pre></div>
<div id="tab12" class="tab_content">
<pre id="pre-datajson6" class="prettyprint code_container">"chart":{<br /> "defaultnumberscale":"s"
...<br /> }</pre>
</div></div></div><br /></li>
<li>Next, we define our own scale for the chart as under:<br /><br />
<div class="container" style="overflow:hidden;" >
<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 numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk' ></pre></div>
<div id="tab14" class="tab_content">
<pre id="pre-datajson7" class="prettyprint code_container">"chart":{<br /> "numberscalevalue":"60,60,24,7",<br /> "numberscaleunit":"min,hr,day,wk"<br /> }</pre>
</div></div></div>
<p> Again, if you carefully see this and match it with our range, you'll find that whatever numeric figures are present on the left hand side of the range is put in <span class="codeInline">numberScaleValue</span> and whatever units are present on the right side of the scale has been put under <span class="codeInline">numberScaleUnit</span> - all separated by commas.</p> </li>
<li>Set the chart formatting flags to on as under:<br /><br />
<div class="container" style="overflow:hidden;">
<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 formatNumber='1' formatNumberScale='1' ...></pre></div>
<div id="tab16" class="tab_content">
<pre id="pre-datajson8" class="prettyprint code_container">"chart":{<br /> "formatnumber":"1",<br /> "formatnumberscale":"1"
...<br /> }</pre>
</div></div></div> </li>
</ol>
<p>The entire data looks as under: </p>
<div class="container">
<ul class="tabs">
<li><a href="#tab17">XML</a></li>
<li><a href="#tab18">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab17" class="tab_content">
<pre class="prettyprint code_container"><chart defaultNumberScale='s' numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk'>
<set label='A' value='38' />
<set label='B' value='150' />
<set label='C' value='11050' />
<set label='D' value='334345' />
<set label='E' value='1334345' />
</chart></pre></div>
<div id="tab18" class="tab_content">
<pre id="pre-datajson9" class="prettyprint code_container">{<br /> "chart":{<br /> "defaultnumberscale":"s",<br /> "numberscalevalue":"60,60,24,7",<br /> "numberscaleunit":"min,hr,day,wk"<br /> },<br /> "data":[{<br /> "label":"A",<br /> "value":"38"<br /> },<br /> {<br /> "label":"B",<br /> "value":"150"<br /> },<br /> {<br /> "label":"C",<br /> "value":"11050"<br /> },<br /> {<br /> "label":"D",<br /> "value":"334345"<br /> },<br /> {<br /> "label":"E",<br /> "value":"1334345"<br /> }<br /> ]<br />}</pre>
</div></div></div></td></tr>
<tr>
<td class="text"><p>When you now view the chart, you'll see that all the data has been automatically scaled to the best value. Like:</p>
<p>38 was converted to 38s<br />
150 was converted to 2.50min<br />
11050 was converted to 3.07hr<br />
334345 was converted to 3.87 day<br />
1334345 was converted to 2.21wk </p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Scale_2.jpg" width="355" height="208" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>In case of <strong>dual y-axis charts</strong>, to apply this scaling to the secondary axis, you will need to write the following XML/JSON (note the <span class="codeInline">s</span> prefix before each attribute indicating secondary axis). </p></td>
</tr>
<tr>
<td valign="top" class="text">
<div class="container">
<ul class="tabs">
<li><a href="#tab19">XML</a></li>
<li><a href="#tab20">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab19" class="tab_content"><pre class="prettyprint code_container"><chart sFormatNumberScale='1' sDefaultNumberScale='s' sNumberScaleValue='60,60,24,7' sNumberScaleUnit='min,hr,day,wk'>
<set label='A' value='38' />
<set label='B' value='150' />
<set label='C' value='11050' />
<set label='D' value='334345' />
<set label='E' value='1334345' />
</chart></pre></div>
<div id="tab20" class="tab_content">
<pre id="pre-datajson10" class="prettyprint code_container">{<br /> "chart":{<br /> "sformatnumberscale":"1",<br /> "sdefaultnumberscale":"s",<br /> "snumberscalevalue":"60,60,24,7",<br /> "snumberscaleunit":"min,hr,day,wk"<br /> },<br /> "data":[{<br /> "label":"A",<br /> "value":"38"<br /> },<br /> {<br /> "label":"B",<br /> "value":"150"<br /> },<br /> {<br /> "label":"C",<br /> "value":"11050"<br /> },<br /> {<br /> "label":"D",<br /> "value":"334345"<br /> },<br /> {<br /> "label":"E",<br /> "value":"1334345"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Storage Size Example </td>
</tr>
<tr>
<td valign="top" class="text"><p>Take another example, where you're plotting a chart indicating memory usage of a network server. The usage can be from few bits to a few gigabytes. Again, you've all your data in bits - so we can render the range as under:</p>
<p>8 bits = 1 Byte<br />
1024 bytes = 1 KB<br />
1024 KB = 1 MB<br />
1024 MB = 1 GB<br />
1024 GB = 1 TB</p>
<p>And the XML/JSON can be written as under:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab21">XML</a></li>
<li><a href="#tab22">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab21" class="tab_content">
<pre class="prettyprint code_container"> <chart defaultNumberScale='bits' numberScaleValue='8,1024,1024,1024,1024' numberScaleUnit='bytes,KB,MB,GB,TB' ></pre></div>
<div id="tab22" class="tab_content">
<pre id="pre-datajson11" class="prettyprint code_container"> "chart":{<br /> "defaultnumberscale":"bits",<br /> "numberscalevalue":"8,1024,1024,1024,1024",<br /> "numberscaleunit":"bytes,KB,MB,GB,TB"<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text"><p>Similarly, for dual y-axis chart, it will be: </p>
<div class="container">
<ul class="tabs">
<li><a href="#tab23">XML</a></li>
<li><a href="#tab24">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab23" class="tab_content">
<pre class="prettyprint code_container"><chart sFormatNumberScale='1' sDefaultNumberScale='bits' sNumberScaleValue='8,1024,1024,1024,1024' sNumberScaleUnit='bytes,KB,MB,GB,TB'></pre></div>
<div id="tab24" class="tab_content">
<pre id="pre-datajson12" class="prettyprint code_container">"chart":{<br /> "sformatnumberscale":"1",<br /> "sdefaultnumberscale":"bits",<br /> "snumberscalevalue":"8,1024,1024,1024,1024",<br /> "snumberscaleunit":"bytes,KB,MB,GB,TB"<br /> }</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header">Length/Distance Example </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let's consider another length/distance example. The standard length/distance range can be rendered as under (with <span class="codeInline">inches</span> being the default unit):</p>
<p>12 inches = 1 feet<br />
3 feet = 1 yard<br />
1760 yards = 1 mile</p>
<p>So, we can write the XML/JSON as under:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab25">XML</a></li>
<li><a href="#tab26">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab25" class="tab_content">
<pre class="prettyprint code_container"><chart defaultNumberScale='inches' numberScaleValue='12,3,1760' numberScaleUnit='feet,yards,miles' ></pre></div>
<div id="tab26" class="tab_content">
<pre id="pre-datajson13" class="prettyprint code_container"> "chart":{<br /> "defaultnumberscale":"inches",<br /> "numberscalevalue":"12,3,1760",<br /> "numberscaleunit":"feet,yards,miles"<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text"><p>Similarly, for dual y-axis chart, it will be: </p>
<div class="container">
<ul class="tabs">
<li><a href="#tab27">XML</a></li>
<li><a href="#tab28">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab27" class="tab_content">
<pre class="prettyprint code_container"><chart sFormatNumberScale='1' sDefaultNumberScale='inches' sNumberScaleValue='12,3,1760' sNumberScaleUnit='feet,yards,miles' ></pre></div>
<div id="tab28" class="tab_content">
<pre id="pre-datajson14" class="prettyprint code_container">"chart":{<br /> "sformatnumberscale":"1",<br /> "sdefaultnumberscale":"inches",<br /> "snumberscalevalue":"12,3,1760",<br /> "snumberscaleunit":"feet,yards,miles"<br /> }</pre>
</div></div></div></td>
</tr>
<tr>
<td class="text"> </td></tr>
<tr>
<td class="header"><a name="recnumscaling"></a>Recursive Number Scaling</td></tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT-Service Release 3 introduces the <strong>Recursive Number Scaling</strong> feature. Recursive number scaling comes into the picture when you have number scales defined for your chart. It helps you display the chart data better by breaking-up the predefined number scale into smaller sections. For example, in a chart where time is being plotted, you can display 3.87 days as 3 days, 20 hours, 52 minutes and 25 seconds. </p>
<p>Let us jump to an example straightaway to understand this better. </p>
<p>Let us build a chart which indicates the time taken by a list of automated processes. Each process in the list can take time ranging from a few seconds to few days. And we have the data for each process in seconds itself. Now, if we were to show all the data on the chart in seconds only, it will not appear too legible. What we can do is build a scale indicating time and then specify it to the chart. This scale will look something as under:</p>
<p>60 seconds = 1 minute<br />
60 minute = 1 hr<br />
24 hrs = 1 day<br />
7 days = 1 week</p>
<p>We can define the same in our chart using:</p>
<p><span class="codeInline"><chart defaultNumberScale='s' numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk' ... ></span> </p>
<p>Please see the <a href="Number_Scaling.html">Number Scaling</a> page for more details on how to build a number scale. Now let us consider the data below: </p>
</td>
</tr>
<tr>
<td>
<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="code_container prettyprint"><chart defaultNumberScale='s' numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk'>
<set label='A' value='38' />
<set label='B' value='150' />
<set label='C' value='81050' />
<set label='D' value='334345' />
<set label='E' value='534345' />
</chart></pre>
</div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{
"chart": {
"defaultnumberscale": "s",
"numberscalevalue": "60,60,24,7",
"numberscaleunit": "min,hr,day,wk"
},
"data": [
{
"label": "A",
"value": "38"
},
{
"label": "B",
"value": "150"
},
{
"label": "C",
"value": "81050"
},
{
"label": "D",
"value": "334345"
},
{
"label": "E",
"value": "534345"
}
]
}</pre></div></div></div>
<div style="clear:both"></div>
</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">The above XML/JSON when used for a Column chart will give us this: </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/RecNumScale.jpg" width="444" height="313" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">You can see above how owing to the number scale we defined, the values in seconds are getting converted into hours, mins etc. according to the magnitude of the value entered. Neat work, but will you not rather prefer this? </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/RecNumScale2.jpg" width="585" height="306" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>Notice how 22.51 hours is converted to 22 hrs, 30 mins and 50 s; 3.87 days to 3 days, 20 hrs, 52 mins and 25 s. This chart makes use of recursive number scaling and after converting the time in seconds to say hours, whatever is left over is not converted into decimals and shown. It is rather converted into smaller units of time and broken down as far as possible - so the remaining seconds are first converted to minutes and then when the seconds are too few to be converted into minutes, they are displayed in seconds itself. This gives us a fair idea of how much time was used for each task. </p>
<p>To use recursive number scaling, all you have to do is set <span class="codeInline"><chart ... scaleRecursively='1' .. >. </span></p>
<p>The entire XML/JSON for the chart above is: </p>
</td>
</tr>
<tr>
<td>
<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="code_container prettyprint"><chart defaultNumberScale='s' numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk' <strong>scaleRecursively='1'</strong>><br /> <set label='A' value='38' /><br /> <set label='B' value='150' /><br /> <set label='C' value='81050' /><br /> <set label='D' value='334345' /><br /> <set label='E' value='534345' /><br /></chart></pre>
</div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{
"chart": {
"defaultnumberscale": "s",
"numberscalevalue": "60,60,24,7",
"numberscaleunit": "min,hr,day,wk",
<strong> "scalerecursively": "1"</strong>
},
"data": [
{
"label": "A",
"value": "38"
},
{
"label": "B",
"value": "150"
},
{
"label": "C",
"value": "81050"
},
{
"label": "D",
"value": "334345"
},
{
"label": "E",
"value": "534345"
}
]
}</pre>
</div></div></div>
<div style="clear:both"></div>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p><a name="recursionlevels" id="recursionlevels"></a>You can also control the levels of recursion. Suppose in the above chart, instead of 3 days, 20 hrs, 52 mins and 25 s, you are pretty happy with showing 3 day, 20 hrs itself either for space constraints or some other good reason. You can control the levels of recursion for all the numbers on your chart using the <span class="codeInline">maxScaleRecursion</span> attribute. Suppose you want only two levels of recursion, then set <span class="codeInline"><chart ... maxScaleRecursion='2'></span>. This will convert the above chart to:</p>
<p><img src="Images/RecNumScale3.jpg" width="441" height="306" class="imageBorder" /></p>
<p>Notice how all the numbers on the chart are using a maximum of two time units - the rest have been truncated. When you want all the units of a number to be shown on the chart, you can either omit the <span class="codeInline">maxScaleRecursion</span> attribute or set it to <span class="codeInline">-1</span>. </p>
<p>By default, all the units of a number are separated by a space. You can customize the separator using the <span class="codeInline">scaleSeparator</span> attribute. For example, setting <span class="codeInline"> scaleSeparator=', ' </span>will separate each unit with a comma as shown below: </p>
<p><img src="Images/RecNumScale4.jpg" width="441" height="306" class="imageBorder" /></p>
<p class="highlightBlock">Note: <br>
For Scatter and Bubble charts, <span class="codeInline">xScaleRecursively</span>, <span class="codeInline">xMaxScaleRecursion</span> and <span class="codeInline">xScaleSeparator</span> attributes are used to scale the numbers recursively on the X-Axis. These attributes will work only when the <span class="codeInline">xAxisLabelMode</span> attribute is set to <span class="codeInline">AUTO</span> or <span class="codeInline">MIXED</span>.<br/>
To scale the numbers recursively on the Secondary Y-Axis in a Dual Y-Axis chart, the attributes <span class="codeInline">sScaleRecursively</span>, <span class="codeInline">sMaxScaleRecursion</span> and <span class="codeInline">sScaleSeparator</span> are used.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Number Formatting basics|Number_Basics.html", "Custom About Menu Item|CustomAboutMenu.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>