Skip to Content

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.data="sap.viz.ui5.data"
	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}">
		<semantic:content>
			<layout:FixFlex id='chartFixFlex' minFlexSize="250">
				<layout:flexContent>
					<viz:Popover id="idPopOver"></viz:Popover>
					<viz:VizFrame height='100%' id="idVizFrame" uiConfig="{applicationSet:'fiori'}" vizType='line' width="100%">
						<viz:dataset>
							<viz.data:FlattenedDataset data="{/salesSet}">
								<viz.data:dimensions>
									<viz.data:DimensionDefinition name="sdoc" value="{Vbeln}"/>
								</viz.data:dimensions>
								<viz.data:measures>
									<viz.data:MeasureDefinition name="price" value="{Netwr}"/>
									<!--<viz.data:MeasureDefinition name="date" value="{Erdat}"/>-->
								</viz.data:measures>
							</viz.data:FlattenedDataset>
						</viz:dataset>
						<viz:feeds>
							<viz.feeds:FeedItem id='valueAxisFeed' type="Measure" uid="valueAxis" values="price"/>
							<viz.feeds:FeedItem id='categoryAxisFeed' type="Dimension" uid="categoryAxis" values="sdoc"/>
						</viz:feeds>
					</viz:VizFrame>
				</layout:flexContent>
			</layout:FixFlex>
		</semantic:content>
		<semantic:sendEmailAction>
			<semantic:SendEmailAction id="shareEmail" press="onShareEmailPress"/>
		</semantic:sendEmailAction>
		<semantic:shareInJamAction>
			<semantic:ShareInJamAction id="shareInJam" press="onShareInJamPress" visible="{FLP>/isShareInJamActive}"/>
		</semantic:shareInJamAction>
		<semantic:saveAsTileAction>
			<footerbar:AddBookmarkButton id="shareTile" title="{worklistView>/saveAsTileTitle}"/>
		</semantic:saveAsTileAction>
	</semantic:FullscreenPage>
</mvc:View>

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…

To report this post you need to login first.

3 Comments

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

    1. Aleksandar Mijailovic

      Hello Hari,

       

      in order to get this running, you just need to comment out everything in the onInit of the worklist.controller.js that is not needed, that is referring to the table:

       

      And yeah, nice work!

       

      (0) 

Leave a Reply