FusionCharts - Using images in annotations to render icons on x-axis

Created using FusionCharts Suite XT - www.fusioncharts.com

by Shamasis Bhattacharya

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- 
Using images in annotations to render icons on x-axis. 

    Element:
        Annotations
    Attribute:
        type - set to image
        url - the url of the image to load
 -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function() {
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Revenue by store managers",
                "subCaption": "Last quarter",
                "xAxisName": "Managers",
                "yAxisName": "Revenue (In USD)",
                "numberPrefix": "$",
                "theme": "fint",
                "LabelPadding": "50"
            },
            "annotations": {
                "groups": [{
                    "id": "user-images",
                    "items": [{
                        "id": "jennifer-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
                        "x": "$xaxis.label.0.x - 24",
                        "y": "$xaxis.label.0.y - 48"
                    }, {
                        "id": "tom-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-3.png",
                        "x": "$xaxis.label.1.x - 24",
                        "y": "$xaxis.label.1.y - 48"
                    }, {
                        "id": "Milton-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-4.png",
                        "x": "$xaxis.label.2.x - 24",
                        "y": "$xaxis.label.2.y - 48"
                    }, {
                        "id": "Brian-user-icon",
                        "type": "image",
                        "url": "http://static.fusioncharts.com/sampledata/images/round-5.png",
                        "x": "$xaxis.label.3.x - 24",
                        "y": "$xaxis.label.3.y - 48"
                    }, {
                       ...