Skip to Content

SAP Lumira Chart Extensions Demonstrated at CodeJam Vancouver

I was delighted to run the SAP Lumira CodeJam event in Vancouver on Jun 24, 2014. I really enjoyed the open atmosphere and interesting discussions that I had with the participants. A big THANK YOU again to all of you who joined the event.

As I mentioned in the session, I would like to share the sample source code of some of the cool demos that I showed at the event.

Disclaimer: the sample code shared here is to show how easy it is to port cool D3 chart into SAP Lumira and illustrate the best practices in creating Lumira chart extensions. The code is shared as is and not meant for production use. Make sure you enhance and test them before using them in production.

1. Stacked Column Chart with a value line (2 Y-Axes)

This chart is an enhancement to the stacked column chart, so that a value line is overlayed on top of the stacked columns. Unlike its original version, it is capable of handling a dynamic number of measures to render the stacked columns, and the chart is not hard coupled to static column names.


The original D3 chart can be found here:

2. Chord Diagram

Chord diagrams show directed relationships among a group of entities.


The original D3 Chord Diagram can be found here:

3. Sankey Diagram

Sankey diagrams visualize the magnitude of flow between nodes in a network. It can be used in scenarios such as illustrating in which areas government budget is spent.


The original D3 chart can be found here:

4. Force-directed Layout

Force-directed graph simulates the equilibrium state of a system of force, resulting in edges of more or less equal length and minimum No. of edge crossings, an aesthetically pleasing way to represent relationships among networked entities, e.g. connections on LinkedIn.


The original D3 chart can be found in the book: D3 Tips and Tricks  by Malcolm Maclean

5. Population Pyramid Chart

A population pyramid chart shows the distribution of age groups per gender at various points in history. Use the left/right arrow keys to observe the changing population. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.


The original D3 Population Pyramid chart can be found here:

You can find the source code and sample data files in the attached zip file.

I hope you like the charts:).

Update on 01/23/2015: the source code and the packaged extensions of the Popluation Pyramid Chart, Stacked Column with Line Chart, Force Diagram and Chord Diagram have been shared on Github at

You must be Logged on to comment or reply to a post.
  • Dear All,

      I am using SAP lumira Desktop 1.17 trail version. I downloaded these extensions and extracted these files into folder C:\Program Files\SAP Lumira\Desktop\extensions\bundles, now this bundles folder has a separate folder for each chart extension and inside these folders there a profile file like this 'sap.viz.ext.stackedcolumnline.profile', but when i launch lumira i am not able to see any option to select these extensions. please let me know what could be issue.

    Also let me know how these extensions would be available in the lumira cloud as these extensions are stored locally.

  • Hi Dong,

    I have installed all the extensions but have an issue with two of them:

    Chord Diagram:

    Chord diagram.png

    Sankey Diagram:


    Do these errors indicate I need some additional changes in the 'VizPack' code?

    With kind regards,

    Martijn van Foeken

  • Great stuff, however when I download the extensions all I see is a text file. Does it need to be reuploaded or am I unzipping it incorrectly?

  • These charts are great. Can you please provide some samples / examples demonstrating use palette & tooltip in Lumira?



    • You can find the use of color palette in the sample "Stacked Column Chart with a value line". Just search for the keyword colorPalette in the source code.



  • Hi Dong,

    I'm somewhat new to Lumira and completly new to extending it. I just want to know if it is feasible to produce something like this using D3 or some other framework and Lumira.

    I've a requirement for a custom chart that is actually a hierarchy displayed "radially" using circles size to account for some figure and an inside circle to compare against budget or whatever. Here is an example of what I mean.


    I've been looking out for something like this in several JS charting libraries and find some similar that perhaps could be extended to produce something like this and then add it to Lumira.



    • Hi Ricardo,

      Yes this can be achieved by using D3. If you can't find the exact chart on D3 web site, check the tree charts as references, as your chart has a similar data structure as tree chart (although rendered differently).

      Once that's done, you can start to consider porting the chart into Lumira.



    • Dear Ricardo,

      As Dong suggested a standard radial tree example from web will help. additionally, if it may help, Once as a tutorial i had written a sample code to demo to a partner this radial tree and it looks like this, it does not solve all your needs, but if you contact me by email, i will fix this for you and we can share back to SCN.

      Radial Tree.png

      Radial Tree.png
  • Hi guys,

    can You please give me a dummy proof advice how to download, unpack and
    import this file?

    I can´t manage it to integrade it.

    Maybe the file is corrupt?



      • Here´s exaclty what I did, now it worked!

        1) Klicking Download link

        2) Before saving, I removed the ".txt" extension

        3) Save Zip is called "" now

        4) Unzipping "", getting a nex folder "Chart_Extensions"

        5) Within this folder there´s another "" (why so complicated?)

        6) Extracting that gives me 5 folders with an EXCEL and an Profile each.

        Thanks Pan!

  • Hi Dong, in the "1. Stacked Column Chart with a value line (2 Y-Axes)" doen't support negative values. Do you know any chart that support negative values. I need to do a graph like the picture.

    Thank you Dong.


    Diego.sample CHART.JPG

    sample CHART.JPG
  • Hi!

    I'm trying to implement these charts but I see this type of charts is only for already defined files ?, I mean ... can not be used with Universes or BW or HANA?

    • The charts are agnostic about what data source you are using in Lumira, i.e. you can use any data source for the charts. The sample data is just provided here for the ease of testing, but you are not restricted to those files.

      Furthermore, all the charts above are designed to work with any column name in the dataset, but some of them have dependencies on the sequence of the columns based on the chart's nature. Take a look at the screenshot and you will understand how to use them properly.

      • Hi Dong,

        Even I have try using my universe as a source for above extensions but its not working as expected, Then I have taken the csv file from the respected folder for the extension it worked fine.

        ALL this extensions are awesome really very good but when trying with my data source its not working as expected and in few extension which are working its not showing legend.

        Do we need to make changes on the file to get the legends ?



  • hi,

    firstly, thanks a lot for all of these charts. I'm trying to enhance the Stacked Column Chart with a value line (2 Y-Axes). I would need to add some way to change legend position, and also to add datalabels, both preferably via properties. Any idea how can i do that? I tried editing flow.js and also added it to html, but doest seem to working. Not even sure if i can use this as a viz element, but couldnt find reference for sap viz chart.

    var dataLabelElement = sap.viz.extapi.Flow.createElement({

                id : 'sap.viz.chart.elements.Datalabel',

                name : 'DataLabel',



       "element" : dataLabelElement,

          "propertyCategory" : "dataLabel"


    Would also need to reuse the same chart for design studio(as it accepts cvom charts) but from some reason it is not recognizing the repacked(via sap vizpacker) bundle as valid. Any idea what im doing wrong?

    thanks a lot in advance!