Skip to Content
Author's profile photo Former Member

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.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…

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Arjun Biswas
      Arjun Biswas

      Nice blog. Good work !

      Author's profile photo Hari Kishore Nidiganti
      Hari Kishore Nidiganti

      Hi,

      Nice Blog, But i am not able to see the chart on the screen after following above steps, do we need to add any code to the view controller.js? please let me know.

       

      Author's profile photo Aleksandar Mijailovic
      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!