Displaying Graph using OData services.

[Former Member]

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