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!

To report this post you need to login first.

15 Comments

You must be Logged on to comment or reply to a post.

  1. ALEJANDRO OSORIO

    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

    (0) 
      1. ALEJANDRO OSORIO

        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

        (0) 
    1. Dong Pan 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

      (0) 
      1. ALEJANDRO OSORIO

        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

        (0) 
  2. Andrew Yip

    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 http://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

    (0) 
    1. Dong Pan 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

      (0) 
      1. Andrew Yip

        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

        (0) 
  3. Karisma Bora

    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

    (0) 
  4. Timothy Myers

    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

    (0) 

Leave a Reply