SAP Lumira Extension - Taking D3 Gauges to the next level

[Former Member]

Hi there,

March 2015 Note:

• This is an update to my original blog to create a Gauge Visualisation in SAP Lumira.
• I have added the following functionality:
  • a gauge is created for every line in the file (the intention is that this is a small number, I have tested with 4 lines)
  • a maximum value needs to be included in the file as the scale of each gauge is now determined from the data.
• I have added an additional zip file at the end, with the new code snippet and a data file with 4 lines
• Note you will have to add an additional measure, I called mine "Max"
  

Further Note:

• I have simply adapted my original blog, so if it no longer makes logical sense just drop me a comment and I will help you get it working.

This blog is about adapting the Gauges example I used in my earlier blog series (How to connect a JavaScript-based client to SAP using (just) the SAP ICF (SAPUI5 on SAP ICF) ) and taking it to the next level: SAP Lumira.

What is SAP Lumira?

• SAP Lumira is the self-service visualisation tool from SAP.
• It allows you to quickly analyse a set of data to uncover interesting relationships and insights, and to visualise those in a compelling way.
• SAP Lumira will also help you to formulate questions from simple and complex datasets through the use of intuitive visualisations.
• SAP Lumira interfaces with many different sources of data; from CSV to MS Excel to SAP HANA.

But wait ... there's more: you can build your own extensions to SAP Lumira and thereby add to the set of visualisations delivered by the standard product. SAP have recently shipped a useful packaging interface for building your own extensions and for deploying them to SAP Lumira.

To get a sense of what it means to create an extension have a look at these great examples from matt.lloyd

• How to add a D3 extension for SAP Lumira
• D3 Exoplanets extension for SAP Lumira

So having seen Matt's blogs and being as I am of a D3 persuasion I wondered to myself: could I port my Gauges examples to SAP Lumira?

The answer is a resounding "Yes!"

How to create the extension:

So here is a short blog describing what I did to create this extension:

1. Download SAP Lumira

If you haven't already downloaded the free (yes 'free', as in 'free beer'!) personal edition of SAP Lumira get it from SAP - Lumira, and install it to the default location.

2. Check the original code

Next have a look at the following native D3 Gauge example from: Tomer Doron's Technology Blog: google style gauges using d3.js. You can check out some other links on D3 in my blog post: How to SAPUI5 on SAP ICF – Picking the Visualization. This is what we are going to use to create a new extension in SAP Lumira.

3. Open VisPacker in Chrome

• VisPacker is the SAP web application that comes with SAP Lumira to enable the creation of extensions.
• You access the VisPacker via the following path: C:\Program Files\SAP Lumira\Desktop\utilities\VizPacker\VisPacker.html
• It looks like this:

• matt.lloyd does a fantastic job of describing this development tool (#hearty_hat_tip), but here is a brief description to aid the flow of this blog:

The left pane needs to be dealt with first (literally, as changes here destroy the code in the right pane ... please benefit from my own bitter experience here :grin: ).

1. This is were we configure whether or not the visualisation extension we're building has its own title and legend. I have chosen to delete both of these for this extension - my thinking is that a gauge will rarely be used as a visualisation device in its own right but will most likely form a component of a richer storyboard in SAP Lumira.
2. The left pane is also where we manage the interface to the data, click on the Data Model tab and use the demo file listed below to create the references to the Dimensions and the Measures that SAP Lumira will use to interface to this Gauge visualisation.
   • Create a file like the following as a template to allow mapping to the relevant fields.
   • Note: you can also use the file in the attached compressed file: Gauges (Multi with Config).zip
     

• Make sure to assign a Dimension and a Measure, and to change the names to "Key" and "Value".
  • Note if you are working with the second file (Gauges (Multi with Config).zip) remember to map the Max measure
    

The right pane contains the code modules. Notice there is one for the render.js file that hosts the logic behind the visualisation, and another for the HTML file that is used within SAP Lumira to locate the visualisation and interface to it, amongst others.

4. Modify the original D3 code to meet the needs of SAP Lumira

• I found that this is the step that took most of my time.
• This is because I still do not yet fully understand all of the logic here <sheepish grin>.
• Nevertheless I was able to deploy the 'trial-and-error' approach that has served me so well in my career to muddle through.

5. Add the code to the appropriate location.

• I cleaned up the default render.js file so that it looked like this:

• I then added the relevant code to the line highlighted above.
  • Its quite long so I have appended a txt file at the end of this blog.

• After this you should be able to use the Preview pane to,  er ... 'preview' your visualisation:

6. Package

I then used the package option to create the .zip file:

7. Deploy to SAP Lumira

Finally I copied the ensuing bundle (in my case this was the folder: cozaucsgauge) to the following folder on my laptop (you may have to adjust this if you have installed to a different location, if this is the case simply find the SAP Lumira installation folder and navigate to the \Desktop\extensions\bundles\ folder:

• C:\Program Files\SAP Lumira\Desktop\extensions\bundles\
• Fire up Lumira and create a document based on a csv file that looks like this (or use the file contained in the gauge_2lines.zip attachment below):

• Open the Chart Extension list and you should see an option for the new Gauge extension:

• Note: You will have to Convert the Val dimension to a number first and then Create a Measure before you will be able to assign the Value measure.
• Note: the same goes for Max
  

8. And that's all she wrote ... <yep, you're done>

...and here is a screenshot of the output from the code snippet for the Multi with Config example

9. Areas for development:

• I'd like to create a few more measures (Min value, Max value (Done (03.2015)) I'll leave the others for you!), Green threshold, Yellow threshold, Red threshold, and a ‘high is good’ flag)
• I also want to have the extension create a Gauge foreach line in the source data. Done (03.2015)

