Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
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.


  1. Created ODATA Service - You can also create ODATA Service using BEx Query Designer -Refer

  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 - 


Step 1: Create a Project in WEbIDE






Step 2: Add a new OData Service


Destination in HCP is configured during WebIDE setup. Refer to 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.


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

Go to link -

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.


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


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



This is what your code should look like now:

<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"
data:dateFormatSettings='\{"pattern":"y MMMM d"\}'>
navigationTargetsObtained="onNavigationTargetsObtained" navigate="onNavigate" />


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!

Labels in this area