Skip to Content
Author's profile photo Timo ELLIOTT

Data Geek Entry: Adapting The SAP Lumira Visualization Extension Samples

The latest version of SAP Lumira supports HTML5 visualization extensions. This post is to give you a flavor of what I’ve found out about them so far (I’m using version SP11).

Since the personal edition of SAP Lumira is now free, don’t hesitate to download it, install it, and follow along.

Installing SAP Lumira Visualization Extensions

First, enable the extension samples by copying them to the right folder – follow the video or the steps below. You will need Administrator rights.

1. Go to the folder C:\Program Files\SAP Lumira\Desktop\samples (or equivalent), and copy the folder “chartExtensions”

2. Go to the folder C:\Program Files\SAP Lumira\Desktop\ and paste the folder you just copied.


A new “E” icon will be available in SAP Lumira next time it is launched:


Testing The Extensions

FlagBar Extension. First, let’s take a look at the Flagbar Extension.

Create a new document using data from the provided sample file:

C:\Program Files\SAP Lumira\Desktop\chartExtensions\viz.ext.flagbar\data\sampledata_flagbar.xls

Use the “Enrich All” button to create measures.  Click on the “Visualize” Tab, then click on the arrow by the “E” and choose “Flagbar Sample”

Drag the dimensions and measures “Country”, “Medal Type”, and “Athens (2004)” as shown:


If you switch “Medal Type” and “Country” you’ll get this:


You can also change the Primary Values to “Beijing (2008)” – but that’s about it. It’s graphical, but not very flexible.

Sample Bar Chart Extension. The Sample Bar Chart Extension is more flexible, and a more useful basis for experimentation.

For some reason, a spreadsheet is not provided for the samplesbar sample. Here’s the file I’ll be using for the rest of this example: download sample excel file (note, figures completely made up).

As before, create a new document, Enrich All, and go to the Visualize tab. This time, choose the “Sample Bar Chart” option, and drag the elements as shown below.


This samples works with any set of two-dimensional data. Save the visualization, and save the document, and close Lumira to start adapting these samples.

Adapting The Sample Bar Visualization Version 1

Let’s do something more interesting, and change the underlying code. The Visualization Extensions use the powerful, open source d3.js code, and there’s lots of tutorials available on the web on how to use it.

Unfortunately, debugging extensions are currently a little tricky. If you have access to the underlying SAP visualization libraries, you can do your coding and testing directly in a web browser, but without them, you have to launch Lumira each time, and it’s hard to know what the problem is. I trust this is something that will become easier in the future.

And before we start, yes, I know this these examples exhibit appallingly bad visualization practice. If you have a problem with that, I say “Bling it On!” (note, I published that post on April Fool’s Day).

The core code for the samplebar is in the file “” located in the folder C:\Program Files\SAP Lumira\Desktop\chartExtensions\viz.ext.samplesbar\libs.

Open it up in an editor like Notepad++ (with Administrator rights, or you won’t be able to save it) and paste the code below on line 130, after the section “bars”.

