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!"
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: ).
- 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.
- 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
- 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
- SAP Managed Tags:
21 Comments
