Lumira Visualization Extension - Sankey Diagram

[dongpan]

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 :smile: , 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.

Another Sankey Diagram that visualizes the energy consumption flow:

See you at the conference!

[former_member183462]

Great viz extension, Dong!

[Former Member]

Nice Extension

[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.

[former_member183462]

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

[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

[former_member183462]

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.

[dongpan]

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

[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.

[former_member183462]

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

Regards,

Annie

[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

[dongpan]

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

[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

[former_member225013]

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

[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

[former_member198672]

Really interesting extension!

[andrea_davoli83]

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

Thanks a lot

Andrea

 

[dongpan]

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

 

[andrea_davoli83]

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

 

 

 

 

[dougwood_sb]

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