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…