Skip to Content

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.

19 Comments

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

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

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

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

        (0) 
  2. 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 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. 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

        (0) 
  3. 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

    (0) 
  4. 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

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

       

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

         

         

         

         

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

          (0) 

Leave a Reply