Skip to Content

Displaying Graph using OData services.

Hello all.

In this blog, I would like to share my knowledge on graphs.

How to display graph using OData services?

Here are the few steps to follow to achieve our requirement.

In this blog, I selected Worklist template for better use.

let’s follow the steps.

step1: select the Worklist template.

step2: click on next for the project name.

step3: Click on next to select the services & system.

system ex:__

now services

click on next.

step4: Now, application settings like below.

click on next.

step5: Now you will see your project on the project list.

step6: Enhance the project.

step7: Go to worklist.view.xml then edit your code like below.

below is the source code ( while copy paste make sure your controller name)

<mvc:View controllerName="com.chart.controller.Worklist" xmlns:footerbar="sap.ushell.ui.footerbar" xmlns:layout="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic"""
	xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">
	<semantic:FullscreenPage id="page" navButtonPress="onNavBack" showNavButton="true" title="{i18n>worklistViewTitle}">
			<layout:FixFlex id='chartFixFlex' minFlexSize="250">
					<viz:Popover id="idPopOver"></viz:Popover>
					<viz:VizFrame height='100%' id="idVizFrame" uiConfig="{applicationSet:'fiori'}" vizType='line' width="100%">
							< data="{/salesSet}">
									< name="sdoc" value="{Vbeln}"/>
									< name="price" value="{Netwr}"/>
									<!--< name="date" value="{Erdat}"/>-->
							<viz.feeds:FeedItem id='valueAxisFeed' type="Measure" uid="valueAxis" values="price"/>
							<viz.feeds:FeedItem id='categoryAxisFeed' type="Dimension" uid="categoryAxis" values="sdoc"/>
			<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>
			<semantic:ShareInJamAction id="shareInJam" press="onShareInJamPress" visible="{FLP>/isShareInJamActive}"/>
			<footerbar:AddBookmarkButton id="shareTile" title="{worklistView>/saveAsTileTitle}"/>

step 8: You can check your service in Manifest.json file like below.

step 9: save everywhere and the run the application.

you will see your required output.

Hope this will help somehow…

Thank you…

You must be Logged on to comment or reply to a post.