Skip to Content
Author's profile photo Justin Ismond

Create a Simple Chart in Fiori SAPUI5 using Makit

This is a simple guide on how to add a chart in a Fiori app using the Makit library, and the example will be continued from the Fiori App given in Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises. I have used Eclipse to make the app as noted in the step by step guide. The first step here is to include the makit library in your index file:

makit library include.JPG

Next go into your detail view and add the makit xml namespace to your View tag.

detail view.JPG

Following this, I have added a new IconTab into the detail view, which is in XML format. To do this insert a new <IconTabFilter> tag into the <IconTabBar> section under the closing table tag. 


This adds a new Icon tab into the view, for this example you can see I have chosen the bar-chart icon, and used the “Negative” color to have it show in red. To insert your chart use the <content> tag and place  <ma:Chart> into your content area. Here in the opening tag you include your chart dimensions, chart type, binding (via ‘rows’) and chart ‘show’ options such as total view, range selector and so on. Then the chart needs the following <ma:> tags to build it: category, value, rows, columns which should be self explanatory. the binding is set from the names included in the mock.json file, where value is displayed in curly brackets, ie. “{SoId}” and “{GrossAmount}”. Place the binding in the row cells and columns to get the data from the mock.json, as shown below


Now the chart will appear in the detail view in the added icon tab filter. You can change the chart type to Bubble, Pie, etc. to get a different output.


To use this chart in an example with a live data source, just change your oModel to your data source in the component.js, and adjust the binding accordingly in the views.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Justin,

      Your post in very helpful. Can we perform the same chart in xml. Does it work same as Json. Can you provide git for this. Thanks.


      Author's profile photo Former Member
      Former Member

      very good, congratulations!!!

      Author's profile photo Mantri Shekar
      Mantri Shekar

      Hi Justin,

      Thanks for providing step by step makit example.But am confused which library charts do we need to use for a new Application or VIZ Frame?

      Please suggest me which library do we need to use.

      Author's profile photo Justin Ismond
      Justin Ismond
      Blog Post Author

      Hello Mantri,

      The viz frame and charts are a good place to start for a new application development. I recommend to use the Viz library because SAP supports this visualization more, and you can find a good example of a viz frame with multiple charts on explored:

      The makit library is compatible with Fiori framework and it is more simple to configure and setup - so it is a good secondary option (SAP does not provide an explored example, only the API). It does not have a container the way the viz frame has, but you can easily build a makit container using a panel and buttons to change the output. 

      Hope this helps.

      Author's profile photo Mantri Shekar
      Mantri Shekar

      Hello Justin,

      Thanks for your suggestion