Creating Image Annotations
Prerequisites
A column 2D chart rendered using image annotations is shown below:
In this chart, images of brands are shown instead of the conventional 2D column data plots. Using these annotations makes the chart more intuitive while also increasing its visual appeal. Imagine how easy it becomes for your audience to read data in a chart like this, especially if the data is for a large number of brands.
The JSON structure for creating image annotations is given below:
"chart": {
...
},
"annotations": {
"groups": [{
"items": [{
//Image 1
"type": “image”,
//Define the attributes needed to create the image annotation
...
}, {
//Image 2
"type": “image”,
//Define the attributes needed to create the image annotation
...
},
...
{
//Image *n*
"type": “image”,
//Define the attributes needed to create the image annotation
...
}]
}]
}The attributes used to create image annotations are:
| Attribute | Description |
|---|---|
|
Specifies a unique identification string for each annotation item. |
|
Specifies the type of annotation. Set this attribute to |
|
Specifies the location of the image file (JPEG, PNG, or GIF) that should be rendered on the chart. |
|
Specifies the x coordinate of the starting position of the image annotation with respect to the leftmost position (taken as 0) of the chart. |
|
Specifies the y coordinate of the starting position of the image annotation with respect to the topmost position (taken as 0) of the chart. |
|
Specifies the resize value for the image width. |
|
Specifies the resize value for the image height. |
|
Specifies the transparency of the annotation. This attribute takes values between 0 (transparent) and 100 (opaque, default). |
The complete data structure for the column 2D chart with image annotations is given below:
{
"chart": {
"caption": "Sales figures for top 4 chocolate brands - FY2013-2014",
"subCaption": "Harry's SuperMart",
"xAxisName": "Brand",
"yAxisName": "Amount (In USD)",
"yAxisMaxValue": "120000",
"numberPrefix": "$",
"theme": "fint",
"PlotfillAlpha": "0",
"placeValuesInside": "0",
"rotateValues": "0",
"valueFontColor": "#333333"
},
"annotations": {
"autoScale": "1",
"scaleImages": "1",
"origW": "400",
"origH": "300",
"groups": [
{
"id": "user-images",
"items": [
{
"id": "butterFinger-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/butterFinger.png",
"x": "$dataset.0.set.0.CenterX - 28",
"y": "$dataset.0.set.0.STARTY",
"xScale": "50",
"toy": "$dataset.0.set.0.ENDY + 2"
},
{
"id": "tom-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/snickrs.png",
"x": "$dataset.0.set.1.CenterX - 25",
"y": "$dataset.0.set.1.STARTY",
"xScale": "50",
"toy": "$dataset.0.set.1.ENDY + 2"
},
{
"id": "Milton-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/coffee_crisp.png",
"x": "$dataset.0.set.2.CenterX - 25",
"y": "$dataset.0.set.2.STARTY",
"xScale": "50",
"toy": "$dataset.0.set.2.ENDY + 2"
},
{
"id": "Brian-user-icon",
"type": "image",
"url": "http://static.fusioncharts.com/sampledata/images/100grand.png",
"x": "$dataset.0.set.3.CenterX - 25",
"y": "$dataset.0.set.3.STARTY",
"xScale": "50",
"toy": "$dataset.0.set.3.ENDY + 2"
}
]
}
]
},
"data": [
{
"label": "Butterfinger",
"value": "92000"
},
{
"label": "Snickers",
"value": "87000"
},
{
"label": "Coffee Crisp",
"value": "83000"
},
{
"label": "100 Grand",
"value": "80000"
}
]
}