FusionCharts - Adding annotations to Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Moonmi Sonowal

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>
<!-- This example creates an annotation on line chart to reflect the weekend in a different block of color, and a label on top of it. Basic Structure for adding annotations to JSON: annotations: { attribute: value // Applicable to all annotations groups and items groups: [ { items: [ { attribute: value // applicable to the speciific annotation } ] } ] } -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Total footfall in Bakersfield Central",
                    "subCaption": "Last week",
                    "xAxisName": "Day",
                    "yAxisName": "No. of Visitors",
                    "theme": "fint"
            },
                "annotations": {
                //Refers to the original width/height of the chart, based on which the absolute dimensions/positioning of this annotation was defined. Later, if you change the chart dimensions, the annotation will auto-adjust to the new dimensions, as it recalculates its own position/dimensions by taking into considersation original width/height of chart, and current width/height
                "origw": "400",
                    "origh": "300",
                    "autoscale": "1",
                    "groups": [{
                    "items": [{
                        //Color block for weekend
                        "id": "zone",
                            "type": "rectangle",
                        //Starting at 6th data label (based on index)
                        "x": "$xaxis.label.6.x",
                        //Setting y position relative to canvas
                        "y": "$canvasEndY",
                        //Ending at 7th data label (based on index)
                        "tox": "$xaxis.label.7.x",
                        //Setting y position relative to canvas
                        "toy": "$canvasStartY",
                            "color": "#6baa01",
                            "alpha": "20",
                    }, {
                        //Label 'Weekend' on the color block
                        "id": "label",
                            "type": "text",
                            "text":...