Google Stacked Bar Charts

by Hifni Nazeer

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

JavaScript

function drawChart() {
    var data = {
        labels: ["FY 2010/11", "FY 2011/12", "FY 2012/13", "FY 2013/14", "FY 2014/15", "FY 2015/16"],
        datasets: [{
            label: "Foreign Inst. Revenue",
            data: ["56.85", "59.10", "63.82", "66.82", "89.10", "33.20"]
        }, {
            label: "Foreign Individual Revenue",
            data: ["14.34", "5.37", "3.02", "2.51", "5.77", "2.64"]
        }, {
            label: "Local Retail Revenue",
            data: ["227.35", "143.06", "80.55", "90.79", "137.34", "51.54"]
        }, {
            label: "Other Revenue",
            data: ["180.96", "91.80", "42.24", "35.17", "53.54", "18.53"]
        }]
    };

    var dataForChart = [];
    var header = [];
    header.push('Year');

    for (var i = 0; i < data.datasets.length; i++) {
        header.push(data.datasets[i].label);
    }

    var _role = {
        role: 'annotation'
    };
    header.push(_role);
    dataForChart.push(header);

    for (var j = 0; j < data.labels.length; j++) {
        var temp = [];
        temp.push(data.labels[j]);

        for (var k = 0; k < data.datasets.length; k++) {
            var num = Number(String(data.datasets[k].data[j]));
            temp.push(num);
        }

        temp.push(0);
        dataForChart.push(temp);
    }
    
    //$('#divCode').html(JSON.stringify(dataForChart));

    var chartdata = new google.visualization.arrayToDataTable(dataForChart);

    var options = {
        width: 600,
        height: 300,
        title: 'Revenue Distribution',
        legend: {
            position: 'bottom',
            maxLines: 3
        },
        bar: {
            groupWidth: '75%'
        },
        isStacked: 'absolute'
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(chartdata, options);
}

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