Loading External Logo

You can load external logos at runtime to be displayed over the chart. The logos can be GIF/JPEG/PNG or SWF files that reside on the same sub-domain as the chart.

This section talks about:

Configuring an external logo
Linking the logo to an external URL

Configuring an external logo

A column 2D chart with an external logo image looks as below:

FusionCharts will load here..

Given below is the list of attributes used to add, position and customize an external logo in a chart:

Attribute	Description
`logoURL`	It is used to specify the URL of the external logo.
`logoAlpha`	It is used to specify the opacity of the external logo with value ranging from `0` (transparent) to `100` (opaque).
`logoScale`	It is used to specify the scale of the externally loaded logo at run-time. The value can be between `0` to `300`
`logoPosition`	It is used to specify the position of the external logo. It can have initials as values which are - `TL`: Top-left, `TR`: Top-right, `BL`: Bottom-left, `BR`: Bottom-right, `CC`: Center

The data structure used, in the chart above, to add an external logo is given below:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Monthly Revenue", "subCaption": "Last year", "xAxisName": "Month", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png", "logoAlpha": "40", "logoScale": "110", "logoPosition": "TR" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ] }

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
        "logoAlpha": "40",
        "logoScale": "110",
        "logoPosition": "TR"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}

Linking logo to external URL

A column 2D chart with an image linked to an external URL will look as below:

FusionCharts will load here..

Given below is the attribute used to link the logo to an external URL:

Attribute	Description
`logoLink`	It is used to specify the link for the logo.

The data structure used, in the chart above, to to add an external logo with a link, is as follows:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Monthly Revenue", "subCaption": "Last year", "xAxisName": "Month", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png", "logoAlpha": "40", "logoScale": "90", "logoPosition": "TR", "logoLink": "N-http://www.fusioncharts.com/" }, "data": [ { "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" } ] }

{
    "chart": {
        "theme": "fint",
        "caption": "Monthly Revenue",
        "subCaption": "Last year",
        "xAxisName": "Month",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
        "logoAlpha": "40",
        "logoScale": "90",
        "logoPosition": "TR",
        "logoLink": "N-http://www.fusioncharts.com/"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}