Skip to Content
Technical Articles
Author's profile photo Naseera Rahmathilahi

Simple SAPUI5 app to display Charts

This is a beginner’s guide on how to create a chart in SAPUI5 consuming ODATA Service.

Steps to create app include:

  1. Create a project from template
  2. Add a new OData Service
  3. Add xml code
  4. Create annotations

And the output will look something like this –

First chart represents Preventive Maintenance Count by District.

Second chart represents PM Count ACTUAL and PLAN values with respect to district.

Prerequisites

  1. Created ODATA Service – You can also create ODATA Service using BEx Query Designer -Refer  https://blogs.sap.com/2019/10/08/bex-query-based-fiori-app/
  2. Setup WebIDE on Hana Cloud Platform – If you haven’t already set up WebIDE on Hana Cloud Platform, you can use this link to get it done – https://blogs.sap.com/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1/ 

 

Step 1: Create a Project in WEbIDE

 

 

 

 

 

Step 2: Add a new OData Service

 

Destination in HCP is configured during WebIDE setup. Refer to https://blogs.sap.com/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1/ for more details.

 

 

 

 

Step 3: Modify xml code

Browse through the folder structure and open View1.view.xml file using code editor.

 

We are going to modify the contents of View1.view.xml. But before we start, lets keep a copy of  controllerName details present in this file.

controllerName="com.testing.Simple_Fiori_Chart.controller.View1"

 

Now, let’s add the code for Smart Chart.

Go to link – https://sapui5.hana.ondemand.com/#/controls

Search for Smart Chart and select the first sample.

 

 

 

Copy the entire SmartChart.view.xml code. Replace the entire code in the xml file in our project with the copied code.

Now replace the controllerName with what we had already saved.

controllerName="com.testing.Simple_Fiori_Chart.controller.View1"

 

We need to make one more change before we are done. We need to change the entitySet property of SmartChart.

entitySet="ZFIORI_SAMPLEResults"

 

You can look for the entitySet Name in the metadata of your ODATA Service by using this url-

http://<ip>:<port>/sap/opu/odata/sap/<ODATA_SRV>/$metadata

 

This is what your code should look like now:

<mvc:View
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:smartchart="sap.ui.comp.smartchart"
	xmlns:html="http://www.w3.org/1999/xhtml"
	xmlns:sl="sap.ui.comp.navpopover"
	xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
	xmlns="sap.m"
	controllerName="com.testing.Simple_Fiori_Chart.controller.View1">

	<VBox fitContainer="true">
		<smartchart:SmartChart id ="smartChartGeneral" enableAutoBinding="true"
			entitySet="ZFIORI_SAMPLEResults" useVariantManagement="true"
			persistencyKey="PKeyChartExample9" useChartPersonalisation="true"
			header="" showFullScreenButton="true" selectionMode="Multi"
			showChartTooltip="true" showDrillBreadcrumbs="false"
			showDetailsButton="false" showDrillButtons="true"
			showSemanticNavigationButton="true"
			data:dateFormatSettings='\{"pattern":"y MMMM d"\}'>
			<smartchart:semanticObjectController>
				<sl:SemanticObjectController
					navigationTargetsObtained="onNavigationTargetsObtained" navigate="onNavigate" />
			</smartchart:semanticObjectController>
		</smartchart:SmartChart>
	</VBox>
</mvc:View>

 

Save all files and run the app.

 

 

Output as of now :

 

We have managed to get the chart container. Now to get the bars we need to define annotations.

 

Step 4: Add annotations

Right click on webapp folder and add new Annotation file

 

 

Open the newly added annotation file using annotation modeler and perform below steps to add Chart and its measure and dimension.

 

 

 

 

 

 

 

 

 

 

 

 

 

In the same manner add the dimension. And final annotation file will look like this-

 

Save and Run

 

For the second chart, add one more dimension and dimension attribute for value type-

 

and now the output is –

And with these steps we have created a UI5 app to display charts consuming ODATA service.

I hope you enjoyed the read. Feedback and questions are welcome!

 

