Skip to Content
Author's profile photo Dong Pan

Lumira Visualization Extension – Sankey Diagram

In the past year or so, I have presented at various occasions on how to create visualization extensions for SAP Lumira, and all the examples that I demonstrated so far were based on D3. Needless to say, D3 is extremely powerful and flexible, but unfortunately it does not come with built-in charts, so we often have to create a chart from scratch, which could be a daunting task, especially if you want to create an extension that can accommodate various data formats/volume for productive use.  This can be even more difficult for someone who is not familiar with D3.

But why do we have to re-invent the wheel if somebody has already created such a chart? I am working on a presentation for the upcoming SABOC conference in Austin (Aug 31 – Sep 2) to demonstrate the use of a high-level charting library that contains built-in charts. The example that I am going to show is a Sankey Diagram based on Google Visualization API. Within a few lines of code, a complex Sankey Diagram visualization is created, and it can handle any number of source/intermediate/target nodes without any extra code. The charting library has done all the heavy lifting for us 🙂 , and we simply just have to instantiate and parameterize the chart.

So if you are interested, come and attend my SABOC session: Create Cool Lumira Visualization Extensions with SAP Web IDE. If you can’t wait and would like to see a sneak preview of the extension, feel free to find it on the Github repository of Lumira visualization extensions. Here is a screenshot of the Sankey Diagram that visualizes British Columbia’s provincial budget spending.

BC_Spending_Sankey.png

Another Sankey Diagram that visualizes the energy consumption flow:

/wp-content/uploads/2015/07/enerygy_flow_sankey_760542.png

See you at the conference!

