Google stacked Bar Chart

Demonstrates how to select column

by Geo George

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<!--script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script-->
<div id="columnchart_stacked" style="width: 600px; height: 420px;"></div>

JavaScript

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

    var data = google.visualization.arrayToDataTable([
      ['Genre', 'Extremely',{ role: 'annotation'}, 'Very',{ role: 'annotation'}, 'Moderately',{ role: 'annotation'}],
      ['Acquiring new skills and knowledge on your own', 1,'131', 1,'1' ,0,''],
      ['Be an effective leader', 10,'10', 220,'220', 230,'230'],
      ['Breaking down information into basic elements	', 211,'211', 109,'109', 290,'290']
    ]);

    var options = {
        width: 600,
        height: 800,
        legend: {position: 'none'},
        //bar: { groupWidth: '75%' },
        
        bar: {
            groupWidth: 20
        },
        isStacked: true,
        colors:["red","green"],
        vAxis:{minValue:20},
        annotations: {
        			boxStyle: {
              	strokeWidth: 10,
                 /* stroke: '#fff', */
              },
              textStyle: {
                fontName: 'Times-Roman',
                fontSize: 18,
                //bold: true,
                italic: true,
                // The color of the text.
                color: '#871b47',
                // The color of the text outline.
               // auraColor: '#d799ae',
                // The transparency of the text.
                opacity: 0.8
          }
        }
    };

    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_stacked'));
    google.visualization.events.addListener(chart, 'select', function () {
        highlightBar(chart, options, view);
    });
    
    chart.draw(data, options);
}


function highlightBar(chart, options, view) {
    var selection = chart.getSelection();
    if (selection.length) {
        var row = selection[0].row;
        var column = selection[0].column;


        //1.insert style role column to highlight selected column 
        var...