Loading
Configuring Logarithmic Charts
FusionCharts Suite XT allows you to configure the functional aspects of logarithmic charts.
In this section, you will be shown how you can:
-
Custom select the base
-
Configure inverse axis support
-
Custom select the y-axis upper and lower limits
-
Custom select the number of minor divisional lines
Custom Selection of Base
By default, the base of a logarithmic chart is set to 10. You can, however, set the base to any value of your requirement. Just ensure that the base value is any positive number greater than 1.
A log column chart with the base set to 5 looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Store footfall - Last quarter",
"subCaption": "Top 5 stores",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"base": "5",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Los Angeles Topanga"
},
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Crompton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}
],
"dataset": [
{
"seriesname": "Total footfalls",
"data": [
{
"value": "1960000"
},
{
"value": "1110000"
},
{
"value": "609000"
},
{
"value": "560000"
},
{
"value": "470000"
}
]
},
{
"seriesname": "No of Transactions",
"data": [
{
"value": "126000"
},
{
"value": "92140"
},
{
"value": "36000"
},
{
"value": "46000"
},
{
"value": "83000"
}
]
}
]
}<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: 'logmscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store footfall - Last quarter",
"subCaption": "Top 5 stores",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
//Log Base
"base": "5",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Los Angeles Topanga"
}, {
"label": "Bakersfield Central"
}, {
"label": "Garden Groove harbour"
}, {
"label": "Crompton-Rancho Dom"
}, {
"label": "Daly City Serramonte"
}]
}],
"dataset": [{
"seriesname": "Total footfalls",
"data": [{
"value": "1960000"
}, {
"value": "1110000"
}, {
"value": "609000"
}, {
"value": "560000"
}, {
"value": "470000"
}]
}, {
"seriesname": "No of Transactions",
"data": [{
"value": "126000"
}, {
"value": "92140"
}, {
"value": "36000"
}, {
"value": "46000"
}, {
"value": "83000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to customize the base value:
| Attribute Name | Description |
|---|---|
|
It is used to specify the base value for the logarithmic chart. This attribute can take any value that is a positive number greater than 1. The default value for this attribute is 10. |
Inverse Axis Support
Logarithmic charts allow you to plot the y-axis values inversely so that the y-axis upper limit appears at the bottom of the chart canvas instead of at the top.
A log column 2D chart rendered with an inverted y-axis looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily Power Failure",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Duration",
"showValues": "0",
"formatNumberScale": "1",
"numberScaleValue": "60,60",
"numberScaleUnit": " Min, Hrs",
"defaultNumberScale": " Seconds",
"scaleRecursively": "1",
"maxScaleRecursion": "-1",
"scaleSeparator": " ",
"invertYAxis": "1",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Monday"
},
{
"label": "Tuesday"
},
{
"label": "Wednesday"
},
{
"label": "Thursday"
},
{
"label": "Friday"
},
{
"label": "Saturday"
},
{
"label": "Sunday"
}
]
}
],
"dataset": [
{
"data": [
{
"value": "3540"
},
{
"value": "2257"
},
{
"value": "3145"
},
{
"value": "6643"
},
{
"value": "4520"
},
{
"value": "30"
},
{
"value": "465"
}
]
}
]
}<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: 'logmscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily Power Failure",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Duration",
"showValues": "0",
"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": " ",
//Inverse Y axis
"invertYAxis": "1",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Monday"
}, {
"label": "Tuesday"
}, {
"label": "Wednesday"
}, {
"label": "Thursday"
}, {
"label": "Friday"
}, {
"label": "Saturday"
}, {
"label": "Sunday"
}]
}],
"dataset": [{
"data": [{
"value": "3540"
}, {
"value": "2257"
}, {
"value": "3145"
}, {
"value": "6643"
}, {
"value": "4520"
}, {
"value": "30"
}, {
"value": "465"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to render an inverted y-axis:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the log chart will be rendered with an inverted y-axis. Setting this attribute to |
Custom Selection of Y-axis Lower and Upper Limits
By default, the chart automatically decides the y-axis limits based on the data you provide. However, you can explicitly set the y-axis limits according to your requirements.
Given below is a brief description of the attributes used to custom select the y-axis limits:
| Attribute Name | Description |
|---|---|
|
It is used to explicitly specify the lower limit for the y-axis. |
|
It is used to explicitly specify the upper limit for the y-axis. |
Custom Selection of the Number of Minor Divisional Lines
By default, the chart automatically calculates the number of minor divisional lines depending on the logarithmic base defined in the chart. You can, however, explicitly specify the number of minor divisional lines.
A log column chart with the number of minor divisional lines explicitly specified looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Store footfall - Last quarter",
"subCaption": "Top 5 stores",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"divlineDashed": "0",
"numMinorDivLines": "4",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Los Angeles Topanga"
},
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Crompton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}
],
"dataset": [
{
"seriesname": "Total footfalls",
"data": [
{
"value": "1960000"
},
{
"value": "1110000"
},
{
"value": "609000"
},
{
"value": "560000"
},
{
"value": "470000"
}
]
},
{
"seriesname": "No of Transactions",
"data": [
{
"value": "126000"
},
{
"value": "92140"
},
{
"value": "36000"
},
{
"value": "46000"
},
{
"value": "83000"
}
]
}
]
}<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: 'logmscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store footfall - Last quarter",
"subCaption": "Top 5 stores",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"divlineDashed": "0",
//Minor divlines
"numMinorDivLines": "4",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Los Angeles Topanga"
}, {
"label": "Bakersfield Central"
}, {
"label": "Garden Groove harbour"
}, {
"label": "Crompton-Rancho Dom"
}, {
"label": "Daly City Serramonte"
}]
}],
"dataset": [{
"seriesname": "Total footfalls",
"data": [{
"value": "1960000"
}, {
"value": "1110000"
}, {
"value": "609000"
}, {
"value": "560000"
}, {
"value": "470000"
}]
}, {
"seriesname": "No of Transactions",
"data": [{
"value": "126000"
}, {
"value": "92140"
}, {
"value": "36000"
}, {
"value": "46000"
}, {
"value": "83000"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to set the number of minor div lines:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of minor divisional lines to be rendered between any two major divisional lines. This attribute can take value that is greater than 0. |