Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT offers multiple options to format numbers on the chart. You can configure number prefixes & suffixes, decimal places, and scale numbers based on a pre-defined scale.

This section talks about:

Number formatting basics

Configuring decimal places (rounding off)

A column 2D chart with values rounded off to two decimal places looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "For Las Topanas", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "yAxisMaxValue": "20000", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#000000", "numberPrefix": "$", "decimals": "2", "theme": "fint" }, "data": [ { "label": "Quarter 1", "value": "12534" }, { "label": "Quarter 2", "value": "14057" }, { "label": "Quarter 3", "value": "17375" }, { "label": "Quarter 4", "value": "18235" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "For Las Topanas",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "yAxisMaxValue": "20000",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#000000",
        "numberPrefix": "$",
        "decimals": "2",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Quarter 1",
            "value": "12534"
        },
        {
            "label": "Quarter 2",
            "value": "14057"
        },
        {
            "label": "Quarter 3",
            "value": "17375"
        },
        {
            "label": "Quarter 4",
            "value": "18235"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "For Las Topanas",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "yAxisMaxValue": "20000",
            //Deviation from theme
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#000000",
            "numberPrefix": "$",
            //Rouending to 2 decimal places
            "decimals": "2",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Quarter 1",
            "value": "12534"
        }, {
            "label": "Quarter 2",
            "value": "14057"
        }, {
            "label": "Quarter 3",
            "value": "17375"
        }, {
            "label": "Quarter 4",
            "value": "18235"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to configure decimal places:

Attribute Name Description

decimals

Number of decimal places to which all numbers on the chart will be rounded off to. Valid range is from 0 to 10.

yAxisValueDecimals

If you’ve disabled automatic adjustment of div lines, you can specify the div line values decimal precision using this attribute. Valid range is from 0 to 10.

xAxisValueDecimals

If you’ve opted not to adjust vertical div lines, you can specify the decimal precision of the div line values using this attribute. Valid range is from 0 to 10.

Configuring decimal places (rounding off with trailing zeroes)

A column 2D chart with trailing zeroes will look as below:

FusionCharts will load here..
{ "chart": { "caption": "Weekly Sales (In '000 USD)", "subcaption": "Last 7 weeks", "numberPrefix": "$", "xaxisname": "Week #", "yaxisname": "Sales (in '000 USD)", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#000000", "decimals": "2", "forceDecimals": "1", "theme": "fint" }, "data": [ { "label": "Week 1", "value": "8" }, { "label": "Week 2", "value": "7.22" }, { "label": "Week 3", "value": "6.23" }, { "label": "Week 4", "value": "8" }, { "label": "Week 5", "value": "6.25" }, { "label": "Week 6", "value": "7.5" }, { "label": "Week 7", "value": "7.37" } ] }
{
    "chart": {
        "caption": "Weekly Sales (In '000 USD)",
        "subcaption": "Last 7 weeks",
        "numberPrefix": "$",
        "xaxisname": "Week #",
        "yaxisname": "Sales (in '000 USD)",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#000000",
        "decimals": "2",
        "forceDecimals": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Week 1",
            "value": "8"
        },
        {
            "label": "Week 2",
            "value": "7.22"
        },
        {
            "label": "Week 3",
            "value": "6.23"
        },
        {
            "label": "Week 4",
            "value": "8"
        },
        {
            "label": "Week 5",
            "value": "6.25"
        },
        {
            "label": "Week 6",
            "value": "7.5"
        },
        {
            "label": "Week 7",
            "value": "7.37"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Weekly Sales (In '000 USD)",
            "subcaption": "Last 7 weeks",
            "numberPrefix": "$",
            "xaxisname": "Week #",
            "yaxisname": "Sales (in '000 USD)",
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#000000",
            //Configuring Decimal Places
            "decimals": "2",
            //Allow to add trailing zeros in decimal part
            "forceDecimals": "1",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Week 1",
            "value": "8"
        }, {
            "label": "Week 2",
            "value": "7.22"
        }, {
            "label": "Week 3",
            "value": "6.23"
        }, {
            "label": "Week 4",
            "value": "8"
        }, {
            "label": "Week 5",
            "value": "6.25"
        }, {
            "label": "Week 6",
            "value": "7.5"
        }, {
            "label": "Week 7",
            "value": "7.37"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attribute needed to force trailing zeroes:

Attribute Name Description

forceDecimals

Set this to 1, to add/retain trailing zeroes so that all figures on the chart have the same number of digits after the decimal point. And 0, to keep the numbers as is.

forceYAxisValueDecimals

Set this to 1, to add/retain trailing zeroes so that y-axis values have the same number of digits after the decimal point. And 0, to keep the numbers as is.

forceXAxisValueDecimals

Set this to 1, to add/retain trailing zeroes so that x-axis values have the same number of digits after the decimal point. And 0, to keep the numbers as is.

Automatic number formatting

FusionCharts Suite XT automatically formats your numbers by adding K, M (Kilo, Million) and proper commas to the numbers. A column 2D chart with automatic number formatting will look as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberPrefix": "$", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#000000", "valueBgColor": "#FFFFFF", "valueBgAlpha": "50" }, "data": [ { "label": "Q1", "value": "12523" }, { "label": "Q2", "value": "14570.230" }, { "label": "Q3", "value": "17375" }, { "label": "Q4", "value": "18235.79" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberPrefix": "$",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#000000",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "50"
    },
    "data": [
        {
            "label": "Q1",
            "value": "12523"
        },
        {
            "label": "Q2",
            "value": "14570.230"
        },
        {
            "label": "Q3",
            "value": "17375"
        },
        {
            "label": "Q4",
            "value": "18235.79"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberPrefix": "$",
            //Deviation from theme
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#000000",
            "valueBgColor": "#FFFFFF",
            "valueBgAlpha": "50"
        },
        "data": [{
            "label": "Q1",
            "value": "12523"
        }, {
            "label": "Q2",
            //Decimal values as below are automatically formatted for output
            "value": "14570.230"
        }, {
            "label": "Q3",
            "value": "17375"
        }, {
            "label": "Q4",
            "value": "18235.79"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above example, the data for chart is 12523, 14570.230, 17375 and 18235.79. FusionCharts Suite XT automatically formats the number scaling to convert to K (Thousands) & M (Millions).

Given below are the attributes needed for removing automatic number formatting :

Attribute Name Description

formatNumber

Set this to 0 , to remove the commas in all the numbers on the chart. Or 1(default) to add commas.
The value of this attribute works only if yFormatNumber and xFormatNumber attributes are not specifically mentioned.

yFormatNumber

Set this to 0 , to remove the commas in the numbers displayed on the y-axis. Or 1(default) to add commas.
If this attribute is not specifically mentioned, the chart inherits the default value from formatNumber attribute.

xFormatNumber

Set this to 0 , to remove the commas in the numbers displayed on the x-axis. Or 1(default) to add commas.
If this attribute is not specifically mentioned, the chart inherits the default value from formatNumber attribute.

formatNumberScale

Decides whether to add K (thousands) and M (millions) to a number after truncating and rounding it. Set this to 0, to disallow automatic formatting or 1 to allow it.
The value of this attribute works only if yFormatNumberScale and xFormatNumberScale attributes are not specifically mentioned.

yFormatNumberScale

Decides whether to add K (thousands) and M (millions) to y-axis values after truncating and rounding them. Set this to 0, to disallow automatic formatting or 1 to allow it.
If this attribute is not specifically mentioned, the chart inherits the default value from formatNumberScale attribute.

xFormatNumberScale

Decides whether to add K (thousands) and M (millions) to x-axis values after truncating and rounding them. Set this to 0, to disallow automatic formatting or 1 to allow it.
If this attribute is not specifically mentioned, the chart inherits the default value from formatNumberScale attribute.

Setting custom thousand and decimal separator character

By default, a ‘.’ (dot) is used as decimal separator and a ‘,’ (comma) is used as thousand separator character. A column 2D chart with the thousand and decimal separator characters swapped will look as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberPrefix": "$", "rotateValues": "0", "placeValuesInside": "0", "valueFontColor": "#000000", "valueBgColor": "#FFFFFF", "valueBgAlpha": "50", "formatNumberScale": "0", "decimalSeparator": ",", "thousandSeparator": "." }, "data": [ { "label": "Q1", "value": "12523.22" }, { "label": "Q2", "value": "14570.230" }, { "label": "Q3", "value": "16375.35" }, { "label": "Q4", "value": "18235.79" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberPrefix": "$",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "valueFontColor": "#000000",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "50",
        "formatNumberScale": "0",
        "decimalSeparator": ",",
        "thousandSeparator": "."
    },
    "data": [
        {
            "label": "Q1",
            "value": "12523.22"
        },
        {
            "label": "Q2",
            "value": "14570.230"
        },
        {
            "label": "Q3",
            "value": "16375.35"
        },
        {
            "label": "Q4",
            "value": "18235.79"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberPrefix": "$",
            "rotateValues": "0",
            "placeValuesInside": "0",
            "valueFontColor": "#000000",
            "valueBgColor": "#FFFFFF",
            "valueBgAlpha": "50",
            //Disabling number scale compression
            "formatNumberScale": "0",
            //Defining custom decimal separator
            "decimalSeparator": ",",
            //Defining custom thousand separator
            "thousandSeparator": "."
        },
        "data": [{
            "label": "Q1",
            "value": "12523.22"
        }, {
            "label": "Q2",
            "value": "14570.230"
        }, {
            "label": "Q3",
            "value": "16375.35"
        }, {
            "label": "Q4",
            "value": "18235.79"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to customize the thousand and decimal separator characters:

Attribute Name Description

decimalSeparator

Specifies the character to be used as the decimal separator in a number.

thousandSeparator

Specifies the character to be used as the thousand separator in a number.

inDecimalSeparator

In some countries, commas are used as decimal separators and dots as thousand separators. In data, if you specify such values, it will give an error while converting to number. So, FusionCharts XT accepts the input decimal and thousand separator for just display purposes, and converts it into the required format. This attribute lets you input the decimal separator.

inThousandSeparator

In some countries, commas are used as decimal separators and dots as thousand separators. In data, 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.

Configuring thousand separator position

By default, a thousand separator character is placed in numbers greater than 999 after every third digit from the right. A column 2D chart with the thousand separator configured for multiple values will look as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue (in INR)", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In INR)", "numberPrefix": "INR ", "formatNumberScale": "0", "rotateValues": "0", "placeValuesInside": "0", "valueFontColor": "#000000", "valueBgColor": "#FFFFFF", "valueBgAlpha": "50", "thousandSeparatorPosition": "2,3" }, "data": [ { "label": "Q1", "value": "1252322" }, { "label": "Q2", "value": "2570230" }, { "label": "Q3", "value": "2037535" }, { "label": "Q4", "value": "1823579" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue (in INR)",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In INR)",
        "numberPrefix": "INR ",
        "formatNumberScale": "0",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "valueFontColor": "#000000",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "50",
        "thousandSeparatorPosition": "2,3"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1252322"
        },
        {
            "label": "Q2",
            "value": "2570230"
        },
        {
            "label": "Q3",
            "value": "2037535"
        },
        {
            "label": "Q4",
            "value": "1823579"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue (in INR)",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In INR)",
            "numberPrefix": "INR ",
            "formatNumberScale": "0",
            "rotateValues": "0",
            "placeValuesInside": "0",
            "valueFontColor": "#000000",
            "valueBgColor": "#FFFFFF",
            "valueBgAlpha": "50",
            //Customizing thousand separator position
            //(first block of 3 digits from right, and then in blocks of 2)
            "thousandSeparatorPosition": "2,3"
        },
        "data": [{
            "label": "Q1",
            "value": "1252322"
        }, {
            "label": "Q2",
            "value": "2570230"
        }, {
            "label": "Q3",
            "value": "2037535"
        }, {
            "label": "Q4",
            "value": "1823579"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to configure the thousand position value:

Attribute Name Description

thousandSeparatorPosition

It specifies the number of digits after which the separator character should be placed. This attribute can take multiple values. In this case, the first thousand separator is placed after the number of digits specified by the second value. Thereafter, the separators are placed after the number of digits specified by the first value. 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.

Adding number prefix and suffix

A column 2D chart with customized number prefix(set to $) and suffix(set to /day )looks as below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "AMC payable", "subcaption": "For cooling units", "xaxisname": "Unit", "yaxisname": "Amount payable (In USD)", "rotateValues": "0", "placeValuesInside": "0", "valueFontColor": "#000000", "valueBgColor": "#FFFFFF", "valueBgAlpha": "50", "numberSuffix": "/day", "numberPrefix": "$" }, "data": [ { "label": "CU-2441", "value": "12.52" }, { "label": "CU-3433", "value": "14.57" }, { "label": "CU-434", "value": "17.37" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "AMC payable",
        "subcaption": "For cooling units",
        "xaxisname": "Unit",
        "yaxisname": "Amount payable (In USD)",
        "rotateValues": "0",
        "placeValuesInside": "0",
        "valueFontColor": "#000000",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "50",
        "numberSuffix": "/day",
        "numberPrefix": "$"
    },
    "data": [
        {
            "label": "CU-2441",
            "value": "12.52"
        },
        {
            "label": "CU-3433",
            "value": "14.57"
        },
        {
            "label": "CU-434",
            "value": "17.37"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "AMC payable",
            "subcaption": "For cooling units",
            "xaxisname": "Unit",
            "yaxisname": "Amount payable (In USD)",
            "rotateValues": "0",
            "placeValuesInside": "0",
            "valueFontColor": "#000000",
            "valueBgColor": "#FFFFFF",
            "valueBgAlpha": "50",
            //Adding a suffix to a number
            "numberSuffix": "/day",
            //Adding a prefix to a number
            "numberPrefix": "$"
        },
        "data": [{
            "label": "CU-2441",
            "value": "12.52"
        }, {
            "label": "CU-3433",
            "value": "14.57"
        }, {
            "label": "CU-434",
            "value": "17.37"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to customize the number prefix and suffix:

Attribute Name Description

numberPrefix

Specifies the prefix for all the numbers on the chart.
The value of this attribute works only if yNumberPrefix and xNumberPrefix attributes are not specifically mentioned.

yNumberPrefix

Specifies the prefix for all y-axis values on the chart.
If this attribute is not specifically mentioned, the chart inherits the default value from numberPrefix attribute.

xNumberPrefix

Specifies the prefix for all x-axis values on the chart.
If this attribute is not specifically mentioned, the chart inherits the default value from numberPrefix attribute.

numberSuffix

Specifies the suffix for all the numbers on the chart.
The value of this attribute works only if yNumberSuffix and xNumberSuffix attributes are not specifically mentioned.

yNumberSuffix

Specifies the suffix for all y-axis values on the chart.
If this attribute is not specifically mentioned, the chart inherits the default value from numberSuffix attribute.

xNumberSuffix

Specifies the suffix for all x-axis values on the chart.
If this attribute is not specifically mentioned, the chart inherits the default value from numberSuffix attribute.

For dual y-axis charts, the primary axis performs number formatting and scaling by default. However, formatting and scaling have to be explicitly defined for the secondary axis. To define the formatting and scaling properties for the secondary axis, prefix ‘s’ to the attribute name. So, numberPrefix becomes sNumberPrefix, forceYAxisValueDecimals becomes forceSYAxisValueDecimals, and so on.

Number Scaling

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.

Basic example

Let’s start with the most basic example which is already defined in FusionCharts Suite XT- thousands (K) and millions (M) scale.

If you plot a chart with data as 1252322, 857023, 903753 and 1082357, the rendered chart looks as shown in the image below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "yAxisMaxValue": "1500000", "numberPrefix": "$", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#000000", "formatNumberScale": "1", "theme": "fint" }, "data": [ { "label": "Q1", "value": "1252322" }, { "label": "Q2", "value": "857023" }, { "label": "Q3", "value": "903753" }, { "label": "Q4", "value": "1082357" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "yAxisMaxValue": "1500000",
        "numberPrefix": "$",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#000000",
        "formatNumberScale": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1252322"
        },
        {
            "label": "Q2",
            "value": "857023"
        },
        {
            "label": "Q3",
            "value": "903753"
        },
        {
            "label": "Q4",
            "value": "1082357"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "yAxisMaxValue": "1500000",
            "numberPrefix": "$",
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#000000",
            //Format numbar scale
            "formatNumberScale": "1",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "Q1",
            "value": "1252322"
        }, {
            "label": "Q2",
            "value": "857023"
        }, {
            "label": "Q3",
            "value": "903753"
        }, {
            "label": "Q4",
            "value": "1082357"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Notice that FusionCharts Suite XT has scaled the numbers down to K. By default, FusionCharts Suite XT has the K, M (1000, 1000) scaling defined for each chart. Given below is the attribute used to allow automatic scaling:

Attribute

Description

formatNumberScale

Decides whether to add K (thousands) and M (millions) to a number after truncating and rounding it. Set this to 0, to disallow automatic formatting or 1 to allow it.
The value of this attribute works only if yFormatNumberScale and xFormatNumberScale attributes are not specifically mentioned.

The following sub-sections will demonstrate how you can define the scaling to suit your requirements:

Adding billions to default scaling

FusionCharts Suite XT does not have the scaling for billions defined. You will have to explicitly modify the number scaling to add billion.

This scale, in human terms, will look something as under:

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

If you now plot a chart containing data in billions, the rendered chart looks as shown in the image below:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Quarterly Revenue of the largest retailer", "subcaption": "In the region", "xaxisname": "Quarter", "yaxisname": "Amount (In USD)", "numberPrefix": "$", "formatNumberScale": "1", "placeValuesInside": "0", "rotateValues": "0", "valueFontColor": "#000000", "valueBgColor": "#FFFFFF", "valueBgAlpha": "50", "numberScaleValue": "1000,1000,1000", "numberScaleUnit": "K,M,B" }, "data": [ { "label": "Q1", "value": "1252322000" }, { "label": "Q2", "value": "857023000" }, { "label": "Q3", "value": "903753500" }, { "label": "Q4", "value": "982357900" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Quarterly Revenue of the largest retailer",
        "subcaption": "In the region",
        "xaxisname": "Quarter",
        "yaxisname": "Amount (In USD)",
        "numberPrefix": "$",
        "formatNumberScale": "1",
        "placeValuesInside": "0",
        "rotateValues": "0",
        "valueFontColor": "#000000",
        "valueBgColor": "#FFFFFF",
        "valueBgAlpha": "50",
        "numberScaleValue": "1000,1000,1000",
        "numberScaleUnit": "K,M,B"
    },
    "data": [
        {
            "label": "Q1",
            "value": "1252322000"
        },
        {
            "label": "Q2",
            "value": "857023000"
        },
        {
            "label": "Q3",
            "value": "903753500"
        },
        {
            "label": "Q4",
            "value": "982357900"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Quarterly Revenue of the largest retailer",
            "subcaption": "In the region",
            "xaxisname": "Quarter",
            "yaxisname": "Amount (In USD)",
            "numberPrefix": "$",
            "formatNumberScale": "1",
            "placeValuesInside": "0",
            "rotateValues": "0",
            "valueFontColor": "#000000",
            "valueBgColor": "#FFFFFF",
            "valueBgAlpha": "50",
            //Adding billion to default number scale
            "numberScaleValue": "1000,1000,1000",
            //Customizing number scale units
            "numberScaleUnit": "K,M,B"
        },
        "data": [{
            "label": "Q1",
            "value": "1252322000"
        }, {
            "label": "Q2",
            "value": "857023000"
        }, {
            "label": "Q3",
            "value": "903753500"
        }, {
            "label": "Q4",
            "value": "982357900"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below are the attributes used to add a billion scale:

Attribute

Description

numberScaleValue

This defines the conversion ratio from one unit to the next unit. This attribute along with the numberScaleUnit attribute defines the scale used for display. This is a comma separated list of numbers, e.g. “60, 60, 24, 7” for a minutes to hour to days conversion.

numberScaleUnit

This defines the units of conversion from a lower unit to a higher unit. This has to be used along with the numberScaleValue attribute. Specified as a comma separated list, e.g. “Min, Hr, Day, Wk”.

Putting time in scale

Suppose 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. Now, if we were to show all the data on the chart in seconds, it will become illegible.

What we can instead do is build a scale indicating time and then specify it to the chart. This scale, in human terms, will look something as under. A chart with the time scaled to minutes, hours or days looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Harry's SuperMart", "subCaption": "Cart Checkout to Payment Time", "xAxisName": "Time", "yAxisName": "Duration", "yAxisMaxValue": "90", "labelDisplay": "rotate", "slantlabels": "1", "formatNumberScale": "1", "numberScaleValue": "60", "numberScaleUnit": " minutes", "defaultNumberScale": " seconds", "theme": "fint" }, "data": [ { "label": "00:00", "value": "35" }, { "label": "02:00", "value": "45" }, { "label": "04:00", "value": "65" }, { "label": "06:00", "value": "49" }, { "label": "08:00", "value": "24" }, { "label": "10:00", "value": "40" }, { "label": "12:00", "value": "67" }, { "label": "14:00", "value": "72" }, { "label": "16:00", "value": "55" }, { "label": "18:00", "value": "62" }, { "label": "20:00", "value": "48" }, { "label": "22:00", "value": "32" }, { "label": "23:59", "value": "30" } ] }
{
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Cart Checkout to Payment Time",
        "xAxisName": "Time",
        "yAxisName": "Duration",
        "yAxisMaxValue": "90",
        "labelDisplay": "rotate",
        "slantlabels": "1",
        "formatNumberScale": "1",
        "numberScaleValue": "60",
        "numberScaleUnit": " minutes",
        "defaultNumberScale": " seconds",
        "theme": "fint"
    },
    "data": [
        {
            "label": "00:00",
            "value": "35"
        },
        {
            "label": "02:00",
            "value": "45"
        },
        {
            "label": "04:00",
            "value": "65"
        },
        {
            "label": "06:00",
            "value": "49"
        },
        {
            "label": "08:00",
            "value": "24"
        },
        {
            "label": "10:00",
            "value": "40"
        },
        {
            "label": "12:00",
            "value": "67"
        },
        {
            "label": "14:00",
            "value": "72"
        },
        {
            "label": "16:00",
            "value": "55"
        },
        {
            "label": "18:00",
            "value": "62"
        },
        {
            "label": "20:00",
            "value": "48"
        },
        {
            "label": "22:00",
            "value": "32"
        },
        {
            "label": "23:59",
            "value": "30"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Harry's SuperMart",
            "subCaption": "Cart Checkout to Payment Time",
            "xAxisName": "Time",
            "yAxisName": "Duration",
            "yAxisMaxValue": "90",
            "labelDisplay": "rotate",
            "slantlabels": "1",

            //Attributes to configure scale                    
            "formatNumberScale": "1",
            //Set scale to 60 (60 seconds: 1 minute)
            "numberScaleValue": "60",
            //Set the scale unit to minutes
            "numberScaleUnit": " minutes",
            //Since all data is provided in seconds, default scale is seconds
            "defaultNumberScale": " seconds",
            //Theme
            "theme": "fint"
        },
        "data": [{
            "label": "00:00",
            "value": "35"
        }, {
            "label": "02:00",
            "value": "45"
        }, {
            "label": "04:00",
            "value": "65"
        }, {
            "label": "06:00",
            "value": "49"
        }, {
            "label": "08:00",
            "value": "24"
        }, {
            "label": "10:00",
            "value": "40"
        }, {
            "label": "12:00",
            "value": "67"
        }, {
            "label": "14:00",
            "value": "72"
        }, {
            "label": "16:00",
            "value": "55"
        }, {
            "label": "18:00",
            "value": "62"
        }, {
            "label": "20:00",
            "value": "48"
        }, {
            "label": "22:00",
            "value": "32"
        }, {
            "label": "23:59",
            "value": "30"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Storage size example

Let’s see another example. Suppose you’re plotting a chart indicating free storage volume of a backup server over a span of 24 hours. The free storage volume can be from few bits to a few gigabytes. Again, you have all your data in bits - so we can render the range as under:

FusionCharts will load here..
{ "chart": { "caption": "Backup Server - Free Storage Volume", "subcaption": "Last 24 hours", "xaxisname": "Time", "yaxisname": "Free Storage Volume", "yAxisMaxValue": "4096", "rotatevalues": "1", "numdivlines": "4", "formatNumberScale": "1", "numberScaleValue": "1024,1024,1024", "numberScaleUnit": " MB, GB, TB", "defaultNumberScale": " KB", "scaleRecursively": "0", "theme": "fint" }, "data": [ { "label": "08:00", "value": "3572355443" }, { "label": "10:00", "value": "3321445434" }, { "label": "12:00", "value": "3012343453" }, { "label": "14:00", "value": "2645546455" }, { "label": "16:00", "value": "2425445435" }, { "label": "18:00", "value": "1935657565" }, { "label": "20:00", "value": "1545565666" }, { "label": "22:00", "value": "1135654544" }, { "label": "00:00", "value": "1006543455" }, { "label": "02:00", "value": "957343445" }, { "label": "04:00", "value": "886334444" }, { "label": "06:00", "value": "800" }, { "label": "07:59", "value": "695" } ], "trendlines": [ { "line": [ { "startvalue": "2802434345", "color": "#ff0000", "displayvalue": "Critical Limit", "dashed": "1", "valueOnRight": "1" } ] } ] }
{
    "chart": {
        "caption": "Backup Server - Free Storage Volume",
        "subcaption": "Last 24 hours",
        "xaxisname": "Time",
        "yaxisname": "Free Storage Volume",
        "yAxisMaxValue": "4096",
        "rotatevalues": "1",
        "numdivlines": "4",
        "formatNumberScale": "1",
        "numberScaleValue": "1024,1024,1024",
        "numberScaleUnit": " MB, GB, TB",
        "defaultNumberScale": " KB",
        "scaleRecursively": "0",
        "theme": "fint"
    },
    "data": [
        {
            "label": "08:00",
            "value": "3572355443"
        },
        {
            "label": "10:00",
            "value": "3321445434"
        },
        {
            "label": "12:00",
            "value": "3012343453"
        },
        {
            "label": "14:00",
            "value": "2645546455"
        },
        {
            "label": "16:00",
            "value": "2425445435"
        },
        {
            "label": "18:00",
            "value": "1935657565"
        },
        {
            "label": "20:00",
            "value": "1545565666"
        },
        {
            "label": "22:00",
            "value": "1135654544"
        },
        {
            "label": "00:00",
            "value": "1006543455"
        },
        {
            "label": "02:00",
            "value": "957343445"
        },
        {
            "label": "04:00",
            "value": "886334444"
        },
        {
            "label": "06:00",
            "value": "800"
        },
        {
            "label": "07:59",
            "value": "695"
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "2802434345",
                    "color": "#ff0000",
                    "displayvalue": "Critical Limit",
                    "dashed": "1",
                    "valueOnRight": "1"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Backup Server - Free Storage Volume",
            "subcaption": "Last 24 hours",
            "xaxisname": "Time",
            "yaxisname": "Free Storage Volume",
            "yAxisMaxValue": "4096",
            "rotatevalues": "1",
            "numdivlines": "4",
            //Setting scaling parameters
            "formatNumberScale": "1",
            "numberScaleValue": "1024,1024,1024",
            "numberScaleUnit": " MB, GB, TB",
            "defaultNumberScale": " KB",
            "scaleRecursively": "0",
            //Theme 
            "theme": "fint"

        },
        "data": [{
            "label": "08:00",
            "value": "3572355443"
        }, {
            "label": "10:00",
            "value": "3321445434"
        }, {
            "label": "12:00",
            "value": "3012343453"
        }, {
            "label": "14:00",
            "value": "2645546455"
        }, {
            "label": "16:00",
            "value": "2425445435"
        }, {
            "label": "18:00",
            "value": "1935657565"
        }, {
            "label": "20:00",
            "value": "1545565666"
        }, {
            "label": "22:00",
            "value": "1135654544"
        }, {
            "label": "00:00",
            "value": "1006543455"
        }, {
            "label": "02:00",
            "value": "957343445"
        }, {
            "label": "04:00",
            "value": "886334444"
        }, {
            "label": "06:00",
            "value": "800"
        }, {
            "label": "07:59",
            "value": "695"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "2802434345",
                "color": "#ff0000",
                "displayvalue": "Critical Limit",
                "dashed": "1",
                "valueOnRight": "1"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Recursive number scaling

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.

Let us build a chart which indicates the power back up used by a grocery store in a week. The power back up used for each day of the week can vary widely based on store operations. We have the data for each day in seconds. Now, if we were to show all the data on the chart in seconds, it will become illegible. What we can do is build a scale indicating time and then specify it to the chart.

The chart with recursive number scaling looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Power Backup Used", "subcaption": "Last Week At Bakersfield Central", "xaxisname": "Time", "yaxisname": "Duration", "yAxisMaxValue": "100", "showValues": "1", "formatNumberScale": "1", "numberScaleValue": "60,60", "numberScaleUnit": " Min, Hrs", "defaultNumberScale": " Seconds", "scaleRecursively": "1", "maxScaleRecursion": "-1", "scaleSeparator": " ", "theme": "fint" }, "data": [ { "label": "Sunday", "value": "7242" }, { "label": "Monday", "value": "5343" }, { "label": "Tuesday", "value": "4543" }, { "label": "Wednesday", "value": "6743" }, { "label": "Thrusday", "value": "5543" }, { "label": "Friday", "value": "8334" }, { "label": "Saturday", "value": "1543" } ] }
{
    "chart": {
        "caption": "Power Backup Used",
        "subcaption": "Last Week At Bakersfield Central",
        "xaxisname": "Time",
        "yaxisname": "Duration",
        "yAxisMaxValue": "100",
        "showValues": "1",
        "formatNumberScale": "1",
        "numberScaleValue": "60,60",
        "numberScaleUnit": " Min, Hrs",
        "defaultNumberScale": " Seconds",
        "scaleRecursively": "1",
        "maxScaleRecursion": "-1",
        "scaleSeparator": " ",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Sunday",
            "value": "7242"
        },
        {
            "label": "Monday",
            "value": "5343"
        },
        {
            "label": "Tuesday",
            "value": "4543"
        },
        {
            "label": "Wednesday",
            "value": "6743"
        },
        {
            "label": "Thrusday",
            "value": "5543"
        },
        {
            "label": "Friday",
            "value": "8334"
        },
        {
            "label": "Saturday",
            "value": "1543"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Power Backup Used",
            "subcaption": "Last Week At Bakersfield Central",
            "xaxisname": "Time",
            "yaxisname": "Duration",
            "yAxisMaxValue": "100",
            "showValues": "1",
            "formatNumberScale": "1",
            //60 minutes = 1 hour, 60 seconds = 1 minute
            "numberScaleValue": "60,60",
            //Converts seconds to Minutes, Hours
            "numberScaleUnit": " Min, Hrs",
            //Since all data is provided in seconds
            "defaultNumberScale": " Seconds",
            "scaleRecursively": "1",
            //Recurse for all provided units/values
            "maxScaleRecursion": "-1",
            //Character used to separate scale
            "scaleSeparator": " ",
            //Theme 
            "theme": "fint"
        },
        "data": [{
            "label": "Sunday",
            "value": "7242"
        }, {
            "label": "Monday",
            "value": "5343"
        }, {
            "label": "Tuesday",
            "value": "4543"
        }, {
            "label": "Wednesday",
            "value": "6743"
        }, {
            "label": "Thrusday",
            "value": "5543"
        }, {
            "label": "Friday",
            "value": "8334"
        }, {
            "label": "Saturday",
            "value": "1543"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to enable recursive scaling:

Attribute

Description

scaleRecursively

Set this to 1 to enable recursive scaling such that data values are broken down into lower level units. Set this to 0 (default) to show value at the topmost unit level.

maxScaleRecursion

Defines the number of steps of recursion allowed using an integer value. Set it to -1 to enable recursion to the lowest possible unit level.

For Scatter and Bubble charts, xScaleRecursively, xMaxScaleRecursion, and xScaleSeparator attributes are used to scale the numbers recursively on the x-axis. These attributes will work only when the xAxisLabelMode attribute is set to AUTO or MIXED. To scale the numbers recursively on the secondary y-axis in a Dual Y-Axis chart, the attributes sScaleRecursively, sMaxScaleRecursion, and sScaleSeparator are used.

Top