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.

Stacked_Column_w_Value_Line.png

The original D3 chart can be found here: http://bl.ocks.org/otfrom/4754261


2. Chord Diagram

Chord diagrams show directed relationships among a group of entities.

Chord.png

The original D3 Chord Diagram can be found here: http://bl.ocks.org/mbostock/4062006

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.

/wp-content/uploads/2014/06/sankey_diagram_486147.png

The original D3 chart can be found here: http://bost.ocks.org/mike/sankey/

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.

Force.png

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.

PopulationPyramidChart.png

The original D3 Population Pyramid chart can be found here: http://bl.ocks.org/mbostock/4062085

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 https://github.com/SAP/lumira-viz-library.

To report this post you need to login first.

25 Comments

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

  1. Imran Khan

    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.

    (0) 
    1. Shankar Narayanan SGS

      Hi Ibrahim,

      Those are profiles. You need to use VizPacker to open them and then pack them as extensions. Install those extensions into C:\Program Files\SAP Lumira\Desktop\extensions\ and restart Lumira. It should work fine.


      Thanks

      Shankar Narayanan

      (0) 
  2. M. van Foeken

    Hi Dong,

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

    Chord Diagram:

    Chord diagram.png

    Sankey Diagram:

    Sankey.png

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

    With kind regards,

    Martijn van Foeken

    (0) 
    1. Antoine CHABERT

      Hi Martijn,

      You need to “feed” the chart extension with measures & dimensions from the supplied .CSV files so that the desired result appear.

      regards,

      Antoine

      (0) 
  3. Victor Lu

    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?

    (0) 
    1. Shankar Narayanan SGS

      Hi Victor,

      When you extract the zip, you get a text file that has .zip.txt extension. Rename and remove the .txt from it so you get <Filename>.zip. Extract it now and you will get the profiles of those extensions.

      Regards

      Shankar

      (0) 
  4. Amit Gupta

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

    Regards,

    Amit

    (0) 
    1. Dong Pan Post author

      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.

      Regards,

      Dong

      (0) 
  5. Ricardo Sada

    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.


    /wp-content/uploads/2014/08/image002_528052.jpg

    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.

    Best,

    Ricardo

    (0) 
    1. Dong Pan Post author

      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.

      Regards,

      Dong

      (0) 
    2. Raghuraman Ramakrishnan

      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

      (0) 
  6. Matthias Nolte

    Hi guys,

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

    I can´t manage it to integrade it.

    Maybe the file is corrupt?

    Best

    VIs_bi

    (0) 
      1. Matthias Nolte

        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 “Chart_Extensions.zip” now

        4) Unzipping “Chart_Extensions.zip”, getting a nex folder “Chart_Extensions”

        5) Within this folder there´s another “Chart_Extensions.zip” (why so complicated?)

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

        Thanks Pan!

        (0) 
  7. Diego Torres Luyo

    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.

    Regards,

    Diego.sample CHART.JPG

    (0) 
  8. Claudia Angeles

    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?

    (0) 
    1. Dong Pan Post author

      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.

      (0) 
      1. Ghafoor Nadeem

        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 ?

        Thanks

        -Nadeem

        (0) 
  9. Krisztian Kalocsai

    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’,

            });

            flow.addElement({

       “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!

    Krisztian

    (0) 

Leave a Reply