Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Prerequisites

A column 2D chart rendered using image annotations is shown below:

FusionCharts will load here..

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

id

Specifies a unique identification string for each annotation item.

type

Specifies the type of annotation. Set this attribute to image.

url

Specifies the location of the image file (JPEG, PNG, or GIF) that should be rendered on the chart.
Chart rendering does not pause for the images to load and, therefore, asynchronously draws them as and when they are loaded. In case you need to load them instantaneously, you may considering preloading the images.

x

Specifies the x coordinate of the starting position of the image annotation with respect to the leftmost position (taken as 0) of the chart.

y

Specifies the y coordinate of the starting position of the image annotation with respect to the topmost position (taken as 0) of the chart.

xScale

Specifies the resize value for the image width.

yScale

Specifies the resize value for the image height.

alpha

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