FusionCharts -Forum_ 16182_Adding annotations to Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

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 vl=[];
    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","showvalues":"0",
                "theme": "fint"
            },
            "annotations": {

               
                "groups": [
                    {                       
                        "items": [

                             {
                  "id": "label0",
                  "type": "text",
                  "x": "$dataset.0.set.0.startx + 20 ",
                  "y": "$dataset.0.set.0.starty - 10 ",
                  "color": "#6baa01"
                 
                
               },
               {
                  "id": "label1",
                  "type": "text",
                  "x": "$dataset.0.set.1.startx + 20",
                  "y": "$dataset.0.set.1.starty - 10",
                    "color": "#0000FF",
                 
               
                
               }                           ]
                        
                    }
                ]
            },
            "data": [
                {
                    "label": "Mon",
                    "value": "15123"
                },
                {
                    "label": "Tue",
                    "value": "14233"
                },
                {
                    "label": "Wed",
                    "value": "23507"
                },
               
                {
                    "label": "Thu",
                    "value": "9110"
                },
                {
                    "label": "Fri",
                    "value": "15529"
                },
              ...