Assigned Tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shanthi Bhaskar
      Shanthi Bhaskar

      Good one Naseera.

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi
      Blog Post Author

      Thank you!

      Author's profile photo FAZAL BASHEER
      FAZAL BASHEER

      Very informative

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi
      Blog Post Author

      Thanks!

      Author's profile photo Ravikant Ranjan
      Ravikant Ranjan

      This blog is very detailed and informative.

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi
      Blog Post Author

      Thank you!

      Author's profile photo Abdul Waheed
      Abdul Waheed

      Very Good Naseera Rahmathilahi

      Author's profile photo Judy Dennis
      Judy Dennis

      Thank you so much for sharing such a useful information. I will definitely share this with others.

       

      FedLoan Servicing Account
      Author's profile photo Adolpho Piazza
      Adolpho Piazza

      As a beginner with SAPUI5 I greatly thank you for this! Great blog!

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi
      Blog Post Author

      Thanks! 🙂

      Author's profile photo Wang Tao
      Wang Tao

      very usefully. it's nice.

      Author's profile photo Martin Jonen
      Martin Jonen

      Finally i found a good, detailed description to do my chart done 🙂 Thank you so much for sharing your ideas 🙂

      Author's profile photo Naseera Rahmathilahi
      Naseera Rahmathilahi
      Blog Post Author

      Thank you 🙂

      Author's profile photo Fettah OUARRACHI
      Fettah OUARRACHI
      hi Naseera,
      this tutorial is very interesting good work,

      I did the steps up to the part before the annotation, the container chart does not appear for me.

      when I debug I find this error:  sap.ui.comp.navpopover.SemanticObjectController: Service 'CrossApplicationNavigation' could not be obtained -

      I think this error is related to this tag.

      knowing that I work with the sapui5 version 1.52.13

      Author's profile photo Raphael Marques
      Raphael Marques

      Hi Fettah,

      Did you solve this problem? I'm having the same one.

       

      Thanks!
      Raphael

      Author's profile photo Andreas Leis
      Andreas Leis

      Hi Raphael,

      I had the same issue and it worked running the app with "Run as SAP Fiori Launchpad Sandbox" or deploy it to your backend and include it in your SAP Fiori Launchpad.

      Regards,

      Andreas

       

      Author's profile photo Lloyd Brey
      Lloyd Brey

      It is not working for me.

       

      The Chartcontainer is visible. I can also choose the dimensions and measures from service, but chart is busy.

      "Uncaught TypeError: Cannot read property 'findQueryResultByName' of undefined".

       

      Does someone have an idea why this might be?

      Author's profile photo Wolfgang Lugstein
      Wolfgang Lugstein

      Hi Lloyd

      have you provided technical names for the keyfigures in the BEx Query?

      Source:

      https://blogs.sap.com/2019/10/14/simple-sapui5-app-to-display-charts/

      • Step 1 : Create ODATA compatible BEx Query
        • Now change the technical name of PM Count and save.

      Wolfgang

      Author's profile photo Sven Mader
      Sven Mader

      Hi,

      for me, the chart is also not displayed. I see only a blue bar at the top of the page.

      I have no idea, what is the problem. Where I can find the reason?

       

      Sven

      Author's profile photo Liyana Liyana
      Liyana Liyana

      Hello Sven,

       

      Trust you doing great,

       

      have you solved this issue? For me, the chart also not displayed and only see blue bar at the top of page. use 1.52 sapui version due to my backend compability.

       

      Is anyone have idea for this problem?

       

      Author's profile photo Raphael Marques
      Raphael Marques

      Hi Naseera!

      Can't I do the annotations steps on "Business Aplication Studio"?
      I didn't found these option.

      Best regards,

      Raphael

      Author's profile photo Glauco Kubrusly
      Glauco Kubrusly

      Hello. Did you solved this ? and how ?

      Author's profile photo shruthi s h
      shruthi s h

      Can anyone help me with creating simple  bar chart for weather forecasting in sapui5 webide.

      Author's profile photo Nikhil Dixit
      Nikhil Dixit

      What is your requirement?