Loading
Introduction to Logarithmic Chart
Logarithmic charts are similar to normal charts except for the fact that logarithmic charts use a logarithmic axis instead of a linear axis.
In this section, you will be introduced to the:
Basics of Logarithmic Charts
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 of Logarithmic Charts
FusionCharts Suite XT offers two types of logarithmic charts:
-
Log Column 2D Chart
-
Log Line Chart
A simple log column 2D chart looks like this:
{
"chart": {
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"showPlotBorder": "0",
"showAlternateHgridColor": "0",
"showXAxisLine": "1",
"usePlotGradientcolor": "0",
"valueFontColor": "#ffffff",
"placeValuesInside": "1",
"rotateValues": "1",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"base": "10",
"axisLineAlpha": "10",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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 caption="Store footfall vs Online visitors " subcaption="Last Year" captionfontsize="14" subcaptionfontsize="14" subcaptionfontbold="0" basefontcolor="#333333" basefont="Helvetica Neue,Arial" xaxisname="Quarter" yaxisname="No of visitors" palettecolors="#0075c2,#1aaf5d" bgcolor="#ffffff" showborder="0" showcanvasborder="0" showplotborder="0" showalternatehgridcolor="0" showxaxisline="1" useplotgradientcolor="0" valuefontcolor="#ffffff" placevaluesinside="1" rotatevalues="1" legendshadow="0" legendborderalpha="0" base="10" axislinealpha="10" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5" divlinealpha="100" divlinecolor="#999999" divlinethickness="1" divlineisdashed="1" divlinedashlen="1" divlinegaplen="1">
<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="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 vs Online visitors ",
"subCaption": "Last Year",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"xAxisName": "Quarter",
"yAxisName": "No of visitors",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"showPlotBorder": "0",
"showAlternateHgridColor": "0",
"showXAxisLine": "1",
"usePlotGradientcolor": "0",
"valueFontColor": "#ffffff",
"placeValuesInside": "1",
"rotateValues": "1",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"base": "10",
"axisLineAlpha": "10",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
},
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>A simple log line chart looks like this:
{
"chart": {
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "USD",
"paletteColors": "#008ee4,#6baa01,#e44a00",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"showXAxisLine": "1",
"showValues": "0",
"showBorder": "0",
"showAlternateHgridColor": "0",
"base": "10",
"numberprefix": "$",
"axisLineAlpha": "10",
"divLineAlpha": "10",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"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 caption="Store footfall vs Online visitors " subcaption="Last Year" xaxisname="Quarter" yaxisname="USD" palettecolors="#008ee4,#6baa01,#e44a00" bgalpha="0" borderalpha="20" canvasborderalpha="0" legendshadow="0" legendborderalpha="0" showxaxisline="1" showvalues="0" showborder="0" showalternatehgridcolor="0" base="10" numberprefix="$" axislinealpha="10" divlinealpha="10" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
<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="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: 'logmsline',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Store footfall vs Online visitors ",
"subCaption": "Last Year",
"xAxisName": "Quarter",
"yAxisName": "USD",
"paletteColors": "#008ee4,#6baa01,#e44a00",
"bgAlpha": "0",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"showXAxisLine": "1",
"showValues": "0",
"showBorder": "0",
"showAlternateHgridColor": "0",
"base": "10",
"numberprefix": "$",
"axisLineAlpha": "10",
"divLineAlpha": "10",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Features of Logarithmic Charts
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.