Skip to content

Instantly share code, notes, and snippets.

@njoerd114
Last active October 13, 2025 15:59
Show Gist options
  • Save njoerd114/839b9a5298843ea4cf9fd241e39ebbf6 to your computer and use it in GitHub Desktop.
Save njoerd114/839b9a5298843ea4cf9fd241e39ebbf6 to your computer and use it in GitHub Desktop.
Sankey Diagram with Google Spreadsheets

Sankey Diagrams within Google Spreadsheets

This Gist is there to help you creating a Sankey Diagram from your Google Spreadsheets.

Installation

  • Open a spreadsheet
  • Click "Tools" -> "Scripts"
  • create the two files code.gs and index.html
  • insert the document ID from the URL on line 10, code.gs
  • select which sheet is the base for the sankey diagram
  • the layout of the table should be as shown in the Example Spreadsheet

Usage

  • Open the same document
  • Click "Zusatzfunktionen" -> "SankeyDiagram"

Example Spreadsheet

https://docs.google.com/spreadsheets/d/1IUmvhYuuBvfYEu8OfDczmW6LQW-xaeh5c6rklOg3x-o/

function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Zusatzfunktionen')
.addItem('SankeyDiagram', 'openDialog')
.addToUi();
}
function getSpreadsheetData() {
// ID of your Document, take from URL
var ssID = "",
// which Sheet? [0] is the first and so on...
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
data = sheet.getDataRange().getValues();
return data;
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setHeight(300)
.setWidth(1000);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Sankey Diagram');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart', 'sankey']
}); google.setOnLoadCallback(initialize);
function initialize() {
google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
}
function drawChart(rows) {
console.log(rows);
var data = google.visualization.arrayToDataTable(rows);
var chart = new google.visualization.Sankey(document.getElementById('main'));
chart.draw(data, {width: 900, sankey: {iterations: 64}});
}
</script>
</body>
</html>
@Swanky-Bubbles
Copy link

It required See, edit, create, and delete all your Google Sheets spreadsheets.

This is I N S A N E. If this was dialed down the permissions, I could use it.

I know this is a bit old but adding for anyone in the future too.

If you add this to the top of the script it will restrict to only the doc the script is on

/**
 * @OnlyCurrentDoc
 */

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment