Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT allows you to plot two types of logarithmic charts - log column charts and log line charts.

In this section, you will be shown how you can:

Creating the 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.

The log column chart thus rendered looks like this:

FusionCharts will load here..
{ "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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<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>

Creating the Log Line 2D Chart

As an example, we will create a log line 2D chart that compares the store footfalls with the online visits for one year.

The log line chart thus rendered looks like this:

FusionCharts will load here..
{ "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"
                },
                {
                    "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"
                }
            ]
        }
    ]
}
<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>
Top