Add Annotation to Google stacked column chart

by majahar shaikh

HTML

<script src="//www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

CSS

body {
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000;
}
a:link, a:visited {
    color: #4682b4;
}
a:hover {
    color: #4169e1;
}

JavaScript

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['API Category', 'Social', {
            role: 'annotation'
        }, 'Music', {
            role: 'annotation'
        }, 'File Sharing', {
            role: 'annotation'
        }, 'Storage', {
            role: 'annotation'
        },
            'Weather', {
            role: 'annotation'
        }],
        ['2011', 98, 'Social', 53, 'Music', 22, 'File Sharing', 16, 'Storage', 26, 'Weather'],
        ['2012', 151, 'Social', 34, 'Music', 26, 'File Sharing', 36, 'Storage', 49, 'Weather'],
        ['2013', 69, 'Social', 27, 'Music', 22, 'File Sharing', 27, 'Storage', 25, 'Weather'], ]);

    var options = {
        width: 1000,
        height: 550,
        legend: {
            position: 'top',
            maxLines: 3,
            textStyle: {
                color: 'black',
                fontSize: 16
            }
        },
        isStacked: true,

        // Displays tooltip on selection.
        // tooltip: { trigger: 'selection' }, 
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    // Selects a set point on chart.
    // chart.setSelection([{row:0,column:1}]) 

    // Renders chart as PNG image 
    // chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
}