Skip to main content

Multi Level Sankey Diagram

Takashi Binns
  • Edited

Download: Sankey Widget

Introduction

This article explains how to import a multi-level Sankey Diagram from D3 as a plugin in Sisense.

dashboard.png

Purpose/Benefits

Sankey Diagrams are useful for showing relationships between different data points.  There is an older Sankey digram plugin, but it only supports one level.  This plugin allows you to specify as many levels are you like.  The above screenshot shows how this could be used to show data flowing from various source systems to Elasticubes, Tables, and then to dashboards.  When you hover over a node in the diagram, all related nodes are highlighted for you.

Steps

The following steps will walk through the process of adding the new chart type and creating a sample funnel chart.

Step 1 - Add the Plugin

Download the attachment and unzip the contents into your C:\Program Files\Sisense\PrismWeb\plugins\ folder. If you are using version 7.2 and higher unzip the contents into your C:\Program Files\Sisense\app\plugins\ folder. If the plugins folder doesn't exist, just create it. After those files have been unzipped there, you may also have to restart the web server. Now, when you create a new widget the Sankey chart should show up in the list of options

Step 2 - Create the Chart

On your dashboard, click the Create Widget button and select Advanced Configuration. Next, select the Sankey from the chart types menu.  For this chart you need to specify the fields to use for the ID and Label for each level of the diagram.  For the above example, you would specify the ID of each data source, Elasticube, Table, & Dashboard in the NODE IDS panel and then the label/name of each data source, Elasticube, Table, & Dashboard in the NODE LABELS panel.  Then pick a metric (like # of uses or data size) for use in the VALUES panel.

editor.png

 

References/Notes

  • D3 Sankey Diagram - GitHub project that this chart is based off
  • UPDATED: July 5, 2016 - Made a change to support code changes starting in v6.4
  • UPDATED: Oct 13, 2016 - Updated to allow for identical values at different levels.  For example, if you are using productId and categoryId as part of this visualization there could be products with the same ID value as categories.  This threw an error in the previous version, but this update accounts for this overlap
  • UPDATED: May 18, 2017 - Updated to work with version 6.6
  • UPDATED: July 4, 2017 - Made changes to support correct links highlight with multiple sankey widgets on dashboard
  • UPDATED: Sep 7, 2017 - Updated to resolve an issue when using multiple sankey widgets in the same dashboard as well as adding an option for hiding nodes with a value of "N\A"
4

Comments

38 comments

Date Votes
  • Eric Pouliot

    Very useful thanks! Do you have recommendations on maximum points per flow level for optimal performance? Thanks!

    0
  • Jyoti

    Hi, 

    This plugin looks great! However, after updating to this plugin, I am not able to use more than one level. The two levels work fine but as soon as I add a third level the chart disappears. Please let me know if there is some fix for this. The snapshot of the working as well as non-working widget is attached here for reference. 

    Thanks

     




    2 Level Sankey.PNG
    3 Level Sankey.PNG
    0
  • Christian

    I don´t know why, but this puglin it´s not working at all...Does anyone have the same problem????

    0
  • Takashi Binns

    Hi Christian and Jyoti,

    I tested this plugin with a few data sets and different browsers (chrome, firefox, and IE), and I'm not able to reproduce the error.  Are there any error messages in the JavaScript console? What if you switch this widget to a pivot table? do you end up with a result set still? How many data points are you trying to show here?

    thanks,

    -Takashi

    0
  • Christian

    Hi Takey, this is the error that I´m having using Chrome (see attached file)...

     




    Captura de pantalla 2016-05-19 a las 10.11.41.png
    Captura de pantalla 2016-05-19 a las 10.14.08.png
    0
  • Christian

    Sorry... I wrote Takashi but the spell-checker changed it! 

    0
  • Takashi Binns

    Hi Christian,

    The first screenshot you sent over showed an error that was concurring because there was no value field defined in the Widget Editor.  This plugin requires 1 or more dimensions specified as Nodes (both ID and label, even if they are the same field), as well as something to use as a calculated measure as the Value.

    The second screenshot is probably related to the sanky diagram coming up blank.  Based on the error message, it looks like there may be some results that have 1 or more null values as part of the result set.  Can you add a filter on the nodes to only return values that are not NULL?  Also, how many data points are you trying to show in this chart?  Does the same query show up when changing to a pivot table?

    Thanks,

    -Takashi

    0
  • Jyoti

    Hi Takashi,

    Thanks for your response on this. 

    So, I now see that the issue is arising because it is not able to fit in multiple values. I am not able to create a Sankey chart with the following structure: Field 1 (8 categories) -> Field 2 (2 categories)-> Field 3 (5 categories). However, if I just replace the third field with a field which has just 2 categories, I am able to see the chart normally.

    Please let me know if there some limitations around the number of categories you can have in a field while using multilevel. The dashboard hangs up after I put in all the fields as stated above and so I am not able to convert it into a pivot and see. Also, the entire table has 0.3m rows which the dashboard is processing. 

    Thanks

    Jyoti

     

    0
  • Michael Becker

    Hi Guys,

    I've noticed that this plugin tends to squeeze the visualization in order to fir the size of the widget. Try making it bigger, maybe it was squeezed to the point where is stops displaying anything?

     

    Regards,

    Michał

    0
  • Christian

    Hi Takashi,

    This is how my data looks using a Pivot Table (see attached) and the Sankey Diagram it´s not working with this same data...

     




    Sankey.png
    Pivot.png
    0
  • Adi

    Hi Takashi,

    Could you please attached a dataset file (excel, csv) used to build this dashboard?

    Thanks!

    Regards,
    Adrian

    0
  • Takashi Binns

    Hi Adrian,

    I've attached a zip file with a sample excel file that i found online, the Elasticube, and a dashboard with a finished Sankey Diagram.  Hope this helps!

    Thanks,

    -Takashi




    Sample.zip
    0
  • Michael Becker

    Hi,

    on 6.6 this widget is being cut at the top and bottom and some parts become invisible as they are outside the displayed area.

    0
  • Michael Becker

    Hi, this one does not work on 6.6.1, any chances for a fix?

     

    Regards,

    Michał

    0
  • Eric Pouliot

    Fix would be a must-have for us as well, Sankey is a key visualization in our dashboards.

    0
  • Takashi Binns

    Hi guys,

    I've updated the plugin to work with version 6.6, please download the latest and let us know if that resolves your issue

    -Takashi

    0
  • Michael Becker

    Hi Takashi,

    it removes error that widget is not registered, but instead throws a general error now. Error appears when you add at least two nodes or one node with values.Thanks for quick response!

    Regards,

    Michał

    0
  • Takashi Binns

    Hi Michał,

    Can you provide a screenshot or copy the text for the error you're getting?  I tested loading existing widgets and creating new widgets, on 6.6.1

    -Takashi

    0
  • Michael Becker

    Hi Takashi,

    please have a look at those error messages I get:

    21:14:27.655 common.js?g=gogobobAbfb:66 - TypeError: widget.metadata.panel(...).items.first is not a function
    at p.render (http://localhost:8081/systemPlugins/main.js:15:401432)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at p.redraw (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:19278)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:178:25638
    at http://localhost:8081/js/common.js?g=gogobobAbfb:8:12309
    at a (http://localhost:8081/js/common.js?g=gogobobAbfb:6:20696)
    at http://localhost:8081/js/common.js?g=gogobobAbfb:6:22147
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    redraw @ app-main.js?g=gogobobAbfb:149
    (anonymous) @ app-main.js?g=gogobobAbfb:178
    (anonymous) @ common.js?g=gogobobAbfb:8
    a @ common.js?g=gogobobAbfb:6
    (anonymous) @ common.js?g=gogobobAbfb:6
    21:14:27.919 common.js?g=gogobobAbfb:66 - TypeError: widget.metadata.panel(...).items.first is not a function
    at p.render (http://localhost:8081/systemPlugins/main.js:15:401432)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at p.redraw (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:19278)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:178:25638
    at http://localhost:8081/js/common.js?g=gogobobAbfb:8:12309
    at a (http://localhost:8081/js/common.js?g=gogobobAbfb:6:20696)
    at http://localhost:8081/js/common.js?g=gogobobAbfb:6:22147
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    redraw @ app-main.js?g=gogobobAbfb:149
    (anonymous) @ app-main.js?g=gogobobAbfb:178
    (anonymous) @ common.js?g=gogobobAbfb:8
    a @ common.js?g=gogobobAbfb:6
    (anonymous) @ common.js?g=gogobobAbfb:6
    21:14:28.160 common.js?g=gogobobAbfb:66 - TypeError: Cannot read property 'Value' of undefined
    at p.render (http://localhost:8081/systemPlugins/main.js:15:279096)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at b (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:27327)
    at Object.simulate (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:31738)
    at p.redraw (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:19225)
    at Object.after (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:17942)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9441)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:167:21237
    at Object.o [as forEach] (http://localhost:8081/js/common.js?g=gogobobAbfb:6:791)
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    b @ app-main.js?g=gogobobAbfb:13
    simulate @ app-main.js?g=gogobobAbfb:13
    redraw @ app-main.js?g=gogobobAbfb:149
    (anonymous) @ app-main.js?g=gogobobAbfb:149
    p.trigger @ common.js?g=gogobobAbfb:66
    (anonymous) @ app-main.js?g=gogobobAbfb:167
    o @ common.js?g=gogobobAbfb:6
    (anonymous) @ app-main.js?g=gogobobAbfb:167
    (anonymous) @ common.js?g=gogobobAbfb:8
    a @ common.js?g=gogobobAbfb:6
    (anonymous) @ common.js?g=gogobobAbfb:6
    21:14:28.189 common.js?g=gogobobAbfb:66 - TypeError: Cannot read property 'Value' of undefined
    at p.render (http://localhost:8081/systemPlugins/main.js:15:279096)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at b (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:27327)
    at Object.simulate (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:31738)
    at p.redraw (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:19225)
    at Object.after (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:17942)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9441)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:167:21237
    at Object.o [as forEach] (http://localhost:8081/js/common.js?g=gogobobAbfb:6:791)
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    b @ app-main.js?g=gogobobAbfb:13
    simulate @ app-main.js?g=gogobobAbfb:13
    redraw @ app-main.js?g=gogobobAbfb:149
    (anonymous) @ app-main.js?g=gogobobAbfb:149
    p.trigger @ common.js?g=gogobobAbfb:66
    (anonymous) @ app-main.js?g=gogobobAbfb:167
    o @ common.js?g=gogobobAbfb:6
    (anonymous) @ app-main.js?g=gogobobAbfb:167
    (anonymous) @ common.js?g=gogobobAbfb:8
    a @ common.js?g=gogobobAbfb:6
    (anonymous) @ common.js?g=gogobobAbfb:6
    21:14:29.513 common.js?g=gogobobAbfb:66 - TypeError: widget.metadata.panel(...).items.first is not a function
    at p.render (http://localhost:8081/systemPlugins/main.js:15:401432)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at b (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:27327)
    at Object.execute (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:31203)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:3:11100
    at Object.o [as forEach] (http://localhost:8081/js/common.js?g=gogobobAbfb:6:791)
    at Object.refresh (http://localhost:8081/js/app-main.js?g=gogobobAbfb:3:11066)
    at p.refresh (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:18874)
    at p.A.e.widget.refresh (http://localhost:8081/js/app-main.js?g=gogobobAbfb:178:26121)
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    b @ app-main.js?g=gogobobAbfb:13
    execute @ app-main.js?g=gogobobAbfb:13
    (anonymous) @ app-main.js?g=gogobobAbfb:3
    o @ common.js?g=gogobobAbfb:6
    refresh @ app-main.js?g=gogobobAbfb:3
    refresh @ app-main.js?g=gogobobAbfb:149
    A.e.widget.refresh @ app-main.js?g=gogobobAbfb:178
    e.removeItem @ app-main.js?g=gogobobAbfb:178
    fn @ VM975:4
    (anonymous) @ app-main.js?g=gogobobAbfb:84
    $eval @ common.js?g=gogobobAbfb:8
    $apply @ common.js?g=gogobobAbfb:8
    (anonymous) @ app-main.js?g=gogobobAbfb:84
    dispatch @ common.js?g=gogobobAbfb:34
    g.handle @ common.js?g=gogobobAbfb:33
    21:14:32.464 common.js?g=gogobobAbfb:66 - TypeError: widget.metadata.panel(...).items.first is not a function
    at p.render (http://localhost:8081/systemPlugins/main.js:15:401432)
    at p.afterEvent (http://localhost:8081/js/app-main.js?g=gogobobAbfb:149:20258)
    at p.trigger (http://localhost:8081/js/common.js?g=gogobobAbfb:66:9532)
    at b (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:27327)
    at C (http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:27174)
    at http://localhost:8081/js/app-main.js?g=gogobobAbfb:13:28687
    at s (http://localhost:8081/js/common.js?g=gogobobAbfb:7:29205)
    at http://localhost:8081/js/common.js?g=gogobobAbfb:7:29377
    at M.$eval (http://localhost:8081/js/common.js?g=gogobobAbfb:8:4767)
    at M.$digest (http://localhost:8081/js/common.js?g=gogobobAbfb:8:3198)
    window.$$.t.error @ common.js?g=gogobobAbfb:66
    p.trigger @ common.js?g=gogobobAbfb:66
    b @ app-main.js?g=gogobobAbfb:13
    C @ app-main.js?g=gogobobAbfb:13
    (anonymous) @ app-main.js?g=gogobobAbfb:13
    s @ common.js?g=gogobobAbfb:7
    (anonymous) @ common.js?g=gogobobAbfb:7
    $eval @ common.js?g=gogobobAbfb:8
    $digest @ common.js?g=gogobobAbfb:8
    $apply @ common.js?g=gogobobAbfb:8
    i @ common.js?g=gogobobAbfb:7
    h @ common.js?g=gogobobAbfb:7
    p.onload @ common.js?g=gogobobAbfb:7
    21:14:40.625 app-main.js?g=gogobobAbfb:286 Uncaught TypeError: t.border is not a function
    at ns.CalendarHighlight.hide (app-main.js?g=gogobobAbfb:286)
    at HTMLDocument.o (app-main.js?g=gogobobAbfb:286)
    hide @ app-main.js?g=gogobobAbfb:286
    o @ app-main.js?g=gogobobAbfb:286
    21:14:40.670 app-main.js?g=gogobobAbfb:286 Uncaught TypeError: t.border is not a function
    at ns.CalendarHighlight.hide (app-main.js?g=gogobobAbfb:286)
    at HTMLDocument.o (app-main.js?g=gogobobAbfb:286)
    hide @ app-main.js?g=gogobobAbfb:286
    o @ app-main.js?g=gogobobAbfb:286
    21:14:41.379 app-main.js?g=gogobobAbfb:286 Uncaught TypeError: t.border is not a function
    at ns.CalendarHighlight.hide (app-main.js?g=gogobobAbfb:286)
    at HTMLDocument.o (app-main.js?g=gogobobAbfb:286)
    hide @ app-main.js?g=gogobobAbfb:286
    o @ app-main.js?g=gogobobAbfb:286

    I added a new Sankey, and when I get to adding value or description for first node, this is what I get.

    Regards,

    Michał

    0
  • Takashi Binns

    Hi Michał,

    This must be an older version of the sankey plugin.  The error messages start with a reference to items.first(), but that line was changed a few versions ago.  Can you delete the sankey plugin from your system and download the latest from the link above?

    -Takashi

    0
  • Michael Becker

    Hi Takashi,

    I've done that, is it possible that the download link is pointing to the old file?

    Regards,

    Michał

    0
  • Takashi Binns

    You're right, the link was pointing to the wrong version of the plugin.  I just changed it and double checked, can you try downloading again?

    -Takashi

    0
  • Michael Becker

    It is working now, you rock! I can see that the display is offset to the right and to the bottom by few pixels each(in result it is a little bit cut at the bottom and on the right), is there a setting somewhere to correct that?

    Regards,

    Michał

    0
  • Takashi Binns

    Check out line 336 in widget.js as it sets the height and width to 99%.  If you want to eliminate the whitespace, just change this to 

    MyDiv.setAttribute("style","width: 100%; height: 100%; margin: 0 auto");
    0
  • Michael Becker

    Hi Takashi,

    did that and still Image is cut. Have a look at this image, green is the white space I can see, and red the places where I get image to be cut off:

    Is there any other setting I should check?

    Thanks in advance!

    Regards,

    Michał

    0
  • Tripti Jaiswal

    Hi,

    When we are using more than one Snakey Widget in dashboard ,we are unable to see the flow of 2nd and 3rd one.

    1st Sankey

    2nd Sankey

    Regards

    Tripti Jaiswal (GE)

    tripti.jaiswal@ge.com

    0
  • Michael Becker

    Hi Takashi,

    would it be possible to implement something like this:

    1. Let's assume I have 6 nodes

    2. Some of the flow will end on earlier nodes(3rd or 4th) and now any further nodes will be displayed as N/A(there is no data describing this flow for nodes 5 and 6)

    3. It would be nice if any flow ending on earlier nodes would stop there and do not display N/A in further nodes.

    thanks in advance for considering this!

    Regards,

    Michał

    0
  • Takashi Binns

    Hi Tripti,  Please download the latest version of the plugin, it should resolve the issue you are seeing.

    Hi Michal, I've added an option to the design panel where you can toggle on/off the option for hiding N\A nodes.

    hope this helps!

    -Takashi

    0
  • Carly Smallwood

    Hi Takashi,

     

    Is this plugin compatible with 6.7?

     

    Thanks,

    Carly

    0
  • Matan Peleg

    Hi Takashi,

    We are currently running version 6.7.1.

    In a previous version, we tried this widget out, and it had one major flaw that made it not useful for us - 

    When hovering over a node value, all pipes in other nodes that include relevant data are fully highlighted.

    What we need is to highlight only the part of other pipes containing records from the hovered node.

    Can it be done?

    Thanks,

    Matan

    1

Please sign in to leave a comment.

Didn't find what you were looking for?

New post