Number Format
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:
{
"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 |
|---|---|
|
Number of decimal places to which all numbers on the chart will be rounded off to. Valid range is from |
|
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 |
|
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 |
Configuring decimal places (rounding off with trailing zeroes)
A column 2D chart with trailing zeroes will look as below:
{
"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 |
|---|---|
|
Set this to |
|
Set this to |
|
Set this to |
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:
{
"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 |
|---|---|
|
Set this to |
|
Set this to |
|
Set this to |
|
Decides whether to add |
|
Decides whether to add |
|
Decides whether to add |
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:
{
"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 |
|---|---|
|
Specifies the character to be used as the decimal separator in a number. |
|
Specifies the character to be used as the thousand separator in a number. |
|
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. |
|
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:
{
"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 |
|---|---|
|
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 |
Adding number prefix and suffix
A column 2D chart with customized number prefix(set to $) and suffix(set to /day )looks as below:
{
"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 |
|---|---|
|
Specifies the prefix for all the numbers on the chart. |
|
Specifies the prefix for all y-axis values on the chart. |
|
Specifies the prefix for all x-axis values on the chart. |
|
Specifies the suffix for all the numbers on the chart. |
|
Specifies the suffix for all y-axis values on the chart. |
|
Specifies the suffix for all x-axis values on the chart. |
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:
{
"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 |
|
Decides whether to add |
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:
{
"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 |
|
This defines the conversion ratio from one unit to the next unit. This attribute along with the |
|
This defines the units of conversion from a lower unit to a higher unit. This has to be used along with the |
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:
{
"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:
{
"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:
{
"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 |
|
Set this to |
|
Defines the number of steps of recursion allowed using an integer value. Set it to |
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.