Logarithmic Chart
These chart types belong to PowerCharts XT.
Logarithmic charts are similar to normal charts except for the fact that logarithmic charts use a logarithmic axis instead of a linear axis. Logarithmic charts can have a logarithmic scale of any base greater than 1. These charts are perfect for plotting data that comprises of both small and large values. You can use these charts to plot data like sales comparison, election results, population growth, etc.
Types
FusionCharts Suite XT offers three types of logarithmic charts:
Log Column 2D Chart
Log Line Chart
Features
The FusionCharts Suite XT log charts offer the following features:
You can select any positive base (apart from 1) for your logarithmic scale.
Logarithmic y-scale can be inverted to show charts like ranking charts etc.
Custom selection of y-axis lower and upper limits possible.
Custom selection of minor divisional lines between any two major divisional lines.
Log Column 2D Chart
As an example, we will create a log column 2D chart that compares the store footfalls with the online visits for one year.
To create a log column 2D chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a logarithmic chart, setlogmscolumn2d.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of log column 2D chart.
The log column 2D chart thus rendered looks like this:
{
"chart": {
"theme": "fusion",
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"showXAxisLine": "1",
"axisLineAlpha": "10"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Total footfalls",
"data": [
{
"value": "126734"
},
{
"value": "159851"
},
{
"value": "197393"
},
{
"value": "168560"
},
{
"value": "199428"
}
]
},
{
"seriesname": "Online Visits",
"data": [
{
"value": "1126059"
},
{
"value": "1292145"
},
{
"value": "1496849"
},
{
"value": "1460249"
},
{
"value": "1083962"
}
]
}
]
}<chart theme="fusion" caption="Store footfall vs Online visitors " subcaption="Last Year" xaxisname="Quarter" yaxisname="No of visitors" showxaxisline="1" axislinealpha="10">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Total footfalls">
<set value="126734" />
<set value="159851" />
<set value="197393" />
<set value="168560" />
<set value="199428" />
</dataset>
<dataset seriesname="Online Visits">
<set value="1126059" />
<set value="1292145" />
<set value="1496849" />
<set value="1460249" />
<set value="1083962" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'logmscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"showXAxisLine": "1",
"axisLineAlpha": "10"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Total footfalls",
"data": [{
"value": "126734"
}, {
"value": "159851"
}, {
"value": "197393"
}, {
"value": "168560"
}, {
"value": "199428"
}]
}, {
"seriesname": "Online Visits",
"data": [{
"value": "1126059"
}, {
"value": "1292145"
}, {
"value": "1496849"
}, {
"value": "1460249"
}, {
"value": "1083962"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the log column 2D chart.
Log Line 2D Chart
Now, let's create a log line 2D chart that compares the store footfalls with the online visits for one year. To render a log line 2D chart, change the value of the type attribute from logmscolumn2d to logmsline. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of log line 2D chart.
The log line chart thus rendered looks like this:
{
"chart": {
"theme": "fusion",
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "USD",
"numberprefix": "$",
"axisLineAlpha": "10",
"divLineAlpha": "10"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Total footfalls",
"data": [
{
"value": "126734"
},
{
"value": "159851"
},
{
"value": "197393"
},
{
"value": "168560"
},
{
"value": "199428"
}
]
},
{
"seriesname": "Online Visits",
"data": [
{
"value": "1126059"
},
{
"value": "1292145"
},
{
"value": "1496849"
},
{
"value": "1460249"
},
{
"value": "1083962"
}
]
}
]
}<chart theme="fusion" caption="Store footfall vs Online visitors " subcaption="Last Year" xaxisname="Quarter" yaxisname="USD" numberprefix="$" axislinealpha="10" divlinealpha="10">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Total footfalls">
<set value="126734" />
<set value="159851" />
<set value="197393" />
<set value="168560" />
<set value="199428" />
</dataset>
<dataset seriesname="Online Visits">
<set value="1126059" />
<set value="1292145" />
<set value="1496849" />
<set value="1460249" />
<set value="1083962" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'logmsline',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "USD",
"numberprefix": "$",
"axisLineAlpha": "10",
"divLineAlpha": "10"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Total footfalls",
"data": [{
"value": "126734"
}, {
"value": "159851"
}, {
"value": "197393"
}, {
"value": "168560"
}, {
"value": "199428"
}]
}, {
"seriesname": "Online Visits",
"data": [{
"value": "1126059"
}, {
"value": "1292145"
}, {
"value": "1496849"
}, {
"value": "1460249"
}, {
"value": "1083962"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to add the log line 2D chart.
FusionCharts Suite XT allows you to configure the functional aspects of logarithmic charts. Now, let's customize the appearance and properties of the charts.
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. Set the base attribute to specify the base value for the logarithmic chart.
Refer to the code given below:
{
"chart": {
"base": "5"
}
}A log column chart with the base set to 5 looks like this:
Click here to edit the log column 2D chart.
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. Set the invertYAxis attribute as 1 to specify the inverted y-axis for the chart.
Refer to the code given below:
{
"chart": {
"invertYAxis": "1"
},
}A log column 2D chart rendered with an inverted y-axis looks like this:
Click here to edit the log column 2D chart.
Custom Selection 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 between any two major divisional lines using numMinorDivLines attribute. This attribute takes the value greater than 0.
Refer to the code given below:
{
"chart": {
"numMinorDivLines": "4"
},
}A log column chart with the number of minor divisional lines explicitly specified looks like this:
Click here to edit the log column 2D chart.