Sankey Diagram w/ Upload and Select

by Lakshay Akula

HTML

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

JavaScript

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

var sheetDisplayed;
var defaultSheet = 'All';

var width = 600;
var source = 'https://docs.google.com/spreadsheets/d/1sYtPteeD_eFz597ZC9km22p83RXc_W6Jbz2YkaTc6hk';
var zoomFunctionality = true;

function queryData() {
    var queryString = encodeURIComponent('');
    
    sheetDisplayed = defaultSheet;
    var query = queryHelper(sheetDisplayed);
    query.send(drawChart);
}

function queryHelper(sheetName) {
    return new google.visualization.Query(source + '/gviz/tq?sheet='+sheetName+'&headers=1');
}

function drawChart(response) {
    
    if (response.isError()) {
       alert('Error in query: ' + response.getMessage() + ' ' 
             + response.getDetailedMessage());
       return;
    }
        
    var data = response.getDataTable();    
      
    // Sets chart options.
    var options = {
        width: width,
        sankey: {
            node: {
                interactivity: true
            }
        }
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new        
    google.visualization.Sankey(document.getElementById('sankey_basic'));
    
    if(zoomFunctionality){
        addAppropriateListener();
    }
    
    function addAppropriateListener() {
        if(sheetDisplayed == defaultSheet) {
            google.visualization.events.addListener(chart, 'select', zoom);
        } else {
            google.visualization.events.addListener(chart, 'select', unZoom);
        }
    }
    
    function zoom(e) {
        google.visualization.events.removeListener(chart, 'select', zoom);
        var selection = chart.getSelection();
        var item = selection[0];
        sheetDisplayed = item.name;
        display(sheetDisplayed);
    }
    
    function unZoom(e) {
         google.visualization.events.removeListener(chart, 'select', unZoom);  
         sheetDisplayed = 'All';
         display('All');
    }
  ...