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>
@johan-66
Copy link

johan-66 commented Dec 7, 2020

I get the pop-up window, but it is completely empty.

I have worked quite a bit with apps script, but not with an html file as in this case.

Any advice on how to debug this?

@njoerd114
Copy link
Author

As this is mostly happening in javascript on your client, you might wanna check your browser's console for hints to what's going wrong.

@steren
Copy link

steren commented Jan 5, 2021

This update will load the currently active spreadsheet (instead of requiring to pass the ID) and add the menu item under "Add-on":

function onOpen() {
    SpreadsheetApp.getUi()
        .createAddonMenu()
        .addItem('Sankey Diagram', 'openDialog')
        .addToUi();
}

function getSpreadsheetData() {
    var sheet = SpreadsheetApp.getActive().getSheets()[0];
    var 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');
}

@esoliman
Copy link

esoliman commented Feb 2, 2021

@johan-66

Did you by any chance figure this out? I'm getting the same issue.

I get the pop-up window, but it is completely empty.
I have worked quite a bit with apps script, but not with an html file as in this case.
Any advice on how to debug this?

@barriletec0smic0
Copy link

barriletec0smic0 commented Mar 11, 2021

@esoliman @johan-66 I initially thought it had also happened to me.
It took some some time (10 to 20 seconds), but finally the Sankey diagram was displayed.
Thanks @njoerd114 and @steren! great Add-on!

Did you by any chance figure this out? I'm getting the same issue.

I get the pop-up window, but it is completely empty.
I have worked quite a bit with apps script, but not with an html file as in this case.
Any advice on how to debug this?

@netzrenner
Copy link

This update will load the currently active spreadsheet (instead of requiring to pass the ID) and add the menu item under "Add-on":

function getSpreadsheetData() {
var sheet = SpreadsheetApp.getActive().getSheets()[0];

Actually this gets the active sheet and then from all sheets the first (ignoring the active sheet again). You need to leave out the '.getSheets()[0]' if you really want to get the active sheet.

@jaredstein
Copy link

I'm very excited to use this, however, I am getting an error:
Invalid format in datatable: column #3 must be of type 'number'.×
I have confirmed that the entire col 3 is Format>Number>Number, and that the right sheet is indicated.

@stanch
Copy link

stanch commented Oct 15, 2021

@jaredstein I got the same error. I believe the column indices in this message are 0-based. In my case, I had added a 4th column (unrelated to the Sankey data) which did contain some non-numbers. I fixed the error by using getRange(1, 1, sheet.getLastRow(), 3) instead of getDataRange, i.e. forcing the script to only look at the first 3 columns.

@qaiserjaved
Copy link

Hi @njoerd114,

It's working and thanks for sharing.

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's also available for Excel and Office 365.
https://chartexpo.com/utmAction/NCtjb21tdW5pdHkreGwrcWorR0gr

Thanks

@marcusparisian
Copy link

I can't get the chart to populate. I've specified the exact data and no luck. Any suggestions?

@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