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:

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

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.