//Add overlay image to each bar
.data(function(d, i) {return d})
.attr(‘xlink:xlink:href’, function(d, i) {return imagePath + dates[i] + ‘.png’;}) //’dates’ has the image values
.attr(‘preserveAspectRatio’, ‘none’)
.attr(‘width’, x2.rangeBand() + 1)
.attr(‘height’, h)
.attr(‘x’, function(d, i) {return x2.rangeBand() * i-1;})
.attr(‘y’, 0)
//mouseovers copied from bars above
.on(‘mouseover’, function(d, i) {
tip.showAt(this.parentNode, dates[i],  d3.format(‘,.2f’)(d), {x:x2.rangeBand() * i + (x2.rangeBand() – 1)/2 , y:y(d)});
.on(‘mouseout’, function(d, i) {

Alternatively, you can download and install the updated version of the file. I won’t go into all the details here (see the d3.js tutorials!) but basically, for each value, this code finds an image with the same name as the value in question and overlays it on top of the existing bars (don’t be confused by the fact that the variable is called “dates” – it just represents the variable shown in the bars/legend).

To complement the code, I created an image for each value (“Burgundy”, “China”, etc.) and stored them in a new folder C:\Program Files\SAP Lumira\Desktop\chartExtensions\viz.ext.samplesbar\images. Each image has a transparent section that lets through the color of the underlying bar — the “inside” of the bottle (the background is solid white), and the area around the flags.


You can download the images as a zipped folder – unzip it in the “vis.ext.samplebar” folder to create the “image” subfolder. Alternatively, you can just download a whole replacement samplesbar folder (save the old one somewhere, and rename this one by taking off the “_overlay”).

We can now relaunch Lumira and open up the same document as above. You should get something like the following (I also changed the color palette in this version):


And if you swap the axes, you get the flags instead:


This version, while only a few extra lines of code, isn’t that flexible, and it’s hard to control the colors of the background. With some more code, we can be more ambitious.

Adapting The Sample Bar Visualization Version 2.

Download this version of the extension (again, copy the old samplebar folder somewhere, and delete the “_images” part to get this one to work), fire up Lumira again, using the same file, and you’ll get this:


This works in a similar way to Donald McCormack’s Old XProgressImage extension for SAP Dashboards (Xcelsius).

The code takes the value that is being charted, but instead of creating a bar, overlays an “empty” version of the picture, and then overlays that with a “full” version of the picture clipped to the right height. For example, here are the images for Burgundy – these images have transparent backgrounds outside the bottle:


This version of the extension will work for whatever values you choose, as long as there are equivalent empty and full pictures available.

It’s still a little limited, though — I haven’t done all the hard work that would be required to make sure that the sizing is appropriate – for example, if you have lots of bottles, you’ll end up with very tall skinny images. And like the original sample, it only works for two-dimensions-plus-a-measure.

I hope these samples were useful, and I look forward to seeing what others come up with!

[A version of this post first appeared on my Business Analytics blog. Follow me on Twitter for more!]

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      This is awesome Timo, I was just trying to figure out how to bring these custom charts in when I saw your blog. Awesome step by step and showcase of the exciting new functionality with SAP Lumira.

      Author's profile photo Former Member
      Former Member

      Hey Timo,

      Yes, nice work, although you stole my thunder - I thought I was the only one working on a custom chart extension! I've been fiddling (part time) for a few weeks now and am really feeling the pain of no debugging capabilities 😏 . I have a fair amount of D3 experience and will now work through your examples to figure out the interface points.

      Thanks for contributing, so the rest of us can evolve more quickly!


      Author's profile photo Steve Morea
      Steve Morea

      Great examples Timo! Really enjoyed it and it piqued my interest. I use the Predictive Analysis version incorporating Lumira and its a great and useful application. Lots more to experiment with now Thank You.

      Author's profile photo Former Member
      Former Member

      Awesome! Thank you for sharing,

      Author's profile photo Terry Penner
      Terry Penner

      Great example, Timo.  Looking forward to other creative examples.  This visual extensions interface opens up some exciting possibilities.

      Author's profile photo Terry Penner
      Terry Penner

      To show a couple of additional concepts,
      I’ve updated your sample with renamed dimensions, chart name and icon for the
      extension, so it looks more integrated into Lumira.


      Also, Hemantha's blog posting at

      shows another example that can be used as a starting point.

      Author's profile photo Timo ELLIOTT
      Timo ELLIOTT
      Blog Post Author

      Thanks Terry! Just one thing -- it's not about wine bottles, so the name isn't great! It works with any two images, _full and _empty...

      Author's profile photo Henrique Pinto
      Henrique Pinto

      I had a little problem rendering the golden medal picture.

      I noticed the picture file (within the "\SAP Predictive Analysis\Desktop\chartExtensions\viz.ext.flagbar\images\" folder) was named 'Golden.png', while the attribute value was 'Gold' instead. I renamed the file to 'Gold.png' and it started working. 😉

      Author's profile photo Henrique Pinto
      Henrique Pinto

      BTW, I'm not sure this name mismatch was just for PA, or if it also happens in Lumira (I only have PA installed, since you can't have both).

      Author's profile photo Henrique Pinto
      Henrique Pinto

      BTW2: I could not make the Wine example work in PA (the "default" samples bar worked fine). I got big Xs instead of the bottles.

      Could you test in PA 1.0.11 and let me know?

      Author's profile photo Former Member
      Former Member

      Henrique I was able to do the version two example of the wine bottles in PA 1.0.11 but not the first version. For the second version, it will only come up as a visualization if you specifically place the country as first dimension and wine as second dimension.

      Author's profile photo Henrique Pinto
      Henrique Pinto

      I tried all combinations, I replaced the whole rebuilt folder with the one from the link above and still nothing. :/

      Author's profile photo Former Member
      Former Member

      Greetings, i try to follow the example, but in version 1.19, the core code is not in that direction and i want to adapt the flag bars whit the bottles, how can i to do it, in this version, can you help me please?