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

Tweet

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

sap.makit.ChartType.BubbleBubble chart

sap.makit.ChartType.ColumnColumn chart

sap.makit.ChartType.DonutDonut chart

sap.makit.ChartType.HundredPercentStackedColumn100% stacked column chart

sap.makit.ChartType.LineLine chart

sap.makit.ChartType.PiePie chart

sap.makit.ChartType.StackedColumnStacked column chart

sap.makit.ChartType.WaterfallBarWaterfall Bar chart

sap.makit.ChartType.WaterfallColumn

See the jsbin in action

PIE Chart Using SAPUI5 Makit Library

If you enjoyed this post, Please Share!!