Later,

Andrew

[TammyPowlas]

This is very good.  Would you consider moving this to the SAP BusinessObjects Lumira space here on SCN so others may see it?

Thank you for sharing.

[Former Member]

Thanks for the suggestion Tammy. I think I've just done that ...

Andrew

PS I'm also working on the next extension (a Hierarchy Edge Bundling visualisation) which will look something like the following:

[mike_howles4]

This is great, thanks for sharing the code!

[former_member184756]

Great job Andrew, looking forward to the next one!

[nilesh_pawar6]

Yes its really nice... Thank you for sharing above information briefly.

[jmsrpp]

This looks epic ... still working on this viz?

[Former Member]

Hi James,

Yes, apologies. I've got to 'pay the bills' first and it's been a busy few weeks on that front. Hopefully just a couple of weeks away.

Regards,

Andrew

[nirav_patel7]

Hi

Thanks for contributing. A request to the authors, or community to update the instructions for Lumira 1.19 which is the latest release and it is not matching the code sections (render.js) files as per the instructions.

Thanks,

[Former Member]

Any update on this viz.

[Former Member]

Hi Andrew,

This is great.

Have you got a chance to work on multiple dimensions and multiple measures on this yet?

Regards,

DTD

[Former Member]

Hi Andrew,

Nice work!

Is there any updates on Hierarchy Edge Bundling visualization in SAP Lumira.

Regards,

Sharmila

[Former Member]

Hi Danuka,

I have finally got around to extending the example to include multiple gauges (one per line in the data file).

Take a look at the second code snippet and let me know what you think.

Later,

Andrew

[Former Member]

Hi Andrew,

Thanks for this.

I downloaded the second zip file (Multi with Config) and open it, it opens in unicode letters. Cant figure out what i'm doing wrong?

I still am unable to figure out how to map Max measure.

Any help is much appreciated.

Regards,

DTD

[Former Member]

Hi Danuka,

Yep, I had to add the .txt suffix to my zip file to be able to upload it to SCN.

It will work if you do the following:

• extract the Gauges (Multi with Config).zip.txt.zip file to your local drive
• find the local version of the unzipped Gauges (Multi with Config).zip.txt file and delete the .txt from the end
• and finally extract the contents of the Gauges (Multi with Config).zip file

You should then be able to access the two files:

• gauge_4lines_config.csv
• Gauges render_js code snippet (multi plus config).txt

In hindsight I probably didn't need to zip the files myself - I'll go ahead and add the files without zipping on my side and see if that is a more friendly process 🙂

[RodrigoCaparroz]

Great Andrew,

Do you have this extension already as "Lumira Extension" to import to Lumira 1.25?

Thanks,

Rodrigo.

[former_member183462]

Hi Andrew,

That's a great extension. Would you like to open-source it on the SCN Gallery and SAP's GitHub repository? It would be great to have it featured as part of the open-source contributions to the developer community for SAP Lumira. I can help you with that. Let me know.

Thanks,

- Annie (Suantak Niangneihoi)

[saurabh_sonawane]

Hi I had created the gauge but I have to use 2 gauge at same time in same story and page.

the second gauge is getting overwrite on 1st gauge???

need your help.

[Former Member]

Hi Saurabh,

Hope you are well?

The intention here is to use the 'data' to drive the number of Gauges (in true D3 style).

Simply add multiple records to your input dataset and the extension will generate additional Gauges.

Let me know if need anything more.

Kind regards,

Andrew

[saurabh_sonawane]

Thanks Andrew,

In the code your using an placeholder to display the gauge,

After understanding the code, i use a placeholder and it started working fine.

[Former Member]

Hi ,

I worked on Andrew's gauge code as starting point and made it configurable to some extent, like you could decide what colors you want for what range, color(start-end) like green (20-45), yellow (45-60) and red (60-80).

The real challenge is integrating with Lumira, when you will practically need two input-  the config file and data set. while the config file will be slow changing, the data set can take any format and merging them everytime is cumbersome.

Similarly I am able to use a colorpalette in development environment but in Lumira the settings does not even show option of selecting a palette.

Basically I am trying to make gauge configurable like other in-built extensions of Lumira but does not seem to be working.

I am newbie in this area, any suggestion/guidance from the experts will be really appreciated.

 

 

[former_member200394]

Hi All.

 

Can I use this component on Design Studio?

 

Where can download it ?

 

Thanks.