Using MAKit Charts in SAP MII for mobile/tablet u...

Former Member · ‎06-22-2013

MAKit Chart

is a UI5 control that provides charting features. It has unique features such as Value Bubble and Range Selector that make chart report much more rich and interactive. It supports touch interaction on mobile devices such as:

1.tap to highlight certain part of the chart.

2.double tap.

3.longpress.

4.two finger pince to zoom in or out.

5.one finger drag to move chart's Value Bubble highlight.

6.two finger swipe to scroll the chart when zoomed in.

Currently sap.makit.Chart supports the following types of charts:

1.Column

2.Horizontal Bar(Table Bar)

3.Line

4.Bubble

5.Pie

6.Donut

7.Waterfall Column

8.Waterfall Bar

9.Stacked Column

10.100% Stacked Column

The Chart's Value Bubble provides an interactive way of showing details of the chart. It provides detailed information (i.e. the value) of the currently highlighted chart region. User can also hide/show certain series of the chart by toggling the legends on the Value Bubble.

The Chart's Range Selector gives an overview look of the whole chart to user and also allows them to zoom in or out to a specific part of the chart for more clarity.

MAKit BAR chart

Quick Coding to get above

Need to Use sap.makit Library

var oChartj = new sap.makit.Chart({

height: "80%",

width: "100%",

category : new sap.makit.Category({ column : "yearCategory" }),

series : new sap.makit.Series({ column : "productSeries" }),

values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })]

});

var testData = {

mycollection : [

{ year : 2008, product : "Prod 1", revenue : 900000 },

{ year : 2008, product : "Prod 2", revenue : 700000 },

{ year : 2009, product : "Prod 1", revenue : 100000 },

{ year : 2009, product : "Prod 2", revenue : 900000 },

{ year : 2010, product : "Prod 1", revenue : 110000 },

{ year : 2010, product : "Prod 2", revenue : 120000 }

]

};

var jsonModel = new sap.ui.model.json.JSONModel();

jsonModel.setData(testData);

oChartj.addColumn(new sap.makit.Column({name:"yearCategory", value:"{year}"}));

oChartj.addColumn(new sap.makit.Column({name:"productSeries", value:"{product}"}));

oChartj.addColumn(new sap.makit.Column({name:"revenueValue", value:"{revenue}", type:"number"}));

oChartj.setModel(jsonModel);

oChartj.bindRows("/mycollection");

Small Changes need for XML Model (typically used in SAP MII)

var oModel = new sap.ui.model.xml.XMLModel();

oModel.loadData("/XMII/Illuminator?QueryTemplate=........

.......

oChartj.setModel(oModel);

oChartj.bindRows("/Rowset/Row");