Skip to Content

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. 

icontab.JPG

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

chart.JPG

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.

output.JPG

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.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. 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 Development.sap.makit or VIZ Frame?

    Please suggest me which library do we need to use.

    (0) 
    1. Justin Ismond 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:   https://sapui5.netweaver.ondemand.com/explored.html#/entity/sap.viz.ui5.controls.VizFrame/samples

      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.

      (0) 

Leave a Reply