chart

sapui5 charts:A simple chart using sap.makit library

sap.makit library is deprecated.Use VizFrame instead.

How to create bar 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({
                                   height: "80%", width: "100%",

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

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

                                   values : [new sap.makit.Value({ expression : "profit", 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:"year", value:"{year}"}));
oChart.addColumn(new sap.makit.Column({name:"name", value:"{name}"}));
oChart.addColumn(new sap.makit.Column({name:"profit", value:"{profit}", 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 : [ 
           { year : "2000", name : "revenue", profit : 10000 }, 
           { year : "2000", name : "profit", profit : 2000 }, 
           { year : "2001", name : "revenue", profit : 2700 }, 
           { year : "2001", name : "profit", profit : 310 }, 
           { year : "2002", name : "revenue", profit : 4900 }, 
           { year : "2002", name : "profit", profit : 1300 }, 
           { year : "2003", name : "revenue", profit : 11000}, 
           { year : "2003", name : "profit", profit : 1000 }
       ]
   };

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

4.Bind Data to Chart.All set..Try it....I have also shared a working jsbin.
oChart.setModel(jsonModel);
oChart.bindRows("/mycollection");
Bar Chart Using SAPUI5 Makit Library
If you enjoyed this post, Please Share!!

0 comments :

Post a Comment

Powered by Blogger.