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


1.sapui5 framework library loaded.

1.First step is to include sap.makit library in index.html file

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

4.Bind Data to Chart.Cool Already.Change Chart property "type" and see resulsts by yourself.
You can choose from

sap.makit.ChartType.BarHorizontal table bar chart

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


  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 !!

    1. You can use..
      var oModel = new sap.ui.model.odata.v2.ODataModel({
      serviceUrl: "YourServiceName",
      /*headers: {
      "myHeader1" : "value1",
      "myHeader2" : "value2"
      });"/YourEntitySetName", {
      method: "GET",
      success: function(data) {
      var jsonModel = new sap.ui.model.json.JSONModel();

      error: function() {


      Visit for more information Consume ODataSAPUI5 APP consuming odata service


Powered by Blogger.