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 !

To report this post you need to login first.

14 Comments

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

  1. Amit 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!

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

    (0) 

Leave a Reply