chart

sapui5 charts:A simple pie chart using sap.makit library

sap.makit library is deprecated.Use VizFrame instead.

How to create Pie or Donut chart using sapui5

Pre-requisites

1.sapui5 framework
2.sap.makit library loaded.
Steps

1.First step is to include sap.makit library in index.html file
 data-sap-ui-libs='sap.ui.commons,sap.makit'

2.Create sap.makit.Chart control and give properties.
var oChart = new sap.makit.Chart({
    type: sap.makit.ChartType.Pie,
    category: new sap.makit.Category({
        column: "country"
    }),
    values: [new sap.makit.Value({
        expression: "population",
        format: "number"
    })],
    categoryAxis: new sap.makit.CategoryAxis({
        displayLastLabel: true
    }),
    valueBubble: new sap.makit.ValueBubble({
        style: sap.makit.ValueBubbleStyle.FloatTop,
        showCategoryText: true
    })
});

oChart.addColumn(new sap.makit.Column({
    name: "country",
    value: "{country}"
}));
oChart.addColumn(new sap.makit.Column({
    name: "population",
    value: "{population}",
    type: "number"
}));

3.Get Data for the Chart.You can Get Data from Odata Service.Here I am using custom Data and set it to json Model.jsonmodel is client side model.
var testData = {
    mycollection: [{
            country: "india",
            population: 1251695584
        }, {
            country: "china",
            population: 1361512535
        }, {
            country: "usa",
            population: 321362789
        }, {
            country: "indonesia",
            population: 255993674
        }, {
            country: "russia",
            population: 146267288
        }, {
            country: "brasil",
            population: 204259812
        }, {
            country: "pakistan",
            population: 199085847
        }, {
            country: "nigeria",
            population: 181562056
        }, {
            country: "bangladesh",
            population: 168957745
        }, {
            country: "japan",
            population: 126919659
        }, {
            country: "others",
            population: 3043004129
        },

    ]
};

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

4.Bind Data to Chart.Cool Already.Change Chart property "type" and see resulsts by yourself.
oChart.setModel(jsonModel);
oChart.bindRows("/mycollection");
You can choose from


sap.makit.ChartType.BarHorizontal table bar chart

See the jsbin in action
If you enjoyed this post, Please Share!!

2 comments :

  1. Hi,

    In the third step you mentioned "You can Get Data from Odata Service. Here I am using custom Data " in my app i need to consume data from Odata Service and i dont know how to do that. Please help !!

    ReplyDelete
    Replies
    1. You can use..
      var oModel = new sap.ui.model.odata.v2.ODataModel({
      serviceUrl: "YourServiceName",
      /*headers: {
      "myHeader1" : "value1",
      "myHeader2" : "value2"
      }*/
      });

      oModel.read("/YourEntitySetName", {
      method: "GET",
      success: function(data) {
      var jsonModel = new sap.ui.model.json.JSONModel();
      jsonModel.setData(data);

      },
      error: function() {

      }
      });

      Visit for more information Consume ODataSAPUI5 APP consuming odata service

      Delete

Powered by Blogger.