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
4.Bind Data to Chart.All set..Try it....I have also shared a working jsbin.
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