FusionCharts for Flex > Special Cases > Number Formatting > Scaling

 

FusionCharts v3 introduces the concept of number scaling. Number scaling lets you define the scale of plotted values. So, based on the nature of data, you can define an appropriate scale for your chart. And FusionCharts will scale the values accordingly.
Basic Example

FusionCharts applies default scale of K (thousand) and M (Million) to all values. So, depending on their magnitudes values will be scaled to thousand or million. For example, values 12500, 13400, and 13300, would be displayed as 12.5K, 13.4K, and 13.3K respectively.

 
 
Adding billions to default scaling

The default scale is K, M (1000, 1000) scale. You can make it more extensive by adding billions to it. This would transform the scale to K, M, B (1000, 1000, 1000) scale. For human understanding the scale can be defined more explicitly in the following manner.

1000 = 1 K
1000 K = 1 M
1000 M = 1 B

The following steps show how to incorporate the K, M, B scale in a chart:

  1. Define the scale in the following manner:
    <chart numberScaleValue='1000,1000,1000' numberScaleUnit='K,M,B' >

  2. Enable formatting of numbers:
    <chart formatNumber='1' formatNumberScale='1' ..>

A chart plotted using K, M, B scale would look similar to the one shown below.

Following is the XML for the above chart:
 

<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>
 
Another Example - Putting time in scale

Let's consider another example where we configure a scale for plotting time related figures. Say we're plotting a chart, which indicates time taken to accomplish several automated processes. The time duration for accomplishment of processes may range from a few seconds to days. In this case, we will define the following time scale for the chart.

60 seconds = 1 minute
60 minute = 1 hr
24 hrs = 1 day
7 days = 1 week

Here are the steps for incorporating the scale in chart:

  1. Set the default number scale - which, in this case is seconds.
    <chart defaultNumberScale='s' ...>
  2. Define the scale in the following manner:
    <chart numberScaleValue='60,60,24,7' numberScaleUnit='min,hr,day,wk' >
  3. Enable the number formatting attributes as shown below:
    <chart formatNumber='1' formatNumberScale='1' ..>

When you enter the data into XML, it must be provided in terms of the base scale unit or the default scale unit - which (in case of this example) is seconds. Hence, all values must be converted to seconds as shown below:

8 was converted to 38s
150 was converted to 2.50min
11050 was converted to 3.07hr
334345 was converted to 3.87 day
1334345 was converted to 2.21wk

Following is the XML for the time scale chart:


<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>
 
 
Storage Size Example

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. The scale is descibed below:

8 bits = 1 Byte
1024 bytes = 1 KB
1024 KB = 1 MB
1024 MB = 1 GB
1024 GB = 1 TB

And the XML can be written as under:

<chart defaultNumberScale='bits' numberScaleValue='8,1024,1024,1024,1024' numberScaleUnit='bytes,KB,MB,GB,TB' >

For this example the value needs to be provided in terms of bits as this is the base uint.
Length/Distance Example

Let's consider another length/distance example.

12 inches = 1 feet
3 feet = 1 yard
1760 yards = 1 mile

So, we can write the XML as under:
<chart defaultNumberScale='inches' numberScaleValue='12,3,1760' numberScaleUnit='feet,yards,miles' >

For this example, values must be provided in terms of inches as it is the base unit of the scale.