Gauge/Dial in SAP UI5

Question

I have a requirement wherein I need to show a gauge/dial in a page showing temperature sensor data - ranging from -100 to 200 C. I researched and found that SAP UI5 only has a gauge(Radial Microchart) to how percentage values so it shows 0 to 100 only.

After some research, I found this link:

https://blogs.sap.com/2014/03/07/gauges-in-sapui5/

Here author has created a gauge.js file to add custom dial/gauge in your page.

Steps that I followed:

1. I have added gauge.ds in my project.

2. I have added following in index.html:

3. My XML View is like below:

           <!-- Row-1 -->
           <Panel id="idRow1" height="350px" width="1500px" class="sapUiResponsiveMargin">
               <content>
                   <HBox>
                       <Panel id="idPanel" height="300px" width="700px">
                           <content>
                               <HBox>
                                   <FlexBox id="idSensor1" height="100px" width="100%">
                                       <items>
                                           <VBox>
                                               <Label text="Flow" class="donutDescription" align="Center" />
                                               <micro:RadialMicroChart id="idGaugeSensor1"
                                                   percentage="50" total="50">
                                               </micro:RadialMicroChart>
   
   
                                               <Slider enableTickmarks="true" showAdvancedTooltip="true"
                                                   min="0" max="100" id="idInputSensor1" class="sapUiSmallMarginBottom"
                                                   change="onChange">
                                               </Slider>
                                               <Label text="UOM: L/s" class="donutDescription" align="Center" />
   
                                           </VBox>
   
                                       </items>
                                   </FlexBox>
                                   <FlexBox height="100px" width="100px">
                                       <items>
   
                                           <Label text="" />
   
   
   
                                       </items>
                                   </FlexBox>
                                   <FlexBox id="idSensor2" height="100px" width="100%">
                                       <items>
                                           <VBox>
                                               <Label text="Pressure" class="donutDescription" />
                                               <micro:RadialMicroChart id="idGaugeSensor2"
                                                   percentage="125" total="125">
                                               </micro:RadialMicroChart>
   
                                               <Slider enableTickmarks="true" showAdvancedTooltip="true"
                                                   min="0" max="100" id="idInputSensor2" class="sapUiSmallMarginBottom"
                                                   change="onChange">
                                               </Slider>
   
                                           </VBox>
   
                                       </items>
                                   </FlexBox>
                               </HBox>
                           </content>
                       </Panel>
   
                   </HBox>
               </content>
           </Panel>
   
   
       </content>
   </Page>
   

I need to add dial/gauge in place of Radial chart that is currently placed inside <FlexBox id="idSensor1"> & <FlexBox id="idSensor2">

4. My Controller is as below:

   sap.ui.define(['sap/m/MessageToast','sap/ui/core/mvc/Controller'], function(MessageToast, Controller) { "use strict";

       var PageController = Controller.extend("sensor.Sensor", {
   
   
           onInit: function(){
   
   
           },
   
   
       });
   
       return PageController;
   
   });
   

I am not able to understand or figure out where should I add and call gauge.js function to create dial/gauge so that it can be placed where I want to?

Answer 1

I was able to achieve it by the approach and method mentioned by @Stephen above.

I added both the js files in my index.html

Then in my controller, in sap.ui.define, I added path to gauge.js

That way I was able to call gauge.js functions.

Thanks a ton !

Answer 2

The blog you refer you guides you to use a custom library which is used by placing the created Gauge in a container element. Ideally the best practice would be to create a custom control and use the control in the XML View.

Instead of declaring the libraries in the index.html you can add them in the manifest file as external resources. You will also need to include d3.js as it is required by the gauge library.

"models": {
  .....
},
"resources": {
        "js":[
            {
                "uri": "lib/d3.js"
            },
            {
                "uri": "lib/gauge.js"
            }
        ]
}

In the XML view, we will need a container to place the gauge control.

<FlexBox
        width="95%"
        id="gaugeFlexBox"
        alignItems="Stretch">               
</FlexBox>

The library defines a global Gauge object which can be used to create gauges in the controller for the view.

    onInit: function(){
        this.gauges = [];  //Array of Gauge objects

    },

    onAfterRendering: function () {
        this.oGaugeBox = this.byId("gaugeFlexBox");
        this.oGauge = this.createGauge(this.oGaugeBox.sId, "My KPI", 0, 50);
        this.oGauge.redraw(25); //Set a value to the gauge

    },

    createGauge : function (container, label, min, max){
            var config = 
            {
                size: 120,
                label: label,
                min: undefined != min ? min : 0,
                max: undefined != max ? max : 100,
                minorTicks: 5
            }

            var range = config.max - config.min;
            config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
            config.redZones = [{ from: config.min + range*0.9, to: config.max }];

            this.gauges[container] = new Gauge(container, config);
            this.gauges[container].render();
            return this.gauges[container];
   }

Note: This is definitely not a good practice as the Gauge control created is not a UI5 control. For it to be a UI5 control you will have to extend it as a custom control.