Sankey Example

An example of a Google Sankey Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>

JavaScript

google.setOnLoadCallback(drawChart);

data1 = [
              ['Apple', 'Place A', 1],
              ['Apple', 'Place A', 1],
              ['Grape', 'Place A', 1],
              ['Grape', 'Place B', 2],
              ['Pineapple', 'Place A', 1],
              ['Strawberry', 'Place B', 4],
              ['Mango', 'Place A', 3]
];

var sourceTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[0];
    if (sourceTotals.hasOwnProperty(key)) {
        sourceTotals[key] += item[2];
    }
    else {
        sourceTotals[key] = item[2];
    }
}

console.log(sourceTotals);

var destTotals = {};

for (var i = 0; i < data1.length; i++) {
    var item = data1[i],
        key = item[1];
    if (destTotals.hasOwnProperty(key)) {
        destTotals[key] += item[2];
    }
    else {
        destTotals[key] = item[2];
    }
}

console.log(destTotals);

data1.forEach( function(d) {
    d[0] = d[0] + " (" + sourceTotals[d[0]] + ")";
    d[1] = "(" + destTotals[d[1]] + ") " + d[1];
})

function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows(data1);

    // Sets chart options.
    var options = {
        width: 400,
    };

    // Instantiates and draws our chart,
    // passing in some options.
    var chart = new google.visualization.Sankey(
                        document.getElementById('sankey_basic'));
    chart.draw(data, options);
}