Skip to Content

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”);


Quick Code Understanding in the 🙂 way

Thanks Dipankar Saha and Bibhas Das for inspiring me write this blog.Hope this will help everyone.

To report this post you need to login first.

7 Comments

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

  1. Dipankar Saha

    Sudipta,

    Excellent blog on MAKit chart for which I was not able to find any example code snippet so far. This will be very helpful for anyone using UI5 for mobile.

    I like the presentation style of your blog. A very good start for your first blogging in SCN. Please do write more.

    Thanks,

    Dipankar

    (0) 
  2. Matthieu Pelatan

    Very nice article. Il like MAKIt much more than VIZ but viz charts are everythere.

    Do you know why MAKIT is not often used in the examples? Is it depreciated? Is VIZ really better? Why?

    (0) 
  3. Michael Gorka

    Thank for this simple and clear example. It was very helpful.

    Just a comment since I ran into an issue with the series in my application and it might occur to someone else. You need to ensure that your data collection is sorted by the Category, if not the series won’t work.

    Thanks again!

    (0) 
  4. Vevek Pj

    Helpful article. Is there any explored sample codes for makit charts. I would like to have a line graph, where should i refer. Please provide some suggestions.Thanks!

    (0) 

Leave a Reply