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:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
{
"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:
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
{
"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"
}
]
}