Skip to Content
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
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!”
Lumira Gauges Example.png

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:
new vizpacker.PNG
    • 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 😀 ).
        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

gauges_2lines_new.PNG

          • 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

Lumira Gauges Example - Data Model - Key.png

Lumira Gauges Example - Data Model - Value.png
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:
clean render_js.PNG
    • 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:
Lumira Gauges Example - preview gauge.png
6. Package
I then used the package option to create the .zip file:
Lumira Gauges Example - Packed.png
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):

Lumira Gauges Example - csv file.png

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

Lumira Gauges Example - extensions.png

    • 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>
Lumira Gauges Example.png

…and here is a screenshot of the output from the code snippet for the Multi with Config example
Lumira Gauges (Multi with Config).PNG

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
To report this post you need to login first.

21 Comments

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

    1. Andrew Jabbitt Post author

      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:Lumira Hier Edge Example - extensions.png

      (0) 
        1. Andrew Jabbitt Post author

          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

          (0) 
  1. Nirav Patel

    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,

    (0) 
      1. Andrew Jabbitt Post author

        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

        (0) 
        1. Dhanuka De Silva

          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

          (0) 
          1. Andrew Jabbitt Post author

            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 🙂

              (0) 
    1. Annie Niangneihoi

      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)

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

      (0) 
      1. Andrew Jabbitt Post author

        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

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

          (0) 
    3. Arvind Choudhary

      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.

       

       

      (0) 

    Leave a Reply