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:

  • Create the log line 2D chart

  • Create the log column 2D chart

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

The data structure needed to render the above log column chart is given below:

{ "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"
                }
            ]
        }
    ]
}

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

The data structure needed to render the above log line chart is given below:

{ "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"
                }
            ]
        }
    ]
}

There! You have now seen how you can create the logarithmic column and line charts.

Top