FusionCharts - Annotation Introduction - Simple rectangle

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<input type="button" id = "showAnnotation" value = "Show Annotation"></input>
<!-- This exmaple showcases annotation with a rectangle to mark the weekend. -->

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'spline',
        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": {
                "origw": "400",
                "origh": "300",
                "autoscale": "1",
                
            },
            "data": [{
                "label": "Mon",
                "value": "15123"
            }, {
                "label": "Tue",
                "value": "14233"
            }, {
                "label": "Wed",
                "value": "25507"
            },{
                "vline": "true",
                "lineposition": "0",
                "color": "#6baa01",
                "labelHAlign": "left",
                "label": "National holiday"
            },
                     {
                         "label": "Thu",
                         "value": "9110"
                     }, {
                         "label": "Fri",
                         "value": "15529"
                     }, {
                         "label": "Sat",
                         "value": "20803"
                     }, {
                         "label": "Sun",
                         "value": "19202"
                     }]
        },
        events:{
            "beforeRender": function(evt, args){
                var flag = 0,
                    chartRef = evt.sender,
                    createGroupItems = function(){
                        var annotations = chartRef.annotations;
                        
                        // Adding a group, weekendGrp
                       ...