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.

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 !