Google stacked Bar Chart

Demonstrates how to select column

by ian_smithz

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', 'Electricity', 'Gas'],
      ['2010/11', 10, 24],
      ['2011/12', 16, 22],
      ['2012/13', 28, 19],
      ['2013/14', 28, 19],
      ['2014/15', 28, 19],
      ['2015/16', 28, 19],
    ]);

    var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
    };

    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 styleRole = {
            type: 'string',
            role: 'style',
            calc: function (dt, i) {
                return (i == row) ? 'stroke-color: #000000; stroke-width: 2' : null;
            }
        };
        var indexes = [0, 1, 2, 3, 4, 5, 6];
        var styleColumn = findStyleRoleColumn(view)
        if (styleColumn != -1 && column > styleColumn)
            indexes.splice(column, 0, styleRole);
        else
            indexes.splice(column + 1, 0, styleRole);
        view.setColumns(indexes);
        //2.redraw the chart
        chart.draw(view, options);
    }
}


function findStyleRoleColumn(view) {
    for (var i = 0; i < view.getNumberOfColumns() ; i++) {
        if (view.getColumnRole(i) == "style") {
            return i;
        }
    }
    return -1;
}

*/