GROUPED COLUMN GOOGLE CHARTS

by Charles Clayton

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart" id="groupedBar" style></div>
<div class="chart" id="sankey" style></div>

CSS

chart {
    width: 500px;
    height: 500px;
    margin:20px;
}

JavaScript

var data = [
    ['Season', 'Type', 'Number'],
    ['Winter', 'Sales', 1000],
    ['Winter', 'Expenses', 400],
    ['Winter', 'Profit', 250],
    ['Spring', 'Sales', 1170],
    ['Spring', 'Expenses', 460],
    ['Spring', 'Profit', 250],
    ['Summer', 'Sales', 660],
    ['Summer', 'Expenses', 1120],
    ['Summer', 'Profit', 300],
    ['Fall', 'Sales', 1030],
    ['Fall', 'Expenses', 540],
    ['Fall', 'Profit', 350]
];

google.load('visualization', '1.1', {
    'packages': ['bar', 'sankey']
});

google.setOnLoadCallback(drawChart);

function drawChart() {

    new google.charts.Bar(document.getElementById('groupedBar')).draw(
    new google.visualization.arrayToDataTable(restructure(data)),
    google.charts.Bar.convertOptions({}));

    new google.visualization.Sankey(document.getElementById('sankey')).draw(
    new google.visualization.arrayToDataTable(data), {});
}


function restructure(input) {
    var temp = input[1][0],
        output = [
            [input[0][0]],
            [temp]
        ],
        len = input[1].length,
        j = 1;

    for (var i = 1; i < input.length; i++) {
        if (input[i][0] != temp) {
            temp = input[i][0];
            output[++j] = [temp];
        }
        output[j].push(input[i][len - 1]);
        if (j == 1) {
            output[0].push(input[i][1]);
        }
    }
    return output;
}