Assigned tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Suantak Niangneihoi
      Suantak Niangneihoi

      Great viz extension, Dong!

      Author's profile photo Former Member
      Former Member

      Nice Extension

      Author's profile photo Former Member
      Former Member

      Hi Dong - is it possible the Sankey extension is not working in Lumira version 1.29.2?

      See image attached - it seems it is not longer working with your example data.Lumira_Sankey.JPG

      Author's profile photo Suantak Niangneihoi
      Suantak Niangneihoi

      Hi Alejandro,

      I've tested the Sankey diagram in Lumira 1.29.2 and it works fine with the example data. You can download the data and the extension again from lumira-extension-viz/Sankey_Diagram at master · SAP/lumira-extension-viz · GitHub

      It should work. But let me know if it doesn't. I'd be glad to help you out.

      Thanks,

      - Annie

      Author's profile photo Former Member
      Former Member

      Hi Annie - Thank you for following up!

      I have downloaded the extension again and tried to used the different data sources in the package, even created my own data sample and still get nothing in the visualization.

      Any other ideas?

      Tx,

      Alejandro

      Author's profile photo Suantak Niangneihoi
      Suantak Niangneihoi

      Thanks for your email, Alejandro. Let's try and analyze the problem with a step-by-step breakdown after you send me the video screen capture.

      Author's profile photo Dong Pan
      Dong Pan
      Blog Post Author

      Hi ALEJANDRO,

      Just a quick question. Are you in a corporate network where a web proxy is needed to access Internet? As this Sankey Diagram is based on the Google Visualization library, it requires an online connection. If you need a web proxy to access Internet, you should configure it in your Lumira Desktop -> Preferences -> Network.

      If that doesn't solve the issue, please work with Annie to troubleshoot further.

      Hope this helps.

      Regards,

      Dong

      Author's profile photo Former Member
      Former Member

      Hello All – thank you for your feedback – I ran the extension from a non-corporate network and it worked.

      Thank you Dong and Annie for your great support.

      Sankey_works.JPG

      Author's profile photo Suantak Niangneihoi
      Suantak Niangneihoi

      Thanks for reaching out, Alejandro. We are glad to help and support you!

      Regards,

      Annie

      Author's profile photo Former Member
      Former Member

      Hi all,

      I work with Alejandro and did some testing on our corporate network (using proxy), using Lumira 1.29.3.

      I also get a blank screen when attempting to visualize the sankey.

      Here is a snippet from the log file (when I click on the Send Your Feedback button in Lumira)

      2016/01/25 16:40:32.300000|==|S| | 9220|  47| |||||||||||||||[com.sap.hilo.desktop.v2.V2Main$StreamGobbler]SAPLumira.exe output: [0125/164032:WARNING:http_network_transaction.cc(341)] Blocked proxy response with status 407 to CONNECT request for www.google.com:443.

      2016/01/25 16:40:32.321000|==|S| | 9220|  47| |||||||||||||||[com.sap.hilo.desktop.v2.V2Main$StreamGobbler]SAPLumira.exe output: [0125/164032:INFO:CONSOLE(44)] "2016-01-25 16:40:32 Thumbnail generation failed - InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. ", source:http://127.0.0.1:65527/sapui5/sap-ui-core-nojQuery.js (44)

      2016/01/25 16:40:32.323000|==|S| | 9220|  47| |||||||||||||||[com.sap.hilo.desktop.v2.V2Main$StreamGobbler]SAPLumira.exe output: [0125/164032:INFO:CONSOLE(51)] "Uncaught Error: Script error

      2016/01/25 16:40:32.324000|==|S| | 9220|  47| |||||||||||||||[com.sap.hilo.desktop.v2.V2Main$StreamGobbler]SAPLumira.exe output: http://requirejs.org/docs/errors.html#scripterror", source: http://127.0.0.1:65527/h5v2/resources/tp/thirdPartyCombine.js(51)

      It looks like the connection to Google is being blocked (though we can access Google through our browser).

      Any idea how we can get it working?

      Andrew

      Author's profile photo Dong Pan
      Dong Pan
      Blog Post Author

      Hi Andrew,

      HTTP status code 407 means "Proxy Authentication Required". Make sure your proxy server host and port are configured correctly in Lumira Desktop, and enter the user/password for your proxy server.

      Regards,

      Dong

      Author's profile photo Former Member
      Former Member

      Hi Dong,

      Thanks for your reply.

      I did configure the proxy with user/password in Lumira Desktop.To make sure the proxy was set correctly, I tried checking for updates and sending feedback, and these worked fine (on our corporate network, these give an error unless the proxy is set).

      I think the problem is caused by our corporate network blocking a port or something.The same proxy causes problems with ESRI Geomap charts.

      Note: when I run this at home, on my regular network (no proxy), the sankey visualization works perfectly!

      Regards,

      Andrew

      Author's profile photo Former Member
      Former Member

      Hi Dong,

      Thanks for this great extension. Its worked fine after downloading the zip file.

      I tried with creating a new project in Lumira cloud IDE. And in render file I have used same code that you wrote. But nothing is displaying. Height parameter showing error and after setting some constant value to it error is no longer appearing, but no display. Can you please share your thoughts why its behaving like this?

      Thanks

      Karisma

      Author's profile photo Former Member
      Former Member

      Hello all,

      Great visualization ... I'd really like to try and use it, but it seems to be failing.  I see someone posted at the beginning of the year.  I'm on the latest 1.31.0 ... and I'm getting a javascript error in the log file:

      Thumbnail generation failed - InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state

      Any ideas? Thanks!

      Tim

      Author's profile photo Maaz Syed Adeeb
      Maaz Syed Adeeb

      Really interesting extension!

      Author's profile photo Andrea Davoli
      Andrea Davoli

      Hi all, could be possibile to have the extension for Lumira 2.0 as well?

      Thanks a lot

      Andrea

       

      Author's profile photo Dong Pan
      Dong Pan
      Blog Post Author

      Hi Andrea,

      Currently there is no plan to test (and revise, if needed) the extension for Lumira 2.0, but as the extension is an open-source project (see the Github link in the blog post), you are allowed to modify the extension and make it compatible with Lumira 2.0.

      Regards,

      Dong

       

      Author's profile photo Andrea Davoli
      Andrea Davoli

      Thanks a lot...We are able to use it with Lms 2.0 Designer...

      I've got a simple question about data preparation:

      I understand that SANKEY chart expects data in hierarchy format:

       

      Source | Target

      A111    | A11

      A11     | A1

      A1       | A

       

      If I have a database a little different from this, looks like:

      Source | Target

      A          | A

      A          | B

      B          | A

      I'm facing a loop issue when I try to display it.

      Do you have some suggestions about this topic?

      Thanks

      Andrea

       

       

       

       

      Author's profile photo Douglas Wood
      Douglas Wood

      Hi Andrea

       

      Would you mind sharing the lumira designer chart?  If not, at least the steps you took to convert Dong's version for designer.

       

      On your question, that sankey diagram isn't implemented to self reference.  I assume you would want some line to loop back on itself?  You would need to look at something like this: https://bl.ocks.org/tomshanley/b82d9aede85694b1422786ef41536ec5

       

      There are many implementations of the sankey so I'm sure you'll find one that suits your needs.

       

      Best

      Doug