Graphical representation of peak-hour in SAP Gateway system using Viz-frame line chart in Web-IDE

In my current blog, I am going to display peak-hour in SAP Gateway system using data obtained from Sap Gateway statistics table /IWFND/SU_STATS in a line-chart.

SAP Gateway acts as a connector between a SAP system and non-SAP system. It also reduces the complexity to access SAP data by the developer without having knowledge on SAP by leveraging different protocols like OData services.

It makes easier to consume SAP business logic and content on Web applications.

Viz frames are used for graphical representation of data. We have different types of viz-frame charts in SAP UI5 like line, bar, bubble, bullet, pie etc.. Viz frame charts can display charts with a large set of values in an interactive and responsive way and charts with a small set of values with no interaction.

Step1:

Firstly I have created a Global class to determine peak hour in SE24 which I have used in Get_entityset method of OData.

***Getting current date & time
GET TIME STAMP FIELD timestamp1.
***Get current date
lv_timezone = 'UTC'.
lv_dat = SY-DATUM.
lv_tim = '000000'.
lv_tim1 = '010000'.

CONVERT DATE lv_dat TIME lv_tim
        INTO TIME STAMP timestamp2 TIME ZONE lv_timezone. "Getting UTC timestampl for 12AM
CONVERT DATE lv_dat TIME lv_tim1
        INTO TIME STAMP timestamp3 TIME ZONE lv_timezone. "Getting UTC timestampl for 1AM
clear i_peakhour .    "Clear
**Fetching Data from gateway statistics table
 SELECT timestampl
       service_name
       userid
       into TABLE i_peakhour from /iwfnd/su_stats
       where timestampl GE timestamp2 and timestampl LE timestamp1.
   sort i_peakhour by timestampl .    "Sort ascending
***Splitting timestampl into SY-ZONLO time & date
  LOOP AT  i_peakhour INTO w_peakhour.
         CONVERT TIME STAMP w_peakhour-timestampl TIME ZONE lv_timezone
                                   INTO DATE lv_date TIME lv_time.        "Convert to time & date
         w_ph_final-timestampl =    w_peakhour-timestampl.                "timestampl
         w_ph_final-service_name  = w_peakhour-service_name.              "Service name
         w_ph_final-userid        = w_peakhour-userid.                    "User name
         w_ph_final-count         = lv_count.                             "Count
         w_ph_final-peakhour      = lv_time.                              "Time
          APPEND w_ph_final TO i_ph_final.                                "Append to internal table
    ENDLOOP.

    do 24 TIMES.
    clear : i_ph_final2 , wa_pr.  "Clear
      i_ph_final2 = i_ph_final.   "Moving data
"Delete records which are not between specified times
      DELETE i_ph_final2 WHERE NOT peakhour BETWEEN lv_tmp_time and lv_tmp_time1. 
      DESCRIBE TABLE i_ph_final2 LINES n .    "Count
***Moving to work area
          wa_pr-COUNT = n .     "Count
          wa_pr-PEAK_TIME = lv_tmp_time+0(2) .  "time
          APPEND wa_pr to it_pr .               "Appending to internal table

            CALL FUNCTION 'DIMP_ADD_TIME'       "Increementing time by 1hr
              EXPORTING
                IV_STARTTIME       =  lv_tmp_time
                IV_STARTDATE       = '06062017'
                IV_ADDTIME         =  '010000'
            IMPORTING
               EV_ENDTIME          = lv_tmp_time.

            CALL FUNCTION 'DIMP_ADD_TIME'         "Increementing time by 1hr
              EXPORTING
                IV_STARTTIME       =  lv_tmp_time1
                IV_STARTDATE       = '06062017'
                IV_ADDTIME         =  '010000'
            IMPORTING
               EV_ENDTIME          = lv_tmp_time1 .
ENDDO.
***Assigning to final table
ET_PEAKHOUR = it_pr .
SORT IT_PR BY COUNT DESCENDING.       "Sort descending
READ TABLE IT_PR INTO WA_PR INDEX 1.  "Read first record
IF SY-SUBRC = 0.
EV_HOT_HOUR = WA_PR-PEAK_TIME.        "Peak hour
  ENDIF.

Step2:

Get_EntitySet method in OData.

CREATE OBJECT r_stat.             "reference object

CALL METHOD R_STAT->GET_PEAK_HOUR
  IMPORTING
    ET_PEAKHOUR = lt_peak_hour
    EV_HOT_HOUR =  LV_PEAK_TIME.

***Appending to entityset
loop at lt_peak_hour INTO ls_peak_hour.
ls_final_hr-count     = ls_peak_hour-count.         "Count
ls_final_hr-peak_time = ls_peak_hour-peak_time.     "Time
append ls_final_hr to et_entityset.
  ENDLOOP.

The OData Xml output is as follows.

Steps to be followed in SAP UI5 application:

View: Define a vizframe in the view.

<mvc:View controllerName="bar.open.controller.bar" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">
	<App>
		<pages>
			<Page title="Gateway Statistics">
				<content>
				<viz:VizFrame id="peakHour" width="100%"></viz:VizFrame>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

 Controller:

Steps involved are as follows:

• In the controller, we will create a data set first and will assign this data set to viz-frame chart.
• In the controller, we will create a data set first by Specifying the dimensions which are used for axis and measures which are used for value trends.
• Assign the created data set to viz-frame.
• Set the required chart type to the viz-frame. Here I am using the line chart.

		//Getting Peak hour Data & assigning it to data model
	var oModel2 = new sap.ui.model.odata.ODataModel(url);		//Creating an OData model

        var oModel3 = new sap.ui.model.json.JSONModel();	//Creating a JSON model
	//Reading data from backend	
	oModel2.read("/etpeakhr_stat001Set", null, null, false, function(oData, oResponse) {	
			oModel3.setData(oData);		//Setting the data to model
			});
		
         var oVizFrame_ph = that.getView().byId("peakHour"); //Access the vizframe from view
			//Creation of Dataset
			var oDataset_ph = new sap.viz.ui5.data.FlattenedDataset({
			dimensions: [{
                            name: 'Time',
                            value: "{Time}"
                        }],
                        measures: [{
                            name: 'Count',
                            value: '{Count}'
                        }],
				data: {
					path: "/results"
				}
			});
		oVizFrame_ph.setDataset(oDataset_ph);	//Setting dataset to vizframe chart
		oVizFrame_ph.setModel(oModel3);		//Setting OData model to Vizframe chart
		oVizFrame_ph.setVizType("line");        //Setting the Chart type as line
		//Defining Properties	
		var properties = {
				title: {
					visible: true,
					text: "Peak Hour of the Day in Gateway system"		
				},  //Title
                       
				plotArea: {
					colorPalette: d3.scale.category20().range()	//Color
			
				}
			};
			oVizFrame_ph.setVizProperties(properties); //Setting properties to viz frame
			//Creation of feed items
			var feedValueAxis_ph = new sap.viz.ui5.controls.common.feeds.FeedItem({	
					"uid": "valueAxis",
					"type": "Measure",
					"values": ["Count"]
				}),
			feedCategoryAxis_ph = new sap.viz.ui5.controls.common.feeds.FeedItem({
					"uid": "categoryAxis",
					"type": "Dimension",
					"values": ["Time"]
				});
			//Adding the feed items to vizframe
			oVizFrame_ph.addFeed(feedValueAxis_ph);
			oVizFrame_ph.addFeed(feedCategoryAxis_ph);

Save and run. The output is as follows.

Thank you..!! 🙂