Displaying Graph using OData services

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.

Projectname1 7957234

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:dataset> <viz:feeds>   </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.

Manifest 1723710

step 9: save everywhere and the run the application.

you will see your required output.

Hope this will help somehow…

Thank you…