Choose an item

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 two 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 type attribute. To render a logarithmic chart, set logmscolumn2d.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

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:

FusionCharts will load here..
{
    "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:

FusionCharts will load here..
{
    "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:

FusionCharts will load here..

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:

FusionCharts will load here..

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:

FusionCharts will load here..

Click here to edit the log column 2D chart.