Skip to Content
Author's profile photo Abesh Bhattacharjee

Gauges in SAPUI5

Recently during a Demo Dashboard creation using SAPUI5, we came across the need of some Gauges to display KPIs. But unfortunately we found SAPUI5 in want of a Gauge control.

The easier option was to use of the several jQuery based charting libraries (like jQPlot) and I experimented with quite a few of the same before quickly coming to the conclusion that they were cumbersome to use with SAPUI5. Armed with he knowledge that the SAPUI5 charting library is based on D3.js I started looking around before stumbling upon Tomer Doron’s excellent D3 Gauges blog.

With a very little bit of hacking (download here) from my side I could make them look like this.

/wp-content/uploads/2014/03/gauges_405796.png

But how do I get it to play well with SAPUI5 ? From the above screenshot you can very well figure out that I used a 2×4 MatrixLayout to arrange them inside a panel, but how did I achieve this ?

If you look at the code here, especially the createGauge function in index.html and the Gauge function in gauge.js, you will notice that the gauge requires a container with the name “<GaugeName>GaugeContainer”. For the example on the page, Tomer has used a <span> tag with similar effect. So we know we need a container name to which we can attach the gauges so we create 8 MatrixLayoutCells in the 2×4 MatrixLayout we mentioned earlier and set their id in the format “<GaugeName>GaugeContainer” for e.g. :


  var oGCell1 = new sap.ui.commons.layout.MatrixLayoutCell({
  id : 'Plant1AvailabilityGaugeContainer',
  hAlign:"Center"
  });


Now this cell will serve as a container but we can only attach the gauge to it after all the SAPUI5 Javascript has been parsed to HTML and therefore we will use the $(document).ready function thus :


$(document).ready(function() {
  createGauge("Plant1Availability", "Plant1 - Availability");
  });


And voila ! You have your gauges !

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Paul Aschmann
      Paul Aschmann

      This very helpful - thank you Abesh

      Author's profile photo Abesh Bhattacharjee
      Abesh Bhattacharjee
      Blog Post Author

      Thanks Paul 🙂

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev

      Thanks for posting!

      Author's profile photo Abesh Bhattacharjee
      Abesh Bhattacharjee
      Blog Post Author

      Glad you liked it 🙂

      Author's profile photo Soumya Nandi
      Soumya Nandi

      Thanks for this helpful post...

      Author's profile photo Abesh Bhattacharjee
      Abesh Bhattacharjee
      Blog Post Author

      You're welcome 🙂

      Author's profile photo Former Member
      Former Member

      Thanks!

      Author's profile photo Abesh Bhattacharjee
      Abesh Bhattacharjee
      Blog Post Author

      You're welcome Ran 🙂

      Author's profile photo Amit Kumar Singh
      Amit Kumar Singh

      Thanks for your blog 🙂 .

      I was able to built a Split app with Gauge on the Detail Page. The code you have provided is plug and play

      but when I try to use the same code on the View other that initial view. The code doesnot work.

      Is it because of the below code; Is it something like "ready" is called only once or something??

      $(document).ready(function() { 

           createGauge("Plant1Availability", "Plant1 - Availability"); 

      });

      I tried it will shell based app also but if the view is not initial view the behaviour is same.

      Can you point out the mistake please?

      Thanks!

      Author's profile photo Richard Brünning
      Richard Brünning

      Any news on this topic?

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      Abesh,

      thank you for sharing this post. I believe it is very helpful for anyone using sapui5 and wanting to add new charting to their examples.

      Author's profile photo Saurabh Parikh
      Saurabh Parikh

      Nice blog.

      Can I add labels in different color area?

      If yes can you suggest how to do it?

      Thanks:)

      Author's profile photo Soumyadeep Dasgupta
      Soumyadeep Dasgupta

      Hi Abesh, Do you know how I can embed a Lumira view in SAPUI5

      Author's profile photo Srinivasan S
      Srinivasan S

      Hi Abesh,

      I have put the index.html and guage.js code in my project. I am struck on where to put the Layout creation code and the one below it. Please provide your suggestions.

      Author's profile photo Anubhuti Kumari
      Anubhuti Kumari

      Nice Blog