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>
@Natta-Sha
Copy link

Thanks, it works great!
Could you please help to customize labels by adding values to the name? (e.g.Budget(2000) instead of just Budget)
Also can't find how I can add the title of diagram.
I would be so thankful if you could help.

@flavi0gritti
Copy link

I'm trying to figure out how to use your script but I can't figure out how to fix this error:
Invalid format in datatable: column #2 must be of type 'number'.
SCR-20230115-qq5
Any suggestion? Have already tried what @stanch was suggesting a few messages above but no luck with that...

@niklasbeinghaus
Copy link

Just tried it again and I still don't have any issues...

@rasdfg3dd
Copy link

I have this working for me, i was wondering if the height of the Sankey diagram can be increased as I have some overlapping images which makes it harder to view, i have figured out how to change the height of the pop up window with the Sankey but the image itself remains the same

@Buckwich
Copy link

Buckwich commented Feb 4, 2023

Thanks @njoerd114 / @niklasbeinghaus for me it is working great. I just made some changes in a fork with some of the suggested changes in the comments:

  • update usage instruction for new Apps Script IDE
  • does not need document Id (@steren)
  • supports named sheet (not default, see customization in code.gs)
  • shows total values (default, see customization in code.gs to disable) (@Natta-Sha)
  • added some comments in code.gs to highlight customization options (@Natta-Sha also for title name)

@jpedro
Copy link

jpedro commented Mar 10, 2023

@ qaiserjaved

I would like to share a Google Sheets add-on for Sankey chart. Support up to 8 levels of Sankey diagram. There is no need to add scripting or coding. It's no-code tool with 50+ other advanced visualizations. Hope you will like it. Please share your thoughts.

For Google Sheets https://chartexpo.com/utmAction/NCtjb21tdW5pdHkrZ3MrcWorR0gr

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.

@ed-crump-nike
Copy link

Is there a way to pass styles/colors/etc. from the spreadsheet columns?

@lividsu
Copy link

lividsu commented May 24, 2023

this doesn't work for me... there was just a white page....

@lividsu
Copy link

lividsu commented May 24, 2023

but I copied the example file again and it works now.... very weird...

@katherinebell
Copy link

@flavi0gritti -- I hit this same problem. The script is checking the first sheet of the gsheet. Try re-arranging sheets in file so your Sankey data is "first".

I'm trying to figure out how to use your script but I can't figure out how to fix this error: Invalid format in datatable: column #2 must be of type 'number'. SCR-20230115-qq5 Any suggestion? Have already tried what @stanch was suggesting a few messages above but no luck with that...

@Penteas
Copy link

Penteas commented Mar 4, 2024

Thank you for the amazing work @njoerd114. I never used JS in app scripts, but now everything makes sense. I saw the google documentation, but still have some doubts if it is possible to do a Sankey Diagram like this:

image

Do you know how to put the data?

@red-adi
Copy link

red-adi commented Oct 3, 2024

Thank you for the amazing work @njoerd114. I never used JS in app scripts, but now everything makes sense. I saw the google documentation, but still have some doubts if it is possible to do a Sankey Diagram like this...

Do you know how to put the data?

You can play with the chart generator at https://www.sankeyart.com/sankeys/73/ or you can purchase the Add-Ins for Excel or Powerpoint.

@maximeborges
Copy link

I forked the code to fix a few issues I had with it.
You can now use any sheet from a spreadsheet, have other data in columns further away, and copy a PNG image from the dialog that you can paste in your spreadsheet.

image

https://gist.github.com/maximeborges/31b7bfe5e3d4d8e31163702ebb802631

@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