Sankey w/ Zoom and Unzoom

by Lakshay Akula

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>

JavaScript

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
        [ 'A', 'X', 5 ],
        [ 'A', 'Y', 7 ],
        [ 'A', 'Z', 6 ],
        [ 'B', 'X', 2 ],
        [ 'B', 'Y', 9 ],
        [ 'B', 'Z', 4 ]
    ]);
    
    var newData = new google.visualization.DataTable();
    newData.addColumn('string', 'From');
    newData.addColumn('string', 'To');
    newData.addColumn('number', 'Weight');
    newData.addRows([
        [ 'A', 'X', 5 ],
        [ 'A', 'Y', 7 ],
        [ 'A', 'Z', 6 ],
    ]);
          
    // Sets chart options.
    var options = {
        width: 600,
        sankey: {
            node: {
                interactivity: true
            }
        }
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new        
    google.visualization.Sankey(document.getElementById('sankey_basic'));
          
    google.visualization.events.addListener(chart, 'select', zoom);
      
    function zoom(e) {
        google.visualization.events.removeListener(chart, 'select', zoom);
        google.visualization.events.addListener(chart, 'select', unZoom);
        chart.draw(newData, options);
    }
        
        function unZoom(e) {
        google.visualization.events.removeListener(chart, 'select', unZoom);
        google.visualization.events.addListener(chart, 'select', zoom);
        chart.draw(data, options)
    }
    chart.draw(data, options);
}