Gauges in SAPUI5

[abesh]

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.

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 2x4 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 2x4 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 !

[paschmann]

This very helpful - thank you Abesh

[abesh]

Thanks Paul :smile:

[konstantin_anikeev]

Thanks for posting!

[abesh]

Glad you liked it :smile:

[soumya_nandi]

Thanks for this helpful post...

[abesh]

You're welcome :smile:

[Former Member]

Thanks!

[abesh]

You're welcome Ran :smile:

[former_member186390]

Thanks for your blog :smile: .

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!

[SergioG_TX]

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.

[rb]

Any news on this topic?

[saurabh_parikh49]

Nice blog.

Can I add labels in different color area?

If yes can you suggest how to do it?

Thanks:)

[former_member192018]

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

[Former Member]

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.

[former_member689370]

Nice Blog