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

[former_member303090]

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..!! 🙂